Print Page - Add/edit datagrid column dynamically? [SOLVED?]

Title: Add/edit datagrid column dynamically? [SOLVED?]
Post by: aswzen on March 10, 2016, 05:18:00 AM

How to add a column to datagrid in dynamic way?
*without rebuild the datagrid (destroy then recreate)

Thank you in advance

Title: Re: Add/edit datagrid column dynamically? [UNSOLVED]
Post by: stworthy on March 10, 2016, 08:50:44 AM

No other simple way to accomplish this. You have to construct the 'columns' property value and re-create the datagrid again.

Title: Re: Add/edit datagrid column dynamically? [UNSOLVED]
Post by: ink on March 13, 2016, 06:12:25 PM

Let us try to think about the setting of the datagrid, for example:

$('#dg').datagrid({
url:'datagrid_data.json',
columns:[[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]]
});

if you can set the "column" as an array, e.g. heading, just like this:

heading = [[
{field:'code',title:'Code',width:100},
{field:'name',title:'Name',width:100},
{field:'price',title:'Price',width:100,align:'right'}
]];

then make it as a function:

function SetGrid(HeadingArray){
$('#dg').datagrid({
url:'datagrid_data.json',
columns: HeadingArray
});
}

call the function:
SetGrid(heading);

It should work...

Title: Re: Add/edit datagrid column dynamically? [UNSOLVED]
Post by: aswzen on March 13, 2016, 07:50:29 PM

ink: that is "re-create" the datagrid..

one of my point is not to destroy and re create the datagrid..

but thank you anyway :)

Title: Re: Add/edit datagrid column dynamically? [UNSOLVED]
Post by: ink on March 14, 2016, 08:03:57 AM

Yes! We all understand that "re-create" the datagrid is the only way to edit the datagrid column dynamically.
Actually, we can use "getData" to store the data into an array,
modify the heading array and
use "loadData" to reload the data back when "re-create" the datagrid to simulate the datagrid column editing.
:P

Title: Re: Add/edit datagrid column dynamically? [UNSOLVED]
Post by: aswzen on March 14, 2016, 09:29:23 PM

this is my code if you wonder how i achieve it .. (thank you for you suggestion mr ink)

im using moment.js (http://momentjs.com/)

Code:

function makeColumn(){
   	var SD = '20-02-2016'; //LOWEST DATE
   	var ED = '25-02-2016'; //HIGHEST DATE

   	var a = moment(ED , "DD-MM-YYYY");
	var b = moment(SD , "DD-MM-YYYY");
	var totalday = a.diff(b, 'days');

	var Heading = [];
   	Heading = [
           { 
           	field:'CREW_NAME',
            title:'Crew Name',
            width:240
       	}
       ];

	for(var i = 0; i <= totalday; i++){
		b = moment(SD , "DD-MM-YYYY");

	 	var dateNow = b.add(i, 'days');
   		var dateFormatRaw = dateNow.format('DD_MM_YYYY');
   		var dateFormat = dateNow.format('D MMM YYYY');

	 	DATES = {
	 		field : 'DATE_'+dateFormatRaw,
	 		title : dateFormat,
	 		width : '155px'
	 	}
	 	Heading.push(DATES);
	}

	SetGrid(Heading);
   }

function SetGrid(HeadingArray){
	
    TEMP_DATA = $('#CREW_BOOKING_TABLE').datagrid('getRows');
    $('#CREW_BOOKING_TABLE').datagrid({ url: '', columns: [HeadingArray] });
    $('#CREW_BOOKING_TABLE').datagrid('loadData', TEMP_DATA);
}

(http://i.imgur.com/qBFQK8J.jpg)

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: aswzen on March 10, 2016, 05:18:00 AM