Search code examples
asp.net-mvcvb.netlistviewkendo-ui-mvc

How to set first item as selected in listview kendoui


#:CustomerVersion# #:Rank# #:AccountType#

By default, the first list item should be selected on load of the page. How to achieve this?

enter image description here

<script type="text/x-kendo-tmpl" id="template">
  <div class="product">
    <h3>#:CustomerVersion#</h3>
    <h5>#:Rank#</h5>
    <h3>#:AccountType#</h3>
  </div>
</script>


<div class="demo-section">
  @Code Dim listName = "List" Dim listViewRankBar = Html.Kendo().ListView(Of RankBarModel)() With listViewRankBar .Name(listName) .TagName("div") .ClientTemplateId("template") .DataSource(Sub(datasource) datasource.Read(Sub(read) read.Action("Products_Read",
  "RankBar")) datasource.PageSize(15) End Sub) .Selectable(Sub(selectable) selectable.Enabled(True) selectable.Mode(ListViewSelectionMode.Single) End Sub) .Events(Sub(events) events.Change("onChange").DataBound("onDataBound") End Sub) '.Pageable() End
  With End Code @listViewRankBar
</div>


Solution

  •  function listRankBarOnDataBound(arg) {
       //Fires when the list view has received data from the data source and it is already rendered.
       // get a reference to the list view widget
       var listView = $("#ListRankBar").data("kendoListView");
       // selects first list view item
       listView.select(listView.element.children().first());
     }