Dynamic Grid Headers using JSON

Suite and Optimus Suite 5
#1

Hi there,

I am currently using your grid like so:

var hourlyNomsGrid = new dhtmlXGridObject('hourlyDashboardNoms');
		hourlyNomsGrid.setImagePath("codebase/imgs/");
		hourlyNomsGrid.setHeader(["Gas Hour", "Direction", "Interruptible","Facility","TransferPoint","#cspan","#cspan","#cspan"]);
		hourlyNomsGrid.attachHeader(["#rspan", "#rspan", "Energy", "Energy", "Direction", "Energy", "Direction", "Energy"]);
		hourlyNomsGrid.setInitWidthsP("10, 10,10,10,10,10,10,10");
		hourlyNomsGrid.setColAlign("left,left,left,left,left,left,left,left");
		hourlyNomsGrid.init();
		hourlyNomsGrid.setSkin("dhx_skyblue");
		hourlyNomsGrid.load("secure/summary/getHourlyData?gasDay="+dateString+"&storageUserId="+storageUserId, "json");

But now I have a requirement to make the headers dynamic.
Can I achieve this using JSON - or is it only possible to get data using JSON and if so, how do I make the headers dynamic?

Thanks for any help
Gillian

#2

doesn’t this help?

docs.dhtmlx.com/doku.php?id=dhtm … erver_side

#3

That appears to be in php, I am using Java backend, more specifically I am using the grid withing the Spring MVC Framework…

Will the same apply to Java as PHP? Do I require the use of a Connector?
I was honestly hoping that I could define the headers in the JSON just like you can in XML?

#4

Also I am using Hibernate as my persistence framework, so would not be wanting to connect to a DB directly…I do want to be able to use this grid within my framework structure…

Thanks!
Gillian

#5

But now I have a requirement to make the headers dynamic.
Can you please explain a little more, what do you mean under dynamic header?
You can load grid configuration from xml
You can add or delete column on the fly
You can change grid’s label, add\delete one more header row after grid initialization
What do you need from this?

Can I achieve this using JSON - or is it only possible to get data using JSON
It not possible to define grid structure in JSON format. It possible to do only with XML format

#6

But now I have a requirement to make the headers dynamic.
Can you please explain a little more, what do you mean under dynamic header?

Sure - sorry! I have a grid which at the moment has only 3 headings in it, one per each User. Now the system is as such that there will never be more than 10 users, but there will only be 3 to begin with. I would like to be able to have a grid which will be flexible enough to create a table with 3 columns or 10 columns - dependant on the number of active users in the system - with each Header containing the name of that user.

Can I achieve this using JSON - or is it only possible to get data using JSON
It not possible to define grid structure in JSON format. It possible to do only with XML format

In that case, can I mix JSON and XML - in 2 calls perhaps, or do I have to now send all my JSON over in XML instead? Or do I have another option?
When you say add or remove columns on the fly - this may be an option… Just thought it would be handy to have the headers and information in the same JSON so that I could create it all at once.

Thnaks,
Gillian

#7

The best way for you is to load grid configuration from XML:

[code]
Sales
Book Title
Author
…

[/code] You can generate as many columns, as you need. Please find more information here [docs.dhtmlx.com/doku.php?id=dhtm ... n_from_xml](http://docs.dhtmlx.com/doku.php?id=dhtmlxgrid:configuration_from_xml)

You can mix loading grid from XML and JSON formats:

grid.load(url_xml,function(){//load grid configuration grid.load(url_json,"json");//load grd data })

#8

Thanks Olga! The mixing of XML and JSON is exactly the kind of thing I was looking for, I will give this a go and hopefully this will be me sorted out.

Thanks again,
Gillian

#9

Hi,

I’ve tried the approach and it seemed to work as long as the treegrid has no “tree” columm (Which we do. When the tree column was introduced the table stopped being populated. Just to make clear, the XML call returns now rows but it does return the header structure. The JSON call returns the data for the tree grid. This is a simple 5 columns (Including the tree column) and 10 rows.
When the JSON populating of the gird kicks in I get the following error:

Uncaught TypeError: Cannot set property 'buff' of undefined   (dhtmlxtreegrid.js:599Uncaught TypeError: Cannot set property 'buff' of undefined)

The code snippet is:

<script>
	colCount = 4;
	rowCount = 10;
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.imgURL = "../imgs/icons_greenfolders/";
	mygrid.init();
	loadTable();
	mygrid.setSkin("dhx_skyblue")
	var form = document.forms['myForm'];
	form.elements["e"].value = colCount;
	form.elements["e1"].value = rowCount;

	function loadTable()
	{
		colCount = document.forms['myForm'].elements["e"].value;
		rowCount = document.forms['myForm'].elements["e1"].value;
		mygrid.kidsXmlFile = "../Mockup?colCount=" + colCount + "&rowCount="
				+ rowCount + "&reqType=Data";
		mygrid.load("../Mockup?colCount=" + colCount + "&rowCount=" + rowCount
				+ "&reqType=Struct", function()
		{
			mygrid.load("../Mockup?colCount=" + colCount + "&rowCount="
					+ rowCount + "&reqType=Data", "json");//load grd data
		}, "xml");
	}
</script>

The test is running on v.3.0 Pro build 110707 with Google Chrome.
Anyone ran into this issue or has an idea why it’s not functioning?

Thanks.
-Gabriel
Mockup_data.zip (831 Bytes)

#10

Be sure to include dhtmlxgrid_json.js on the page.
dhtmlxgrid_json.zip (2.06 KB)