How to select all rows from Kendo grid using checkbox on header

Question

I have select all checkbox on a Kendo Grid. This checkbox only selects first page and when you move to page to it is not selected. All I want is to use the checkbox to select all the rows from the grid. If the rows returned on the grid are 500, all of them must be selected by one click which is the checkbox. I have tried a lot of examples from but not getting it to work on MVC Razor.

I have tried many examples like this 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

Why don't you try this (an accordion example but you can make it relate to you):

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