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 one single 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 are on the next 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%'> </th>
<### THERE ARE MORE COLUMNS HERE AND THOSE HAVE CORRESPONDING COLUMNS IN SETTINGS ###>
</tr>
</thead>
</table>
Here is the script:
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);
.CSHTML File:
<table style="width: 100%;" class='list-entity' id='inboxItems'>
<thead>
<tr>
<th data-field='Actions' class="iconCell" style='width: 1%'> </th>
<### THERE ARE MORE COLUMNS HERE AND THOSE HAVE CORRESPONDING COLUMNS IN SETTINGS ###>
</tr>
</thead>
</table>
Here is the script:
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);