Kendo-MVC 列表视图 默认选择列表中的第一项

问：

页面加载时，如何在Kendo ListView中默认选择第一项，并在右侧面板（骨架容器）上显示项目的详细信息。当我选择列表项时，我可以看到详细信息。我能够使用函数onChange（e）方法做到这一点，但不确定在第一次加载页面时如何做到这一点。

<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>

在函数 onDataBound（e） 方法上，我能够选择列表中的第一项，但我不确定如何获取 selectedItem ID，就像我在 onChange 方法中所做的那样。当 ListView 中没有 Items 时，不执行任何操作。