Hi,
I'm trying to find a way to dynamically trim the pageSizes list of options in the case where the number of rows returned from a read is less than the pageSize originally specified. So, if I have pageSizes set to [5, 10, 15, 20, 25, 30], pageSize set to 20, but the number of rows that are returned is only 13 (because there just ends up not being 20 rows that match the read), I don't want to show the options of 20, 25, and 30.
What I've tried so far is adding a function to the Grid's dataBound event. In this dataBound function callback, I first bind a function to the dataBound event of the pageSizes kendoDropDownList object which will call setTimeout (I wasn't having any luck with using any of the kendoDropDownList methods that manipulate the dropdown without setTimeout. It seemed like the dropdown wasn't fully built out after dataBound) and pass in a function which calls the kendoDropDownList.select with the appropriate index. This will update the selected option from the default pageSizes option to what I calculate to what should be the highest available option based on the number of results returned from read. After I set this dataBound callback on the kendoDropDownList, I call setDataSource on the kendoDropDownList, passing in my calculated list of pageSizes, each in the format {text: "#", value: "#"}.
However, when I try this strategy, I see the dropdown get updated with the correct options and the correct selected option, but the first option has this weird border around it when i click on the dropdown for the first time. In addition to that, the first time the user clicks on the dropdown, and then clicks off, the Grid executes another read, which is not ideal.
I also tried this same strategy with the modification of not using the kendoDropDownList's dataBound event to call .select(), but rather just executing that (again in a setTimeout) just after I set the dataSource. I experienced the same result here as well.
Any idea on how to solve this?
*I've attached a screenshot which describes the result of my code, if this visual helps at all in regards to the weird border i was seeing
3 Answers, 1 is accepted
If the desired result is to change the available options from the DropDown depending on the data. This can be achieved using the setOptions method of the Grid. Please have in mind that if used on the dataBound or the dataBinding events, it should be call inside an if statement to prevent an infinite loop. Also, changing the Grid' options will re-recreate the Grid which will cause a new read request to the server:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-setOptions
Regarding the described custom approach, this is not a known issue. If you would like to use that approach, could you please send a runnable example reproducing the issue so I can make a suggestion best suited for it.
Regards,
Stefan
Telerik by Progress
Rank 1
So the goal is to be able to update the options in the pageSizes dropdown without making another read on the data source. I modified a dojo, so hopefully this link will take you to what I did:
http://dojo.telerik.com/ACIJI/2
It turns out my logic did work out in this dojo, so I went back to my code and saw I just had something extra in my grid logic that messed with things. You can see the changing of the dropdown if you filter down the data. I no longer have an issue here. Thank you.
I'm glad to hear that the issue is resolved.
And thank you for sharing the working implementation with the Kendo UI community.
Let me know if additional assistance is needed on this matter.
Regards,
Stefan
Telerik by Progress