{"id":2505,"date":"2014-10-21T19:58:12","date_gmt":"2014-10-21T15:58:12","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2505"},"modified":"2025-05-19T14:31:50","modified_gmt":"2025-05-19T11:31:50","slug":"grouping-data-in-dhtmlxgrid","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/grouping-data-in-dhtmlxgrid\/","title":{"rendered":"DHTMLX Little-Known Features: Grouping Data in dhtmlxGrid"},"content":{"rendered":"

There are so many features available in our JavaScript grid control<\/a> and it is so difficult to pick up the one to tell you about! In this article we would like to remind you about the possibility to group data in dhtmlxGrid.<\/p>\n

There are two option to do this: you can group data by rows<\/a> and by columns<\/a>.<\/p>\n

This time we’ll talk about grouping data by rows. By default, there is no data grouping displayed on the page.<\/p>\n

\"grid-without-grouping\"<\/p>\n

But we can easily do it by a command groupBy(col)<\/a>, where col<\/strong> is the index of a column the grid will be grouped by.<\/p>\n

To activate grouping rows in the grid:<\/p>\n

mygrid =<\/span> new<\/span> dhtmlXGridObject(<\/span>'gridbox'<\/span>)<\/span>;<\/span>
\n...
\nmygrid<\/span>.load<\/span>(<\/span>"..\/common\/grid.xml"<\/span>,<\/span>function<\/span>(<\/span>)<\/span>{<\/span>
\n    mygrid.groupBy<\/span>(<\/span>2<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/div><\/div>\n
mygrid.unGroup<\/span>(<\/span>)<\/span>;<\/span><\/div><\/div>\n

<\/br>
\nOther related features<\/strong><\/p>\n

The following are 4 methods that can be used in order to expand\/collapse a group<\/strong>:<\/p>\n

expandGroup() – expands a group with the specified key;
\n collapseGroup() – collapses a group with the specified key;
\n expandAllGroups() – expands all groups;
\n collapseAllGroups() – collapses all groups.
\n<\/br>
\nAlso based on your needs you can customize the presentation of the group summary rows<\/strong>. Two options are available for this: row mask and handler function.<\/p>\n

1) Row Mask<\/p>\n

The group contains a value that may be aggregated and shown as some kind of total. The second parameter of groupBy() command allows to define the mask used by group-line:<\/p>\n

mygrid.groupBy<\/span>(<\/span>2<\/span>,<\/span>[<\/span>"#stat_max"<\/span>,<\/span>"#title"<\/span>,<\/span>""<\/span>,<\/span>"#stat_total"<\/span>]<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"row-mask\"<\/p>\n

2) Handler Function<\/p>\n

The grid allows to redefine the text of group-row with the help of grid.customGroupFormat:<\/p>\n

    mygrid.customGroupFormat<\/span>=<\/span>function<\/span>(<\/span>text,<\/span>count)<\/span>{<\/span>
\n        return<\/span> "Grouped by "<\/span>+<\/span>text+<\/span>", there are "<\/span>+<\/span>count+<\/span>" related records"<\/span>
\n    }<\/span>;<\/span>
\n    mygrid.groupBy<\/span>(<\/span>2<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"handler-function\"<\/p>\n

Also you can use the aggregation shortcuts in your handler function as well. To use the shortcuts in the function, you should call the groupStat<\/a> method. It will return the result of aggregation for a column and will accept the following parameters:<\/p>\n

– group name;
\n– column index;
\n– name of stat operation.<\/p>\n

mygrid.customGroupFormat<\/span>=<\/span>function<\/span>(<\/span>name,<\/span>count)<\/span>{<\/span>
\n    return<\/span> name
\n    +<\/span>", Max sales="<\/span>
\n    +<\/span>grid.groupStat<\/span>(<\/span>name,<\/span>3<\/span>,<\/span>"stat_max"<\/span>)<\/span>
\n    +<\/span>", total="<\/span>
\n    +<\/span>grid.groupStat<\/span>(<\/span>name,<\/span>3<\/span>,<\/span>"stat_total"<\/span>)<\/span>;<\/span>
\n}<\/span>
\nmygrid.groupBy<\/span>(<\/span>2<\/span>)<\/span>;<\/span><\/div><\/div>\n

\"aggregate-shortcuts\"<\/p>\n

Check all the details about grouping by row<\/a> in documentation. Also have a look at the Grid demo<\/a>. Read about our JavaScript table library<\/a> and download it right now.<\/p>\n","protected":false},"excerpt":{"rendered":"

There are so many features available in our JavaScript grid control and it is so difficult to pick up the one to tell you about! In this article we …<\/p>\n","protected":false},"author":2,"featured_media":3318,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,71,1],"tags":[33,43,6,14],"class_list":["post-2505","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-posts-for-codeproject-com","category-tutorials","category-uncategorized","tag-all-posts","tag-dhtmlx-tips","tag-dhtmlxgrid","tag-tips"],"_links":{"self":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/comments?post=2505"}],"version-history":[{"count":4,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2505\/revisions"}],"predecessor-version":[{"id":13904,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/posts\/2505\/revisions\/13904"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media\/3318"}],"wp:attachment":[{"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/media?parent=2505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/categories?post=2505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dhtmlx.com\/blog\/wp-json\/wp\/v2\/tags?post=2505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

The second parameter of groupBy()<\/a> command is an array, each value of which is mapped to the related column. Check the possible values in the documentation<\/a>.<\/p>\n

\"grouped-grid\"
\n
\nIf you want to ungroup the grid, you should use unGroup()<\/a> method:<\/p>\n