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).
Thanks!
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);
}
--></script>
Untitled
|
<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) {
document.body.style.cursor = 'wait';
Grid0AfterLoad = function() {
if (Grid0OnDynXLSEventId)
Grid0.detachEvent(Grid0OnDynXLSEventId);
Grid0OnDynXLSEventId = null;
document.body.style.cursor = 'default';
after();
}
Grid0NextLoadEvent();
}
function Grid0NextLoadEvent() {
if (Grid0CurXMLFiles && Grid0CurXMLFiles.length > 0) {
Grid0._f_rowsBuffer = null;
Grid0.load(Grid0CurXMLFiles.shift(), Grid0NextLoadEvent);
} else if (Grid0AfterLoad) {
Grid0AfterLoad();
Grid0AfterLoad = null;
}
}
// grid initialization
function docInitGrid0(){
Downloadify.create('Grid0_saveAsButton',{
filename: function(){
return Grid0FilePrefix+".csv";
},
data: function(){
Grid0.enableCSVHeader(true);
Grid0.csv.cell=",";
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
initGrid0(1);
}
// 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
//Grid0.setImagePath("codebase/imgs/");
// select skin
Grid0.setSkin("light");
// allow column moves
// Grid0.enableColumnMove(true);
// enable resize
// Grid0.enableAutoHeight(true);
// performance improvement by smart rendering
Grid0.enableSmartRendering(true);
// hook up dynamic loading for large data sets
Grid0OnDynXLSEventId = Grid0.attachEvent("onDynXLS",
function(start,count){
var start = Grid0FilePrefix+"_"+(Math.floor(start/10000)*10000)+".xml";
Grid0.load(start);
return false;
}
);
Grid0.attachEvent("onBeforeSorting",
function(ind,type,direction){
// any custom logic here
if (!Grid0SortLoadBegin) {
Grid0SortLoadBegin = true;
Grid0LoadAllData(function() {
Grid0SortLoadEnd = true;
Grid0.sortRows(ind);
Grid0.setSortImgState(true,ind);
});
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
Grid0.init();
// preinitialize the search input control
Grid0.makeSearch('searchGrid0',0);
filterGrid0 = false;
Grid0FilePrefix = "SBNJDEV02{3F89A90D-9427-48F4-8597-0DBB6308250D}_0_"+elem;
// load the data
Grid0.clearAll(true);
if (Grid0XMLFiles[elem]) {
Grid0CurXMLFiles = Grid0XMLFiles[elem].slice(0);
} else {
Grid0CurXMLFiles = null;
}
Grid0.loadXML(Grid0FilePrefix+".xml",function(){
// called after loading initial block
updateFilterGrid0(document.getElementById("Grid0_filterlink"));
e = document.getElementById("Grid0_groupBy");
grpCol = e.options[e.selectedIndex].value
if (grpCol != -1) {
groupGrid0(grpCol);
} else {
updateCSVLinkGrid0(true);
}
});
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.filterBy(0,"");
Grid0._f_rowsBuffer = null;
// using tree grid functionality
if (column!=-1){
updateCSVLinkGrid0(false);
// group by a specific column
Grid0.buildTreeGridBy(column);
} else {
// ungroup
Grid0.buildGrid();
updateCSVLinkGrid0(true);
}
if (Grid0.filters)
Grid0.filterByAll();
});
}
var filterGrid0 = false;
function toggleFilterGrid0(a){
if (filterGrid0){
filterGrid0 = false;
} else {
filterGrid0 = true;
}
updateFilterGrid0(a);
}
function updateFilterGrid0(a){
if (filterGrid0){
Grid0LoadAllData(function() {
// attach the header
Grid0.attachHeader("#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#numeric_filter,#numeric_filter,#numeric_filter,#numeric_filter,#numeric_filter,#text_filter,#text_filter,#text_filter,#numeric_filter,#numeric_filter,#numeric_filter,#numeric_filter,#text_filter,#numeric_filter,#numeric_filter");
// calling setSizes to ensure the header visually refreshes to display the new header row
Grid0.setSizes();
// change the text of the filtering link
a.innerHTML="Disable Filter";
// track the filtering enabled/disabled state
});
} else {
// remove the header
Grid0.detachHeader(1);
// unfilter
Grid0.filterBy(0,"");
// delete any filters
Grid0.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");
//Grid0.csv.cell=",";
//e.innerHTML = Grid0.serializeToCSV();
}
//–>
<!-- grid header -->
<div id="Grid0_header">
<div class="tableOptions" style="top:0">
<!-- element selection -->
<div style="float:left;">
</div>
<!-- filtering -->
<a href="javascript:void(0)" id="Grid0_filterlink" onClick="toggleFilterGrid0(this)">Enable Filter</a>
</div>
</div>
<!-- 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);">
</div>
<!-- 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);">
</div>
<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>
</span>
</div>
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.