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

I have select all checkbox on a kendo Grid. This check box only select first page and when you move to page to it is not selected. All i want is to use 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 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();
}