Kendo-MVC Listview Select first item in list by default

Question

How to select first item by default in the Kendo ListView when the page loads and display the details of the item on right panel(skeleton container). I can see the details when I select the list items. I am able to do that using function onChange(e) method but not sure how to do it when first-time page is loading.

<div>
    <form style="padding-bottom: 10px; padding-left:10px; padding-right:10px;">
        <div class="row">
            @*<div class="col-md-1">
            </div>*@
            <div class="col-md-2">
                @*@Html.DropDownListFor(model => model.JobTitle, new SelectList(
                        Model.ddlTitles, "Id", "Name", 0), "Select Title", new { @class = "form-control" })*@
            </div>
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.countyName, new SelectList(
                                                            Model.ddlCounties, "Id", "Name", 0), "Select County", new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                @Html.DropDownListFor(model => model.jobType, new SelectList(
                                                            Model.ddlJobTypes, "Id", "Name", 0), "Select JobType", new { @class = "form-control" })
            </div>
            <div class="col-md-2">
                <input type="button" name="Search" value="Search" style="text-align:center;" class="btn btn-info" id="btnSubmit">
                <input type="button" name="Clear" value="Clear" style="text-align:center;" class="btn btn-info" id="btnClear">
            </div>
            <div class="col-md-3">
                @*@Html.DropDownListFor(model => model.divName, new SelectList(
                        Model.ddlDivisions, "Id", "Name", 0), "Select Division", new { @class = "form-control" })*@
            </div>
        </div>
    </form>
</div>

<script type="text/x-kendo-tmpl" id="leftTemplate">
    <div class="product">
        <P style="font-size:medium; font-weight: bold">#:Title#</P>

        <p style="margin: 0px 0px 5px;"> Posted Date : #: kendo.toString(PostDate, "MM/dd/yyyy")#  |  Positions Available : #= Vacancies #  |  County : #= County #</p>
        @*<p style="margin: 0px 0px 5px;"> Positions Available : #= Vacancies # </p>
        <p style="margin: 0px 0px 5px;"> County : #= County # </p>*@
        <hr>
        <p>#= JobDesc #</p>
    </div>
</script>

<script>
    function onChange(e) {
        var selected = e.sender.select();
        var dataItem = e.sender.dataItem(selected[0])
        $.ajax({
            type: "GET",
            url:"@Url.Action("GetCard","User")",
            data: { id: dataItem.ID },
            success: function (viewHTML) {
                $("#skeleton").hide();
                $(".selected-item").html(viewHTML);
            },
            error: function (errorData) { console.log(errorData) }
        });
    }
    function onDataBound(e) {
        // get a reference to the ListView widget
        var listView = $("#jobsListView").data("kendoListView");
        console.log(listView.content);
        listView.select(listView.content.children().first());
    }
    function searchCriteria() {
        return {
            //JobTitle: $("#JobTitle").val(),
            countyName: $("#countyName").val(),
            jobType: $("#jobType").val(),
            //divName: $("#divName").val()
        };
    }

    $("#btnSubmit").click(function () {
        $("#jobsListView").data("kendoListView").dataSource.read();
    });

    $("#btnClear").click(function () {
        $("#JobTitle").val('');
        $("#countyName").val('');
        $("#jobType").val('');
        $("#divName").val('');
        $("#jobsListView").data("kendoListView").dataSource.read();
    });
</script>

<div class="parent">
    <div class="demo-section narrow">
        @(Html.Kendo().ListView<IDOHJobBank.Data.Models.UserJobDetails>()
            .Name("jobsListView")
            .TagName("div")
            .ClientTemplateId("leftTemplate")
            .DataSource(dataSource => dataSource
                .PageSize(10)
                .Model(m =>
                {
                    m.Id(f => f.ID);
                }
                )
                .Read(read => read.Action("Jobs_Read", "User").Data("searchCriteria"))
            )
            .Scrollable()
            .Pageable()
            .Selectable(s => s.Mode(ListViewSelectionMode.Single))
            .Events(e => { e.Change("onChange"); e.DataBound("onDataBound"); })
        )
    </div>

    <div class="selected-item" style="display:block;">
        @(Html.Kendo().SkeletonContainer()
            .Name("skeleton")
            .Animation(SkeletonContainerAnimation.Pulse)
            .Template(
                "<div class='k-card'>" +
                    "<div class='k-card-header'>" +
                        "<div>" +
                            "<span data-shape-circle class='k-card-image avatar'></span>" +
                        "</div>" +
                        "<div class='user-info' style='width: 100%;'>" +
                            "<span data-shape-text class='k-card-title'></span>" +
                            "<span data-shape-text class='k-card-subtitle' style='width: 35%;'></span>" +
                        "</div>" +
                    "</div>" +
                    "<span data-shape-rectangle style='width: 800px; height: 660px; '></span>" +
                        "<div class='k-card-body'>" +
                                "<span data-shape-text></span>" +
                            "</div>" +
                        "</div>"+
                "</div>")
        )
    </div>
</div>

on function onDataBound(e) method I am able to select the first item in the list but I am not sure how to get the selectedItem ID just like I did in onChange method. When there are no Items in the ListView do nothing.

Answer 1

function onDataBound(e) {
        // get a reference to the ListView widget
        var listView = $("#jobsListView").data("kendoListView");
        var dataItem = e.sender.dataItem(listView.content.children().first()[0])
       
       
        if (dataItem) {
            listView.select(listView.content.children().first());
            $.ajax({
                type: "GET",
                url:"@Url.Action("GetCard", "User")",
                data: { id: dataItem.ID },
                success: function (viewHTML) {
                    $("#skeleton").hide();
                    $(".selected-item").show();
                    $(".selected-item").html(viewHTML);
                },
                error: function (errorData) { console.log(errorData) }
            });
        } else {
            $("#skeleton").show();
            $(".selected-item").hide();
        }
    }