Question

我第一次尝试Kendo Grid。我在前端有几行它们处于隐藏模式。但在分页中，即使是隐藏的行也会被计算在内。我们可以排除隐藏的行。或者只对可见行进行分页。

无法在此找到更好的结果。

   $('#grid').html('');
    var grid = $j("#grid").kendoGrid({        
        dataSource: dataSource,
        columns: [
                {
                    field: "Active",
                    template: '<input type="checkbox" class="checkbox" ></input>',
                    headerTemplate: '<a class="k-link" href="#"><input type="checkbox" id="checkAll" class="k-link"/></a>',
                    width: 30,
                    sortable: false
                },
                { field: "Id", title: "Id", width: 90 },
                { field: "Name", title: "Name", width: 125 },
                { field: "Program", title: "Program", width: 125 },
                { field: "Date", title: "Month", type: "date", template: "#= kendo.toString(kendo.parseDate(Date, 'MM-dd-yyyy'), 'dd MMM yyyy') #", width: 125 },
               ,attributes: { "class": "# if(Language === 'English') { # # } else {#rowhide#} #" }}],
        pageable: {
            change: function (e) {
                var gridData = $j("#grid").data("kendoGrid")._data;
                var selectedRowCount = 0;
                $.each(gridData, function (index, currentData) {
                    var checkBoxRow = $("tr[data-uid='" + currentData.uid + "']");
                    var checkBox = checkBoxRow.find('.checkbox');
                    var isPresent = false;
                    for (var i = 0; i < selectedRows.length; i++) {
                        if (selectedRows[i] == currentData.StatementsHistoryId ) {
                            isPresent = true;
                            break;
                        }
                    }
                    if (isPresent) {
                        checkBox[0].checked = true;
                        selectedRowCount += 1;
                    }
                    else {
                        checkBox[0].checked = false;
                    }
                });
                if (selectedRowCount != 0 && gridData && gridData.length == selectedRowCount)
                    $('#checkAll').prop('checked', true);
                else
                    $('#checkAll').prop('checked', false);
            }
        },
        editable: true,
        sortable: true

    }).data("kendoGrid").table.on("change", ".checkbox", selectRecord);

这是我的代码。

Answer 1

分页基于数据源，您使用CSS隐藏它们。您应该在dataBound事件中移动隐藏条件并从数据源中删除它们。

Kendo Grid - 仅可见行的分页（排除隐藏行）

1 个答案: