在Kendo UI Grid Mvc上進行過濾

Question

這是我的Kendo網格發布方法，我想在kendo網格中的Test Name上執行過濾，我嘗試使用javscript，但對我沒有用

控制者

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

             }]
        });
    });

上面是我對kendo網格的jquery，我如何在網格中的測試名稱上執行過濾我嘗試使用javascript我在控制器上有一個GetTestList方法，該方法會返回一個測試列表，但從filterin的角度來看它不起作用，將不勝感激

Answer 1

如果您返回所有正在流動的數據，則可以輕松進行Loal過濾

$("#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>'

                         }]
                    });

如果需要進行服務器分頁和篩選，則應修改傳輸方式，也請閱讀操作。

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

上面的選項將在啟用它們時調用read動作，並傳遞頁面大小，過濾器Object等。 因此，您應該在讀取操作中接受這些參數，然后返回過濾后的數據或頁面數據

我會將read作為函數編寫，因此我可以管理發送給操作的參數

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