Selecting all items in a group

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

    Posted 17 Apr 2012 Link to this post

    I have a grid with groupable: true.

    Some of the groups are quite large, so I would like to be able to have the user able to select the entire group (whether it is open or collapsed).

    I would also like to show the count of the items in the group header (for each group)

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Apr 2012 Link to this post

    Hello Steven,

    Regarding your questions:
    • Such functionality is not supported out of the box. You could achieve it using a custom logic and GroupHeaderTemplate
    • We have an online demo which illustrates the same functionality. It is available here

     

    Kind regards,
    Iliana Nikolova
    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 18 Apr 2012 Link to this post

    Thank you Ilana,

    Further searching shows that you plan to add the header text to groups in a future version:
    http://kendo.uservoice.com/forums/127393-kendo-ui-feedback/suggestions/2389907-grid

    But I am stil looking for a pointer on how to give the user a way  to select all the items in a group with a click to the group header (do I have to put a  button in the header group header template? ) and if so what should the onlclick logic look like to select just that groups items?

  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 23 Apr 2012 Link to this post

    Hi Steven,

    Actually, with the our latest official release the GroupHeaderTemplate functionality in Kendo UI Grid is already available. 

    Regarding "a pointer, which gives the user a way  to select all the items in a group" - it depends on the custom logic you are planning to implement. For example, I created a sample jsFiddle, which illustrates the needed functionality with a button in the GroupHeaderTemplate

    Regards,
    Iliana Nikolova
    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 23 Apr 2012 Link to this post

    Ilana, this is excellent.

    I would strongly suggest including this example as a link in the documentation for both aggregates and for how to do headings. It de-cyphers both of these systems with one example.

    Can I ask a follow up question: I notice from your example that you place aggragates both in the grid.datasource.group object as well as in the grid.datasource object. Why?

    Especially since I have another example from Alexander@Telerik where what I wanted was aggragate information in the Grid Group HeaderTemplates and he showed me to put them in the grid.columns object (as shown below).

    Suggestion for Telerik: write up a "TECH NOTE" that explains the meaning of the different locations of where one puts aggragate and what it does in each place. And if I I have multiple aggragates (sum, count, etc) in the column below:

    columns:[
        {
            field:"creator",
            width:220,
            aggregates:"count",
            groupHeaderTemplate:"Type: #= value # Count: #= count #"
        },

    Side note:

    From the Kendo documentation I never learned about the .closest and .nextUntil methods. These are both new constructs for me, since I come from the Silverlight/Flash/C# world, not JQUERY.

    Do you recommend becoming an expert in JQuery before learning Kendo? or is it just that I am doing non-standard things?


    var currentGroupRow = $(this).closest(".k-grouping-row");
    // Select the items in the current group
    grid.select(currentGroupRow.nextUntil(".k-grouping-row", ":not('.k-group-footer')"));
  7. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Apr 2012 Link to this post

    Hi Steven,

    To your questions: 
    • Thank you for the suggestion, we will consider it for one of the future updates;
    • The aggregates in the dataSource - this is initial grouping, i.e. the data is grouped when the Kendo UI Grid is initialized and this continues until the groups are removed. The aggregates in the columns of the grid - this is dynamic grouping, i.e. when the columns are grouped by drag and drop;
    • This idea is very good and we will definitely consider it; 
    • The .closest() and .nextUntil() do not exist in the Kendo UI online documentation, because these are jQuery methods. I used them in my example, but I noticed this is a custom code. Also, more detailed information about jQuery is available here;
    • In order to use Kendo UI it is not necessary to be an expert in jQuery, but because Kendo UI is based on jQuery I think it is useful to have at least a basic idea. This will help you to do things easier.

     

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 25 Apr 2012 Link to this post

    So if I have a Grid Widget that has groupable: true

    and I columns definition like:

            columns:[
                {
                    field:"size",
                    width:220,
                    aggregates:"count",
                    groupHeaderTemplate:"Type: #= value # Count: #= count #"
                }

    Can I extend the groupHeaderTemplate to add sum? Something like what I am showing below?

    columns:[
        {
            field:"size",
            width:220,
            aggregates: ["count", "sum"]
            groupHeaderTemplate:"Type: #= value # Count: #= count #, Sum: #= sum#"
        },
  9. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 27 Apr 2012 Link to this post

    Hello,

    Yes, this is a completely valid scenario - you could check this jsFiddle example, which illustrates the same functionality.

    I hope this helps.
     

    Regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 27 Apr 2012 Link to this post

    Great example,

    But it shows a "bug" that I have been having in some of my code.

    The Grid in the JSFIDDLE (with FireFox 12) is coming out as one row in height.

    I tried styling your HTML

        <div id="grid" style="height:100%;"></div>

    but that did not help.

    The only way I can actually see your grid is by using a hard number for the height.

    Are you seeing this the JSFIDDLE?

        <div id="grid" style="height:400px;"></div>

    In Internet Explorer V9, 64 bit, The grid is full height.


  11. Dr.YSG
    Dr.YSG avatar
    210 posts
    Member since:
    Dec 2009

    Posted 30 Apr 2012 Link to this post

    And one question directly related to your JSFiddle example:

    When I group it by type, I get the count in the groupHeaderTemplate,
    and when I group it by size, I get count, and sum in the groupHeaderTemplate.

    What would I have to do to be able to group by  type, and see both count and the SUM of the SIZES in the groupHeaderTemplate (seems like a logical thing to want to display. I.e. I want statistics on what the total byte size of all JPG, PNG, etc. and displayed in the header of each group by type.


  12. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 02 May 2012 Link to this post

    Hi,

    Regarding your questions:
    • Thank you for drawing our attention to the issue with the Kendo UI Grid height in Mozzila Firefox 12. We have investigated it and the fix will be available in our next internal build. As a sign of gratitude I updated your points;
    • The described functionality is not supported in Kendo UI Grid - in the groupHeaderTemplate you could visualize only the aggregates of the current grouped column, but not aggregates of other columns.  
       


    Greetings,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready