如何使用标题上的复选框从 Kendo 网格中选择所有行

Question

我选择了剑道网格上的所有复选框。此复选框仅选择第一页，当您移动到页面时，它不会被选中。我想要的只是使用复选框从网格中选择所有行。如果网格上返回的行数为 500，则必须一键选中所有行，即复选框。我已经尝试了很多示例，但没有让它在 MVC Razor 上运行。

我已经尝试过很多这样的例子Example

@(Html.Kendo().Grid<Model>()
                .Name("Grid")
                .ToolBar(toolBar => toolBar.Template("<strong><a className='k-grid-toolbar-create' onClick='goToFunctionDownloadAllIpossFile()' href ='" + Url.Action("GetFileFromSession", "ConsolidatedPOSS", "https") + "?SeletectOrders=#= SeletectOrders#'" + "><button type='button' class='btn btn-primary'> Download Selected Orders </button></a></strong>"))
                .Columns(columns =>
                {
                columns.Bound(x => x.ordernumber).Title("Order Number");
                 columns.Template(@<text></text>).ClientTemplate("<input type='checkbox' id='chkId' #= selected ? checked='checked':'' # class='checkbox' />")
                .HeaderTemplate("<input type='checkbox' class='checkbox1' id='checkAll1' onclick='checkAll(this)'/>").Width(50);
                })
                .Pageable(pageable => pageable
                //.Refresh(true)
                .PageSizes(true)
                .ButtonCount(5))
                .Scrollable()
                .Filterable()
                .Sortable()
                .Resizable(resize => resize.Columns(true))
                .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(10)
                .ServerOperation(false)
                .Read(read => read.Action("Action", "Controller"))))

Javascript

function checkAll(ele) {
    alert();
    var state = $(ele).is(':checked');
    grid = $('#Grid').data('kendoGrid');

    datasource = grid.dataSource.view();
    //dataSource.pageSize(dataSource.total());
    $.each(grid.dataSource.view(), function ()
    {
        if (this['selected'] != state)
        {
            this.dirty = true;
        }  
        this['selected'] = state;
    });
    grid.refresh();
}

Answer 1

你为什么不试试这个（手风琴的例子，但你可以让它与你相关）：

 columns:[
        {
            field: "Checkbox", filterable: false, title: "<input type=\'checkbox\' class='\selectAll\' data-bind='checked:Checkbox' style='margin-left:3px;' />", width: "35px",
            template: '<input type="checkbox" style="margin-left: 4px;" class="checkone" # if (!CheckboxEnabled){ # disabled # } # # if (Checkbox){ # checked # } # />', sortable: false
        },
 ],

// set child checkbox values from parent checkbox
var setChildCheckboxes = function (parent) {
    var childCheckboxes = parent.closest('fieldset').find('.accordion-inner :checkbox');
    var activeChildCheckboxes = parent.closest('fieldset').find('.accordion-inner :checkbox:not(:disabled)');
    if (childCheckboxes.length > 0) {
        if (activeChildCheckboxes.length > 0) {
            var checkedValue = (parent.attr("checked") == "checked") ? true : false;
            activeChildCheckboxes.prop('checked', checkedValue);
        } else {
            // Uncheck and disable parent checkbox if there are no active child checkboxes
            parent.attr('checked', false);
            parent.attr('disabled', true);
        }
    }
};

// select all checkboxes
$('.checkall').on('click', function () {
    setChildCheckboxes($(this));
    // Enable/disable the action buttons
    if ($.find(':checkbox:checked').length > 0) {
        $("#push-button").attr("disabled", false);
    } else {
        $("#push-button").attr("disabled", true);
    }
});