New Grid Features in 2.710?

5 posts, 1 answers
  1. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 13 Jul 2012 Link to this post

    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");
    }
  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 16 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 16 Jul 2012 Link to this post

    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);
        });
    }
  5. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 17 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 17 Jul 2012 Link to this post

    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;
    }
Back to Top
Kendo UI is VS 2017 Ready