Print Page - Create Group Columns using JSON for datagrid [Solved]

Title: Create Group Columns using JSON for datagrid [Solved]
Post by: Darrel on August 25, 2016, 11:46:16 PM

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 (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

Title: Re: Create Group Columns using JSON for datagrid
Post by: stworthy on August 26, 2016, 02:58:08 AM

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

Title: Re: Create Group Columns using JSON for datagrid
Post by: Darrel on August 26, 2016, 03:51:40 AM

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 (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.

Title: Re: Create Group Columns using JSON for datagrid
Post by: stworthy on August 26, 2016, 07:22:40 AM

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
});

Title: Re: Create Group Columns using JSON for datagrid
Post by: Darrel on August 27, 2016, 08:03:29 AM

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 (http://code.reloado.com/uxuyun3/edit#html,live)

Regards,
Darrel.

Title: Re: Create Group Columns using JSON for datagrid
Post by: stworthy on August 27, 2016, 09:41:09 PM

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

Title: Re: Create Group Columns using JSON for datagrid
Post by: Darrel on August 28, 2016, 01:43:07 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Darrel on August 25, 2016, 11:46:16 PM