I was looking at the forum, but I didn't find any message related to this. I would like to allow users to change the number of rows displayed in the grid for example 15, 30, 50. So far, I see that the pageSize property is specified when initializing the grid. Also, I havent' see any example where the number of rows can be changed dinamically, for example a drop down list with the number of rows next to the pagination numbers, or a text box when the number of pages can be entered.
Thanks for your help
2 Answers, 1 is accepted
You can change the Kendo Grid page size by using the widget's datasource API:
http://www.kendoui.com/documentation/framework/datasource/methods.aspx
In other words, set the datasource's page size like below and then rebind the Grid:
var
grid = $(
"#GridID"
).data(
"kendoGrid"
);
grid.dataSource.pageSize(20);
grid.refresh();
The Grid itself does not provide a dropdown for doing the above automatically, but you can use a Kendo DropDownList widget inside a Grid toolbar template, as shown in this demo:
http://demos.kendoui.com/web/grid/toolbar-template.html
Alternatively, you can even inject a <select> or <input> element inside the Grid pager area (after the Grid has been created) and initialize a DropDownList (ComboBox) widget there. Afterwards, use its change event.
http://demos.kendoui.com/web/dropdownlist/events.html
Kind regards,
Dimo
the Telerik team
I tried your suggestion:
var
grid = $(
"#GridID"
).data(
"kendoGrid"
);
grid.dataSource.pageSize(2);
grid.refresh();
but after setting the page size to 2 in case of a grid containing 11 elements, I get the following:
At the first page there are 2 elements, so its correct.
At the second page there are 9 elements
At the third page there are 7 elements
and so on, decrement by 2 every page until the end.
What could couse these duplications?
I use a grid initialized from local json data.
If I set the dataSource pageSize to 2 at the Grid initialization, there is no problem.
I cannot reproduce such an issue. Can you provide a full demo?
Kind regards,
Dimo
the Telerik team
http://develic.com/kendoGrid/list.html
try to set the page size with the dropDown, and check the pages
The page size that you are setting, should be a number, not a string.
Regards,
Dimo
the Telerik team
Regards
Is this something that can be worked into the grid pager as a feature?
Thanks,
Joel
I am asking this question because there is no grid_onload event like Telerik grid where this can be done pretty easily.
Please advise.
There is not much need of an OnLoad event. You can simply execute or call the required code after the Grid Javascript initialization statement.
Regards,
Dimo
the Telerik team
Can you please show a small sample to implement this.
Actually I want to implement a common function to set the pagesize of the grid at start so that all other grids can call that same function; which I used to do very easily with telerik grid's
.Events(events => events.onLoad("Grid_onLoad"))
where Grid_Load is a javascript function to set the grid pagesize and all other grids used to call that.
Regards.
You can use the code I have provided in my first post in this thread, and enclose it in a function that will be called with a parameter after each Grid Javascript initialization statement. The parameter can be the Grid's ID or DOM element.
Regards,
Dimo
the Telerik team
Here is how I designed my grid
@{
Html.Kendo().Grid<......>()
.Name("TestKendoGrid")
.HtmlAttributes(new { style = "width: 100%;" })
.Events(events => events.DataBound("Grid_onDataBound"))
.Events(events => events.Change("Grid_OnChange"))
.AutoBind(false)
.Columns(col =>
{
col.Bound("NP_PARAM_UID").Hidden();
col.Bound("PROCESS_GRP").Title("Process Group").HeaderHtmlAttributes(new { style = "text-align:center;" });
col.Bound("PARAM_NAME").Title("Parameter Name").HeaderHtmlAttributes(new { style = "text-align:center;" });
col.Bound("PARAM_VALUE").Title("Parameter Value").HeaderHtmlAttributes(new { style = "text-align:center;" });
col.Bound("EXTERNAL_ID").Title("Table Name").HeaderHtmlAttributes(new { style = "text-align:center;" });
col.Bound("EXTERNAL_FK").Title("Key Value").HeaderHtmlAttributes(new { style = "text-align:center;" });
col.Bound("DEL_FLG").Hidden();
})
.DataSource(dataBinding =>
{
dataBinding.Ajax().Read(read => read.Action("SrchDataIniParam", "Admin",
new
{
area = "Admin",
strParamGrp = ViewBag.Param1
}))
.ServerOperation(false);
})
.Resizable(resizing => resizing.Columns(true))
.Selectable()
.Reorderable(reorder => reorder.Columns(true))
.Pageable()
.Sortable()
.Filterable()
.Render();
}
Now where to put that initialization code?. Sorry if I am wrong in my understanding as i am new to Kendo UI Grid
Greetings,
Dimo
the Telerik team
I have used it the way you said
<
script
type
=
"text/javascript"
language
=
"javascript"
>
Grid_PageSize('MyKendoGrid');
</
script
>
And in the javascript function did the paging as below
Grid_onLoad =
function
(objGrid) {
var
grid = $(
"#"
+ objGrid).data(
"kendoGrid"
);
if
(grid != undefined)
grid.dataSource.pageSize(parseInt(GridPageSize));
//GridPageSize is a variable holding the page size
}
That works fine but the function cause the grid to rebind again. So now the grid is binding twice and making two server round trips.
Please advise.
Yes, surely the Grid will rebind when changing its page size. I don't imagine what else should happen, right?
I strongly recommend changing your implementation, so that setting the page size initially after data binding is not needed. If the desired page size is not known on the server, a possible option is to use the pure Kendo UI Grid, which is initialized via Javascript on the client. In this way you will be able to know what page size to set directly in the widget's initial configuration.
Regards,
Dimo
the Telerik team
i use to inject the select on the kendo grid wrapper next to the original select.
but how can i set the change event on my select for doing the same action to a original select?
Thank you
You can use the Grid datasource API and namely, the page method to navigate to another page.
gridObject.dataSource.page(5);
Greetings,
Dimo
the Telerik team
[quote]Joel said:Dimo,
Is this something that can be worked into the grid pager as a feature?
Thanks,
Joel[/quote]
I didn't see a response to your comment, but I second that. I don't know why such a standard functionality of any grid would be omitted and left to each developer to custom code it. Especially because you could easily convert that 1-20 of 22 text into a slick rows per page selector.
(yes i realize this is an old thread, but amazingly, still holds true for the latest kendoui)
The original topic in this thead was about the ability to change the page size on the fly, which is now supported out-of-the-box:
http://demos.telerik.com/kendo-ui/grid/index
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.pageSizes
In case you are referring to something else, please clarify.
Regards,
Dimo
Telerik
The original topic in this thead was about the ability to change the page size on the fly, which is now supported out-of-the-box:
http://demos.telerik.com/kendo-ui/grid/index
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pageable.pageSizes
In case you are referring to something else, please clarify.
Regards,
Dimo
Telerik
[/quote]
AHA! Great! I was specifically referring to a built in UI control for end-user ability to alter page size. I've used paging but didn't notice the switch to enable the UI for rows per page. Well good to have a conclusion here on this old thread then so nobody is misguided when they search "rows per page kendo ui grid" ;)
Thanks Dimo!
Hi Dimo,
Currently I'm facing a problem when I change the page size while scrolling the grid, the grid datasource rebind again.
I wish to retain the existing grid data, because of user will have changes in textbox inside the detail template.
Do you know any method when page size changed, it just append another additional row at the bottom of the grid?
Thanks.
Regards,
Su Pei
By design, when a Kendo UI widget's dataSource changes (it is rebound, sorted, paged, fitlered, etc), the widget is rebound as well and all its data items are re-rendered. This behavior occurs also if the pushInsert method is used:
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-pushInsert
From this point of view, I am afraid adding data items while preserving the current ones is not supported. What I can suggest is to prevent the user from changing the page size before saving all pending changes:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/grid-prevent-navigation-when-in-editing-mode
Regards,
Dimo
Telerik by Progress
.Pageable(x => x.PageSizes(new int[] { 10, 20, 50, 100 }))
Thanks!
ARIF
Hi, Vishal,
Could you please provide me with a bit more information(or a code snippet) regarding the issue?
I tested the pageSizes property in the documentation here:
https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/pageable.pagesizes
And it seems to be working as expected.
pageable: {
pageSizes: [2, 3, 4, "all"],
numeric: false
}
Best Regards,
Georgi
Hello, Vishal,
Thank you for clarifying the requirement.
In this case, you'll have to save the pageSize selection separately and then restore it back after calling setOptions.
// Save the value from the pageSize dropdownlist.
localStorage["kendo-grid-page-size"] = grid.pager.element.find(".k-pager-sizes select").data("kendoDropDownList").value();
// Call setOptions to restore the options.
grid.setOptions(JSON.parse(options));
// Set the pageSize back to the dataSource.
if (!isNaN(pageSize)) {
grid.dataSource.pageSize(pageSize);
} else if (pageSize.toLowerCase() == "all") {
grid.dataSource._pageSize = undefined;
grid.dataSource._take = undefined;
grid.dataSource._skip = 0;
}
Dojo
https://dojo.telerik.com/@gdenchev/AlUnEpEl
Best Regards,
Georgi