Group by multiple columns in DHTMLXGrid

Hi Everyone!

Quick que: Does DHTMLX Grid(4.1) support group by multiple columns? if yes, can someone give me sample, please?

we were using some old version of DHTMLX( 3.*) and was using buildTreeGridBy(column) method for grouping. Does buildTreeGridBy(column) method available in 4.1? or have to use groupBy(column).


There is no buildTreeGridBy() merthod in dhtmlxSuite.
Also there were no such method in dhtmlxSuite 3.x
Most probably this is your custom function.

What about my first question:

Does DHTMLX Grid(4.1) support group by multiple columns? if yes, can someone give me sample, please?

********** Here is code that uses buildTreeGridBy(column) in function groupGrid0(column)*********

New Report body { background:#fff; margin:0; font-family:arial,tahoma,helvetica; font-size:12px; color:#000000; } h1 { color:#366ab3; letter-spacing:-.05em; line-height:1em; margin-left: 10px; margin-bottom: 0px; } .headerSmall { color:#999; padding-left:10px; padding-right:5px; font-size:10px; font-weight: bold; } .author { color:#000; font-size:10px; } .desc { color:#000; font-size:10px; } .bottomBorder { border-bottom-width:1px; border-bottom-style:solid; border-bottom-color: #ddd; padding-bottom: 2px; } .footer { padding-top:10px; font-size:9px; color:#666 } .gridTable { font-size: 8pt; font-family: arial,helvetica; text-align: left;width: 100%; border-collapse: collapse; border: 1px solid #aaa; } .gridTable th { font-weight: normal; white-space: nowrap; border-bottom:1px solid #aaa; border-right:1px solid #ccc; padding-left: 5px; padding-right: 5px; padding-top:1px; padding-bottom: 1px; background-image:url('header.gif'); background-repeat:repeat-x } .gridTable thead { background: #eee; } .gridTable td { padding-left: 5px; padding-right: 5px; padding-top:3px; padding-bottom: 3px; border-bottom: 1px solid #ddd; border-right: 1px solid #eee; } td.group1 { font-weight: bold; padding-left: 0px; background: #efeff5; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } td.group2 { font-weight: bold; padding-left: 10px; background: #fafbfc; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } td.group3 { font-weight: bold; padding-left: 20px; background: #fafbfc; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } td.group4 { font-weight: bold; padding-left: 30px; background: #fafbfc; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } td.group5 { font-weight: bold; padding-left: 40px; background: #fafbfc; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } td.group6 { font-weight: bold; padding-left: 50px; background: #fafbfc; border-top: 1px solid #aaa; border-bottom: 1px solid #aaa; } tr.alternateRow { background-color:#fcfcfc } tr.redRow { background-color:#ff9999 } tr.yellowRow { background-color:#ffff99 } tr.greenRow { background-color:#99ff99 } #element { padding-bottom: 10px; } #elementcaption { font-family: arial,helvetica; font-size: 1.5em; padding: 10px; color: #808020; } #enumerationfilter{ padding-left: 10px; padding-right: 10px; padding-bottom: 10px;} #tabledata { float:none; border-collapse: collapse; margin-left: 10px; margin-right: 10px; } #chartdata { margin-left: 10px; margin-right: 10px; } #filter { padding-left: 10px; padding-right: 10px; padding-bottom: 10px;} #sourcedata { font-size: 0.9em; padding-left: 10px; padding-top: 5px;} #tabledate { border-bottom: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; margin-left: 10px; margin-right: 10px; background: #efeff5; padding-left: 5px; padding-top: 2px; padding-bottom: 2px; font-weight: bold; font-size: 0.9em; } #datecollected { background: #efeff5; padding-left: 5px; padding-top: 3px; padding-bottom: 3px; font-weight: bold; font-size: 1em; } .groupButton { padding-left: 5px; padding-right: 5px; border: none; } .tableOptions { font-size: 0.9em; text-align: right; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; } .hidden { display: none; visibility: hidden; } .nothidden { display: block; }
<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">
<script src="dhtmlxcommon.js"></script>     
<script src="dhtmlxgrid.js"></script>       
<script src="dhtmlxgridcell.js"></script>   
<script src="dhtmlxgrid_filter.js"></script> 

<script src="dhtmlxgrid_srnd.js"></script>  
<script src="dhtmlxgrid_nxml.js"></script>  
<script src="dhtmlxtreegrid.js"></script>
<script src="dhtmlxtreegrid_group.js"></script>
<script src="dhtmlxtreegrid_filter.js"></script>        

<script src="swfobject.js"></script>        
<script src="downloadify.js"></script>        

<script type="text/javascript" language="JavaScript"><!--
    csvExtParser2 = dhtmlXGridObject.prototype.csvExtParser;
    csvExtParser2.str = function(data, cell, row) {
      for (var i=0; i < data.length; i++)
        data[i] = '"'+data[i].replace(this._quote, '""')+'"';
      return data.join(cell);


AUTHOR sanjay
<script type="text/javascript" language="JavaScript"><!--
// represents the grid	
var Grid0;
var Grid0FilePrefix;

// Helper variables
var Grid0OnDynXLSEventId;
var Grid0XMLFiles = new Array();
var Grid0CurXMLFiles;
var Grid0AfterLoad;
var Grid0SortLoadBegin;
var Grid0SortLoadEnd;
var Grid0CSVFiles = new Array();
Grid0CSVFiles[1] = "SBNJDEV02{3F89A90D-9427-48F4-8597-0DBB6308250D}_0_1.csv";

function Grid0LoadAllData(after) { = 'wait';
  Grid0AfterLoad = function() {
    if (Grid0OnDynXLSEventId) 
    Grid0OnDynXLSEventId = null; = 'default';

function Grid0NextLoadEvent() {
  if (Grid0CurXMLFiles && Grid0CurXMLFiles.length > 0) {
    Grid0._f_rowsBuffer = null;
    Grid0.load(Grid0CurXMLFiles.shift(), Grid0NextLoadEvent);
  } else if (Grid0AfterLoad) {
    Grid0AfterLoad = null;

// grid initialization
function docInitGrid0(){
	filename: function(){
	  return Grid0FilePrefix+".csv";
	data: function(){
	  return Grid0.serializeToCSV();
	onComplete: function(){ 
	  document.getElementById("Grid0_saveAsButton").className = "hidden";
	onCancel: function(){ 
	  document.getElementById("Grid0_saveAsButton").className = "hidden";
	onError: function(){ 
	  document.getElementById("Grid0_saveAsButton").className = "hidden";
	transparent: false,
	swf: 'downloadify.swf',
	downloadImage: 'download.png',
	width: 100,
	height: 30,
	transparent: true,
	append: false
  // initialize the first table

// grid initialization
function initGrid0(elem){
  // create new grid, assiciated with the correct div
  Grid0 = new dhtmlXGridObject('Grid0_div');
  Grid0.csvParser = Grid0.csvExtParser;
  // update the images path
  // select skin
  // allow column moves
  // Grid0.enableColumnMove(true);
  // enable resize
  // Grid0.enableAutoHeight(true);
  // performance improvement by smart rendering
  // hook up dynamic loading for large data sets
  Grid0OnDynXLSEventId = Grid0.attachEvent("onDynXLS",
        var start = Grid0FilePrefix+"_"+(Math.floor(start/10000)*10000)+".xml";
        return false;
      // any custom logic here
      if (!Grid0SortLoadBegin) {
        Grid0SortLoadBegin = true;
        Grid0LoadAllData(function() {
          Grid0SortLoadEnd = true;
        return false;
      if (!Grid0SortLoadEnd) 
        return false;
      return true;

  //To make grid non editable
  Grid0.attachEvent("onEditCell",function(stage,rId,cInd,nValue,oValue) { return false; });

  // preinitialize the grid

  // preinitialize the search input control
  filterGrid0 = false;
  Grid0FilePrefix = "SBNJDEV02{3F89A90D-9427-48F4-8597-0DBB6308250D}_0_"+elem;
  // load the data
  if (Grid0XMLFiles[elem]) {
    Grid0CurXMLFiles = Grid0XMLFiles[elem].slice(0);
  } else {
    Grid0CurXMLFiles = null;
    // called after loading initial block
    e = document.getElementById("Grid0_groupBy");
    grpCol = e.options[e.selectedIndex].value
    if (grpCol != -1) {
    } else {
  if (Grid0CSVFiles[elem]) {
    linkText = '<a href="'+Grid0CSVFiles[elem]+'">Download data as CSV</a>';
  } else {
    linkText = '';
  document.getElementById("Grid0_csvLink").innerHTML = linkText;

function updateCSVLinkGrid0(on) {
  if (on && location.href.indexOf("file:") != 0) {
	document.getElementById("Grid0_csvExport").className = "nothidden";
  } else {
    document.getElementById("Grid0_csvExport").className = "hidden";

function groupGrid0(column){
  Grid0LoadAllData(function() {
    Grid0._f_rowsBuffer = null;
    // using tree grid functionality
    if (column!=-1){
      // group by a specific column
    } else {
      // ungroup
    if (Grid0.filters)
var filterGrid0 = false;
function toggleFilterGrid0(a){
  if (filterGrid0){
    filterGrid0 = false;
  } else {
    filterGrid0 = true;
function updateFilterGrid0(a){
  if (filterGrid0){
	Grid0LoadAllData(function() {
		// attach the header
		// calling setSizes to ensure the header visually refreshes to display the new header row
		// change the text of the filtering link
		a.innerHTML="Disable Filter";
		// track the filtering enabled/disabled state
  } else {
    // remove the header
    // unfilter
    // delete any filters
    // change the text of the filtering link
    a.innerHTML="Enable Filter";
function Grid0ExportCSV(){
  Grid0LoadAllData(function(){ document.getElementById("Grid0_saveAsButton").className = "nothidden"; });
  //e = document.getElementById("Grid0_csvData");
  //e.innerHTML = Grid0.serializeToCSV();


<!-- grid header -->
<div id="Grid0_header">
	<div class="tableOptions" style="top:0">
		<!-- element selection -->
		<div style="float:left;"> 

		<!-- filtering -->
			<a href="javascript:void(0)" id="Grid0_filterlink" onClick="toggleFilterGrid0(this)">Enable Filter</a>

<!-- grid body -->
<div id="Grid0_div" style="width:100%;height:500px;"></div> 

<!-- grid footer -->
<div id="Grid0_footer">
	<div class="tableOptions" style="top:0">
	<!-- searching -->
		<div style="float:left;"> 
			Search by <select style="vertical-align:middle;" onchange="Grid0.makeSearch('searchGrid0',this.selectedIndex);">
rowGUID HOST HOSTSTATUS SequenceID DriveLetter GBDiskFreeSpace GBDiskSize MBDiskFreeSpace MBDiskSize PercentFree VolumeLabel FileSystemType DiskType ClusterSize FilePercentFragmentation FreeSpacePercentFragmentation TotalPercentFragmentation ROWKEY GBUsedSpace UsedSpacePercent for
	  <!-- expand and collapse groups -->
		<a href="javascript:void(0)" onClick="Grid0.expandAll()">Expand All Groups</a> | 
		<a href="javascript:void(0)" onClick="Grid0.collapseAll()">Collapse All Groups</a> |
		Group by <select id="Grid0_groupBy" style="vertical-align:middle;" onchange="groupGrid0(this.options[this.selectedIndex].value);">
None rowGUID HOST HOSTSTATUS SequenceID DriveLetter GBDiskFreeSpace GBDiskSize MBDiskFreeSpace MBDiskSize PercentFree VolumeLabel FileSystemType DiskType ClusterSize FilePercentFragmentation FreeSpacePercentFragmentation TotalPercentFragmentation ROWKEY GBUsedSpace UsedSpacePercent
	<div id="Grid0_csvLink"></div>
	<span id="Grid0_csvExport" class="hidden">
		<a id="Grid0_csvExportLink" href="javascript:void(0)" onClick="Grid0ExportCSV();">Export current view as CSV</a>
		<span id="Grid0_saveAsButton" class="hidden"></span>

Produced by StealthAUDIT, copyright 2001-2013


Unfortunately there is no grouping by multiply columns in the dhtmlxgrid

Is there any plans for supporting “group by multiple columns”?

Unfortunately we’re not planning to add such feature in the near future.