How to disable paging on a kendogrid

Question

We are using a Kendo grid. I created a table in my cshtml file and in my js file, I bind it to the data. My problem here is that the grid paging does not go away. I need all the items on the page since we don't expect much load. I tried removing the pageable attribute and I tried marking pageable: false. But I still see that the grid displays only 10 items in one page and gives the paging.

By using this.pager.element.hide(), we can hide the pager but that does not solve the purpose since the pager is hidden but the paging is still being done. So, now, the elements starting 11th element oare on th enext page but we wont be able to navigate to it.

Here is the existing code. I have removed the irrelevant columns in the table. .CSHTML File:

 <table style="width: 100%;" class='list-entity' id='inboxItems'>
                <thead>
                    <tr>
                        <th data-field='Actions' class="iconCell" style='width: 1%'>&nbsp;</th>
                       <### THERE ARE MORE COLUMNS HERE AND THOSE HAVE CORRESPONDING COLUMNS IN SETTINGS ###>      
                    </tr>
                </thead>
            </table>

JS File:

    var settings = {
        kendosettings: {
            dataSource: {
                data: requestItemsList,
                schema: {
                    // required if get method will be used
                    model: {
                        id: "StepApproverKey"
                    }
                },
                group: [
                    {
                        field: "GroupByAttribute",
                        dir: "asc",
                        aggregates:
                        [
                            { field: "GroupByAttribute", aggregate: "count" }]
                    }]
            },
            sort: { field: "SubmittedOn", dir: "desc" },
            sortable: true,
            pageable: false,
            scrollable: false,
            columns: [
                {
                    field: "Actions",
                    title: "Actions",
                    template: kendo.template($("#inboxrowEditTemplate").html())
                },
                { field: "StepApproverKey", hidden: true },
                {
                    field: "GroupByAttribute",
                    hidden: true,
                    groupHeaderTemplate: kendo.template($("#inboxrowgroupHeaderTemplate").html()),
                    headerAttributes: {
                        style: "width: 100%"
                    }
                }
            ],
            selectable: "row",
        }
    };
    $('#inboxItems').pdi().displaygrid(settings);

Answer 1

I posted this on Kendo forum and it seems the only way we can resolve it is to dynamically set the page size of the grid and then hide the pager. In our case, since we want all the items on single load, we set it to the length of the list being sent to the client. Below is the code I used and it's working.

var inboxGrid = $('#inboxItems').data("kendoGrid");
inboxGrid.dataSource.pageSize(<NUMBER OF ITEMS IN THE LIST>);
inboxGrid.refresh();
inboxGrid.bind("dataBound", function () {
                this.pager.element.hide();
        });

Answer 2

Using:

inboxGrid.bind("dataBound", function () {
            this.pager.element.hide();
    });

did not work for me. Maybe because I'm using Razor and MVC to display the grid, or perhaps because we're using Bootstrap for the CSS, I don't know. But so I did this, instead:

var inboxGrid = $('#inboxItems').data("kendoGrid");
inboxGrid.dataSource.pageSize(inboxGrid.dataSource.total());
inboxGrid.refresh();
$('[class*="k-pager-nav"]').hide();