Kendo UI Grid Mvc 上的过滤

Question

这是我的剑道网格发布方法我想在剑道网格中对测试名称执行过滤我曾尝试使用 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>'

             }]
        });
    });

上面是我的剑道网格 jquery 如何在网格中执行过滤测试名称我尝试使用 javascript 我在控制器上有一个 GetTestList 方法，它返回一个测试列表，但从过滤器的角度来看它不起作用任何帮助将不胜感激

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

当它们被启用并传递页面大小、过滤对象等时，上面将调用读取操作。因此您应该在读取操作中接受这些参数并返回过滤后的数据或页面数据

我会将读取写入一个函数，这样我就可以管理发送到操作的参数

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