Listview default selection of first item

1 Answer 103 Views
ListView
Babu
Top achievements
Rank 1
Iron
Iron
Iron
Babu asked on 26 Oct 2023, 02:08 PM | edited on 26 Oct 2023, 02:10 PM

When data is loaded in kendo mvc listview, how to make first record is automatically selected and display the result in SkeletonContainer? when there is no item to select it shouldn't throw any kind of error

is there any way to  keep multiselect dropdown in search and pass multiple values from same dropdown when user clicks search


@{
    ViewBag.Title = "Search Jobs";
}
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@model IDOHJobBank.Data.Models.UserSearchViewModel

<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">
                @Html.DropDownListFor(model => model.divName, new SelectList(
                                                            Model.ddlDivisions, "Id", "Name", 0), "Select Division", 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-1">
            </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")# </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();
        //console.log(selected)
        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) {
        //var listView = $('#jobsListView').data('kendoListView');
        ////listView.select(listView.element.children().first());
        //listView.select(".k-first");

        //var listView = e.sender;
        //alert(listView);
        //var firstItem = listView.element.children().first();
        //listView.select(firstItem);


        //// get a reference to the ListView widget
        //var listView = $("#jobsListView").data("kendoListView");
        //// selects first ListView item
        //console.log(listView.content.children().first());
        //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: 480px; '></span>" +
                        "<div class='k-card-body'>" +
                                "<span data-shape-text></span>" +
                            "</div>" +
                        "</div>"+
                "</div>")
        )
    </div>
</div>

<style>
    .container-fluid {
        display: block;
    }

    .parent {
        display: flex;
    }

    .parent > div {
        display: inline-block;
    }

    .narrow {
        width: 35%;
    }

    .narrow > .k-pager {
        border-color: transparent;
        background-color: rgb(255,255,255);
    }

    .k-listview {
        border-color: transparent;
    }

    .selected-item {
        padding: 10px 5px;
    }

    .card {
        width: 60%;
        height: 480px;
    }

    #jobsListView {
        padding: 10px 5px;
        margin-bottom: -1px;
        min-height: 510px;
        height: auto !important;
        /* Avoid cutout if font or line is bigger */
        font: inherit;
    }

    .product {
        float: left;
        position: relative;
        width: 95%;
        height: auto !important;
        margin: 0 5px;
        margin-bottom: 10px;
        padding: 5px;
        border: 0.5px solid grey;
        border-radius: 5px;
    }

    .product img {
        width: 150px;
        height: 150px;
    }

    .product h3 {
        margin: 0;
        padding: 3px 5px 0 0;
        max-width: 96px;
        overflow: hidden;
        line-height: 1.1em;
        font-size: .9em;
        font-weight: normal;
        text-transform: uppercase;
        color: black;
    }

    .main-image {
        width: 180px;
        height: 180px;
    }

    .k-listview:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .scrollable {
        overflow-y: auto;
        max-height: 400px;
    }

    .k-card {
        border-radius: 6px;
        border-width: 1px;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.4285714286;
        display: flex;
        flex-direction: column;
        position: fixed;
        overflow: hidden;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

    .k-textbox, .k-textbox > input {
        font-size: 100%;
        font-family: inherit;
        border-style: solid;
        border-width: 1px;
        -webkit-appearance: none
    }
</style>


using IDOHJobBank.Data.Models;
using IDOHJobBank.Data.Services;
using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace IDOHJobBank.External.UI.Controllers
{
    public class UserController : Controller
    {
        private JobBankExternalService eService;
        public UserController()
        {
            eService = new JobBankExternalService();
        }

        // GET: User
        public ActionResult Jobs()
        {
            var vm = eService.GetUserDropdownValues();
            
            return View(vm);
        }

        public ActionResult Jobs_Read([DataSourceRequest] DataSourceRequest request, string JobTitle, string countyName, string jobType, string divName)
        {
            var usrSearch = new UserSearchViewModel
            {
                JobTitle = JobTitle,
                countyName = countyName,
                jobType = jobType,
                divName = divName
            };

            var jobList = eService.GetUserJobDetails(usrSearch);

            //var result = GetAll();
            return Json(jobList.ToDataSourceResult(request));
        }

        public ActionResult GetCard(int id)
        {
            var model = eService.GetUserJobDetailsByID(id);
            return PartialView("_Card", model);
        }
    }
}

Babu
Top achievements
Rank 1
Iron
Iron
Iron
commented on 26 Oct 2023, 03:54 PM


//get a reference to the ListView widget
var listView = $("#jobsListView").data("kendoListView");
listView.select(listView.content.children().first());
this is selecting the first item but not sure how to get the id of the selected item and if no record is there then its throwing error.

1 Answer, 1 is accepted

Sort by
0
Accepted
Babu
Top achievements
Rank 1
Iron
Iron
Iron
answered on 27 Oct 2023, 08:34 PM

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();
        }
    }

Tags
ListView
Asked by
Babu
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Babu
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or