Filter Data in Telerik ListView from server side in action method

Question

• Hey i am using Telerik ListView Control and its bind data successfully all data coming but i want search or filter data and bind listview again i want to this from server side initially all data getting right way my code is below

  • Here is my View code im using telerik ListView Template

    <script type="text/x-kendo-tmpl" id="template"> <div class="col-md-8 jumbotron"> <div class="col-sm-4"> <span><b>Name:</b></span><br /> <span><b>Gender:</b></span><br /> <span><b>DOB:</b></span><br /> <span><b>Country:</b></span><br /> <span><b>Province:</b></span><br /> <span><b>Interset:</b></span><br /> </div> <img img src="#:Image#" width="100" height="100" /> <div class="col-sm-4"> <span>#:FirstName#</span><br /> <span>#:Gender#</span><br /> <span>#:DOB#</span><br /> <span>#:CountryName#</span><br /> <span>#:ProvinceName#</span><br /> <span>#:Interset#</span><br /> </div> </div> </script>

  • Here Is Telerik Kendo ListView getting all data from database from server side

    <div class="demo-section k-content wide"> @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>() .Name("ListView") .TagName("div") .ClientTemplateId("template") .DataSource(dataSource => dataSource .ServerOperation(true) .Read(read => read.Action("Get", "Home") ) ) ) </div>

  • Here is my controller getting data now i want filter data from server side when i enter text in textbox and text pass to controller and filter data from database and then pass to view bind listview again

  public JsonResult Get([DataSourceRequest] DataSourceRequest request) { var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel { FirstName = list.FirstName, Gender = list.Gender, DOB = list.DOB.Value.ToShortDateString(), Image = list.Image, CountryName = list.Name, ProvinceName = list.ProvinceName, Interset = list.Interset }).ToList(); return Json(studentData.ToDataSourceResult(request)); }

Answer 1

Here is how done it according to my Requirement 

 - Client Side

@Html.TextBox("SearchBox")

<button id="btnSearch">Filter</button> 

<script type="text/x-kendo-tmpl" id="template">
    <div class="col-md-8  jumbotron">
        <div class="col-sm-4">
            <span><b>Name:</b></span><br />
            <span><b>Gender:</b></span><br />
            <span><b>DOB:</b></span><br />
            <span><b>Country:</b></span><br />
            <span><b>Province:</b></span><br />
            <span><b>Interset:</b></span><br />
        </div>
        <img img src="#:Image#" width="100" height="100" />
        <div class="col-sm-4">
            <span>#:FirstName#</span><br />
            <span>#:Gender#</span><br />
            <span>#:DOB#</span><br />
            <span>#:CountryName#</span><br />
            <span>#:ProvinceName#</span><br />
            <span>#:Interset#</span><br />
        </div>
    </div>
</script>

<div class="demo-section k-content wide">
    @(Html.Kendo().ListView<Assignment.Models.StudentViewModel>()
                .Name("ListView")
                .TagName("div")
                .ClientTemplateId("template")
              .DataSource(dataSource =>
              {
                  dataSource.Read(read => read.Action("GetStudentListViewData", "Home")).ServerOperation(true);
                  dataSource.PageSize(2);
              }).Pageable()
    )
</div>

<script src="~/Scripts/Kendo/Scripts/kendo.all.min.js"></script>
    <script src="~/Scripts/Kendo/Scripts/kendo.aspnetmvc.min.js"></script>
    <script>
        $('#btnSearch').click(function () {

            filterListView();
        });
        $('#SearchBox').keypress(function (e) {
            if (e.which == 13) {//Enter key pressed
                $('#btnSearch').click();//Trigger search button click event
            }
        });
        function filterListView() {
            debugger;
            var searhValue = $('#SearchBox').val();
            var dataSource = ({
                filters: {
                    // leave data items which are
                    logic: "or",
                    filters: [
                      { field: "FirstName", operator: "contains", value: searhValue },
                      { field: "CountryName", operator: "contains", value: searhValue },
                      { field: "Gender", operator: "contains", value: searhValue },
                      { field: "ProvinceName", operator: "contains", value: searhValue },
                    { field: "Interset", operator: "contains", value: searhValue }
                    ]
                }
            });
            var list = $("#ListView").data("kendoListView");
            list.dataSource.filter(dataSource.filters);
        }
</script>

• Server Side

      public JsonResult GetStudentListViewData([DataSourceRequest] DataSourceRequest request)
  {
      var studentData = db.sp_GetStudentData().Select(list => new StudentViewModel
      {
          FirstName = list.FirstName,
          Gender = list.Gender,
          DOB = list.DOB.Value.ToShortDateString(),
          Image = list.Image,
          CountryName = list.Name,
          ProvinceName = list.ProvinceName,
          Interset = list.Interset
      }).ToList();
  
      return Json(studentData.ToDataSourceResult(request));
  }