Filtering on Kendo UI Grid Mvc

Question

This is My Kendo Grid Post Method i want to perform filtring on Test Name in kendo grid i have tried using javscript but it didnt worked for me

Controller

  [HttpPost]
    public ActionResult TestNotification(DataSourceRequest command)
    {
        EAssessmentNew.BAL.StudentBal studBal = new EAssessmentNew.BAL.StudentBal();
        int studentId = Convert.ToInt32(studBal.getStudentId(Session["sname"].ToString()));

        PageList<Test> TestDetails = studBal.testDetails(studentId, command.Page - 1, command.PageSize);

        var gridModel = new DataSourceResult
        {
            Data = TestDetails.Select(x =>
            {
                var TestModel = new Test();
                TestModel.Test_Id = x.Test_Id;
                TestModel.Test_Name = x.Test_Name;
                TestModel.Test_Date = x.Test_Date;
                TestModel.Start_Time = x.Start_Time;
                TestModel.End_Time = x.End_Time;
                return TestModel;
            }),
            Total = TestDetails.TotalCount,
        };
        return Json(gridModel);


    }

Kendo JQuery On View

<script>
    $(document).ready(function () {
        $("#test-grid").kendoGrid({
            dataSource: {
                type: "json",
                transport: {
                    read: {
                        url: "@Html.Raw(Url.Action("TestNotification", "Student"))",
                        type: "POST",
                        dataType: "json",
                        data: '',

                    }
                },
                schema: {
                    data: "Data",
                    total: "Total",
                    errors: "Errors"
                },
                error: function (e) {
                    display_kendoui_grid_error(e);
                    this.cancelChanges();
                },
                pageSize: 2,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            },
            pageable: {
                refresh: true,
                pageSizes: [10, 20, 30]
            },
            editable: {
                confirmation: false,
                mode: "inline"
            },
            scrollable: false,
            columns: [
                {
                    field: "Test_Name",
                    title: "Name",
                    filterable: true,

                    width: 10

                   // template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
                },
                {
                    field: "Test_Date",
                    title: "Test Date",

                    // template: '#= kendo.toString(kendo.parseDate(Test_Date, "dd/MM/yyyy" )) #',
                    template:"#= kendo.toString(new Date(parseInt(Test_Date.substr(6))),'dd-MM-yyyy ')#",
                    width: 10
                },
                {
                    field: "Start_Time",
                    title: "Start Time",
                    width: 10,
                   // template: '<a onClick="return callConfirmationbox();" title="delete" href="/Admin/DeleteParentCategory?categoryId=#=CategoryId#"><span class="k-icon k-delete"></span></a>'

                },
                {
                    field: "End_Time",
                    title: "End Time",
                    width: 10,
                   // template: '<a title="Edit" href="/Admin/ViewCategoryDetails?categoryId=#=CategoryId#&categoryName=#=CategoryName#"><span class="k-icon k-edit"></span></a>'
                },
             {
                 field: "Test_Id",
                 title: "Action",
                 width: 10,
                 template: '<a  title="Apply" href="/Student/ApplyForTest?TestId=#=Test_Id#">Click To Apply</a>'

             }]
        });
    });

Above is my jquery for kendo grid how can i perform filtering on Test Name in grid i have tried using javascript i have a GetTestList method on controller which return me a list of test but its not working from filterin point of view any help will be appreciated

Answer 1

You can do Loal filtering easily if you are returning all the data doing flowing

$("#test-grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: {
                                    url: "@Html.Raw(Url.Action("TestNotification", "Student"))",
                                    type: "POST",
                                    dataType: "json",
                                    data: '',
                                }
                            },
                            schema: {
                                data: "Data",
                                total: "Total",
                                errors: "Errors"
                            },
                            error: function (e) {
                                display_kendoui_grid_error(e);
                                this.cancelChanges();
                            },
                            pageSize: 2,
                            //serverPaging: true,
                            //serverFiltering: true,
                            //serverSorting: true
                        },
                        pageable: {
                            refresh: true,
                            pageSizes: [10, 20, 30]
                        },
                        editable: {
                            confirmation: false,
                            mode: "inline"
                        },
                        scrollable: false,
                        filterable: true,
                        sortable: true,
                        columns: [
                            {
                                field: "Test_Name",
                                title: "Name",
                                filterable: true,
                                width: 10
                            },
                            {
                                field: "Test_Date",
                                title: "Test Date",
                                width: 10
                            },
                            {
                                field: "Start_Time",
                                title: "Start Time",
                                width: 10,

                            },
                            {
                                field: "End_Time",
                                title: "End Time",
                                width: 10,
                            },
                         {
                             field: "Test_Id",
                             title: "Action",
                             width: 10,
                             template: '<a  title="Apply" href="/Student/ApplyForTest?TestId=#=Test_Id#">Click To Apply</a>'

                         }]
                    });

If you need to Do Server Paging and Filtering you should modify your transport read also your action .

                                //serverPaging: true,
                                //serverFiltering: true,
                                //serverSorting: true

Above will call the read action when they are enabled and pass the page size , filter Object etc.. . so you should accept these paramters in your read action and return the filtered data or page data

i would write the read as a function so I can manage the parameters send to the action

transport: {
            read: function (options) {
// the option will have pagesize (eg:option.pagesize ) when paging
 // the option will have filter OBJ (eg:option.filter[]) when filtering 
                $.ajax({
                    url: "@Html.Raw(Url.Action("TestNotification", "Student"))",,
                    dataType: "json",
                    data: {pageSize:option.pagesize }, // send the data accordingly (not sure exact syntax but its available in the option parameter)
                    cache: false,
                    success: function (result) {
                        options.success(result);
                    },
                    error: function (result) {
                        options.error(result);
                    }
                });
            },
}