New Grid Features in 2.710?

[Dr.YSG]

I upgraded to 710, and I see some changes to the page turners, but I have not figured out how the USER is able to do these new features:

• Implement "Refresh" button in the pager
• Allow the user to change the page size of the grid
• Ability to change the current page by typing it in a textbox

I also an very intrigued by this feature, can you explain what it is (I am already adding double click to the rows by:

• Ability to attach click handler to custom commands

$('#gridWidget tbody > tr[data-uid]').dblclick(DisplayItemDetails);

Finally, I was given this code by Telerik for collapsing all the groups and expanding them. It stopped working in 2.710, I can fix it, but is there a way that will be a safe fix for future versions?

function collapseAll() {

    $("#gridWidget").find(".k-icon.k-collapse").trigger("click");

}

 

function expandAll() {

    $("#gridWidget").find(".k-icon.k-expand").trigger("click");

}

[Atanas Korchev]

Hello,

You can find more info in our documentation: http://docs.kendoui.com/api/web/grid?#pageable.pagesize-number 

Those features can be seen online here:
http://demos.kendoui.com/web/grid/index.html 
http://demos.kendoui.com/web/grid/local-data.html 

I think you still need the doubleclick code. The feature you mention is related to custom commands which are basically buttons.

 The updated code is this:

function collapseAll() {

    $("#gridWidget").find(".k-icon.k-i-collapse").trigger("click");

}

 

function expandAll() {

    $("#gridWidget").find(".k-icon.k-i-expand").trigger("click");

}

Regards,
Atanas Korchev
the Telerik team

[Dr.YSG]

Thank you Atanas,

I have page refresh, pagesize, and jump to page working. Two small issues:

1. My sponsors insist on the ability to have large pages, and you only provide room for TWO digits of pagesize, so all the larger pagesizes are being clipped to 2EM, any way to increase the width of the "drop up" :-) menu?
   pageSizes : [10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000]
2. I thought the code below would default the initial pageSize to 1000. But I get a blank in the Page BLANK of 1, The dropdown is initialized (selected) 10 as the first value in the array, and the info is showing NaN - NaN of 498 items (there are 498 items in the grid. [If I type in a value for the page, then the control starts working normally. As do page arrow keys.

pageable: {

    pageSize: 1000,

    input: true,

    pageSizes : [10, 20, 30, 50, 100, 200, 300, 500, 1000, 2000, 3000, 5000],

    refresh: true

},

I found a new method called collapseGroup in GRID, You may want it to accept an jquery array. I am assuming the performance of this is similar to the click method you suggested (and perhaps more future proof).

function collapseAll() {

    var groups = GridData.grid.tbody.find(">tr.k-grouping-row");

    $.each(groups, function (i, group) {

        GridData.grid.collapseGroup(group);

    });

}

 

function expandAll() {

    var groups = GridData.grid.tbody.find(">tr.k-grouping-row");

    $.each(groups, function (i, group) {

        GridData.grid.expandGroup(group);

    });

}

[Atanas Korchev]

Hi, 

Up to your questions:

1. You can increase the width using CSS
   .k-pager-input input.k-textbox {
          width: 80px;
   }
2. Page size should be set at data source level:
   dataSource: { pageSize: 1000 }
3. Yes performance should be similar as the workaround would still end up calling collapseGroup. We will consider making collapse group to accept an array of jQuery selectors.

Regards,
Atanas Korchev
the Telerik team

[Dr.YSG]

Thank you,

It was not the input box that was too small for me, but the dropdown. I hope I am not breaking anything by doing this:

.k-pager-wrap .k-dropdown {
    width: 5em;
}