Newbie: mapping data to columns

Suite and Optimus Suite 5
#1

Hi

I want to load my grid with an in-memory javascript array of objects.
I am using the grid’s parse method to do so, but no data appears, I am guessing because there is not a one to one mapping between the object properties and the columns that I have defined using setHeader.

I do not wish to display all properties and do not have control over the format of the data.

So can someone point me to information as to how/where I can define a mapping between the properties in the array and the columns defined in the grid.

Thanks

Aidan

#2

You may use the setColumnIds(ids) method:
docs.dhtmlx.com/doku.php?id=dhtm … tcolumnids

Also, please, have a look at the supported data formats for the dhtmlxgrid:
docs.dhtmlx.com/doku.php?id=dhtm … ta_loading

#3

Hi

Thanks for the very quick reply, unfortunately I didn’t set the notify me checkbox, so I am only seeing this now.

I have added the setColumnsId statement but it didnt help.
On studying your examples I see the issue.

lets step back a little, I am evaluating javascript grids, I have looked at kendoUI, infragistics, ng-grid, jqwidgets, jqgrid and all of them have accepted the javascript array that I am supplying to dhtmlx. But I on studying your examples I see that your javascript array is expected to be

[[col1value, col2value…],[col1value,col2value, …], … ]

your json example shows the structure is expected to be
{rows:[{id: number, data:[col1value,col2value,…]},…]}

I am receiving a file with the following structure:

[ Object1, Object2, …]

Where each Object is defined as
{
prop1name: prop1value,
prop2name: prop2value,
…
}

What do I need to do to get the grid’s parse function to accept this Array?

Regards

Aidan

#4

I found a link on your site that describes the format to use.

This worked for me:

var jsonArray = { total_count: dataSource.length, pos: 0, data: dataSource };
dhxGrid.parse(jsonArray, “js”);

where dataSource = [ {prop1:prop1Value, prop2:prop2Value, … },{prop1:prop1Value, prop2:prop2Value, … }, …]

#5

Hello [areel]…

I am having a similar issue on this…

			myGrid.enableAutoWidth(false);
			myGrid.enableAutoHeight(false);
			myGrid.enableColumnAutoSize(false);
			myGrid.setHeader("S,B,A,P,I,S");//the headers of columns
			myGrid.setInitWidths("70,150.5,100,80,80,100.56");          //the widths of columns
			myGrid.setColAlign("right,left,left,right,center,left");       //the alignment of columns
			myGrid.setColVAlign("top,top,top,top,top,top");
			myGrid.setColTypes("dyn,ed,ed,price,ch,co");
			myGrid.setColSorting("int,str,str,str,str,str");
			myGrid.enableResizing("false,false,false,false,false,false");
			myGrid.setColumnIds("sales,title,author,price,instore,shipping");



		var dData = [
						   {
							 id:1001,
							 sales:"100",
							 title:"A Time to Kill",
							 author:"John Grisham",
							 price:"12.99",
							 instore:"1",
							 shipping:"05/01/1998"
						  },
						  {
							 id:1002,
							 sales:"1000",
							 title:"Blood and Smoke",
							 author:"Stephen King",
							 price:"0",
							 instore:"1",
							 shipping:"01/01/2000"
						  },
						  {
							 id:1003,
							 sales:"-200",
							 title:"The Rainmaker",
							 author:"John Grisham",
							 price:"7.99",
							 instore:"0",
							 shipping:"12/01/2001"
						  }
					   ];

var jsonArray = { total_count:dData.length, pos: 0, data: dData };
myGrid.parse(jsonArray, “js”);

In Chrome… I am receiving an error:

dhtmlxgrid.js:17000 Uncaught TypeError: Cannot read property ‘appendChild’ of null

#6

Somehow I cannot get setColumnIDs to work so I have

					timeGridObject.grid.dhtmlxdata = {
						head: myColumns,
						data: myData
					};

					mydhtmlx.parse(timeGridObject.grid.dhtmlxdata, "js");

Where data: is an array object of key/value pairs; and
Where head: in an array object of key/value pairs where the following keys are reserved for DHTMLX’s header settings

id: the key in data: where this column should get the value from
value: header column name
type: dhtmlxgrid type, e.g., ed, ch…
sort: dhtmlx sort types
align: left, right…
width: otherwise… it will really default to 100 even if you have setInitWidths as having different values…

Interesting that this method works and the other one with setColumnIDs did not work.

:frowning:

Bummer but I can live with it since we do not have a dynamic requirement to set Header Properties and Values in runtime…

#7

setColumnIds method is created for the “js” loading type or other custom loading types that use property_name:value pairs.
Here you can find some examples:
dhtmlx.com/docs/products/dhtmlxG … ig_js.html
dhtmlx.com/docs/products/dhtmlxG … rmats.html