ListView Filter Data from server side in action method

4 posts, 0 answers
  1. umer
    umer avatar
    3 posts
    Member since:
    Nov 2017

    Posted 19 Nov Link to this post

    Hey! i am using telerik listview Template for asp.net MVC i want to filter data from server side i.e i enter data in textbox send to action method and filter data and than pass to again view and bind data to listview initially my listview working perfect all data come through database here is my Code

    <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
                    .ServerOperation(true)
                    .Read(read => read.Action("Get", "Home")
                    )
                    )
        )
    </div>

    // here im getting data from server for first load using store procedure now i need to filter data from server side in action method 

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

  2. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 21 Nov Link to this post

    Hello, Umer,

    The desired result can be achieved by passing the value of the textbox to the ListView dataSource:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

    I made an example demonstrating this. The MVC implementation is the same as when the server operations are on, the ListView dataSource will make a new request to the server with the filter parameter:

    http://dojo.telerik.com/UKiFo

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. umer
    umer avatar
    3 posts
    Member since:
    Nov 2017

    Posted 22 Nov in reply to Stefan Link to this post

    Thanks Can you tell me how server side paging is done in Telerik MVC ListView
  4. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 22 Nov Link to this post

    Hello, Umer,

    The server-side paging can be done if the ListView is bound to a data source and its Pegeable() property is set.

    We have a demo showcasing the ListView with server-side paging:

    http://demos.telerik.com/aspnet-mvc/listview/remote-data-binding

    On the server, the paging is done automatically by the ToDataSourceResult method provided by the Kendo UI library.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top