Selecting all items in a group

[Dr.YSG]

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)

[Iliana Dyankova]

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

[Dr.YSG]

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?

[Iliana Dyankova]

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

[Dr.YSG]

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')"));

[Iliana Dyankova]

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

[Dr.YSG]

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#"

    },

[Iliana Dyankova]

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

[Dr.YSG]

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.

[Dr.YSG]

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.

[Iliana Dyankova]

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

[Dhrupesh]

Hello Dr.YSG,

I also need the same functionality as you want, did find any way regarding selection and deselection of all the items in a group with a click to the group header and if so then can you share it?

 

[Patrick | Technical Support Engineer, Senior]

Please take a look at the following Q & A Forum post which addresses your inquiry.  Thank you!