Create Group Columns using JSON for datagrid [Solved]

[Darrel]

Hello,

Is it possible to create group columns using JSON object as shown in the following example instead of hard-coding the column string inside <td> and <tr> tags: http://www.jeasyui.com/tutorial/datagrid/datagrid9.php

Code reference from the same link:

Code:

<table id="tt" title="Column Group" class="easyui-datagrid" style="width:550px;height:250px"
        url="data/datagrid_data.json"
        singleSelect="true" iconCls="icon-save" rownumbers="true">
    <thead>
        <tr>
            <th rowspan="2" field="itemid" width="80">Item ID</th>
            <th rowspan="2" field="productid" width="80">Product ID</th>
            <th colspan="4">Item Details</th>
        </tr>
        <tr>
            <th field="listprice" width="80" align="right">List Price</th>
            <th field="unitcost" width="80" align="right">Unit Cost</th>
            <th field="attr1" width="100">Attribute</th>
            <th field="status" width="60" align="center">Stauts</th>
        </tr>
    </thead>
</table>

I don't want to hard-code the columns as shown in the above code block in the <thead> section.

Is there any particular JSON format to send even the grouped column headers for the datagrid to dynamically render them?

Regards,
Darrel

[stworthy]

Please look at this topic http://www.jeasyui.com/forum/index.php?topic=2197.0

[Darrel]

Hello stworty,

I'm sorry for not being clear. I've been able to create a datagrid with dynamic columns already. The javascript code snippet for the same can be found below:

Code:

data = {"COL_DATA":[
	{"field":"col_0","title":"Column 1","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_1","title":"Column 2","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_2","title":"Column 3","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_3","title":"Column 4","sortable":"true","width":"25.0%","align":"left","halign":"center"}
]}

data = JSON.parse(data);

var columns = data.COL_DATA;

col_data = [columns];

$("#dg").datagrid({
	columns: col_data,
	url: "ajax_url",			//ajax url to load the data
	pagination: true,
	pagePosition: 'both',
	multiSort:true,
	remoteSort:false,
	striped:true
});

This creates my datagrid as needed. I however want to create a grid having grouped columns as shown in the followng url: http://www.jeasyui.com/tutorial/datagrid/datagrid9.php

I'm confused on how to add the additional sub columns/grouped columns in the JSON object:

Code:

data = {"COL_DATA":[
	{"field":"col_0","title":"Column 1","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_1","title":"Column 2","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_2","title":"Column 3","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_3","title":"Column 4","sortable":"true","width":"25.0%","align":"left","halign":"center"},
	{"field":"col_3_1","title":"Column 4.1","sortable":"true","width":"12.5%","align":"left","halign":"center"},		//will add new column instead of being a sub column
	{"field":"col_3_2","title":"Column 4.2","sortable":"true","width":"12.5%","align":"left","halign":"center"}		//will add new column instead of being a sub column
]}

As shown in the above code the json data will create two new columns in the datagrid. However I want the "col_3_1" and "col_3_2" to be contained within the "col_3" column.

How can I do the same using JSON???

Regards,
Darrel.

[stworthy]

The group column should be defined as:

Code:

data = {"COL_DATA":[[
	{"field":"col_0","title":"Column 1","sortable":"true","width":"25.0%","align":"left","halign":"center","rowspan":2},
	{"field":"col_1","title":"Column 2","sortable":"true","width":"25.0%","align":"left","halign":"center","rowspan":2},
	{"field":"col_2","title":"Column 3","sortable":"true","width":"25.0%","align":"left","halign":"center","rowspan":2},
	{"title":"Column 4","colspan":2}
],[
	{"field":"col_3_1","title":"Column 4.1","sortable":"true","width":"12.5%","align":"left","halign":"center"},
	{"field":"col_3_2","title":"Column 4.2","sortable":"true","width":"12.5%","align":"left","halign":"center"}
]]};
var columns = data.COL_DATA;
col_data = columns;

$("#dg").datagrid({
	columns: col_data,
	url: "ajax_url",			//ajax url to load the data
	pagination: true,
	pagePosition: 'both',
	multiSort:true,
	remoteSort:false,
	striped:true
});

[Darrel]

Hello stworthy,

I've done the changes as per your suggestions. The sub-columns are visible but however they give an error on page and after that it is visible. Also the rows are not visible.

I've added the reloado code for the same. Please could you tell me what I'm doing wrong in the code: http://code.reloado.com/uxuyun3/edit#html,live

Regards,
Darrel.

[stworthy]

This example works fine.
http://code.reloado.com/uxuyun3/7/edit

[Darrel]

Hey stworthy,

Thanks a lot You saved the day for me. I saw the silly mistake that I was doing in the code.

Thanks & God bless you!!!!

Regards,
Darrel.