Add/edit datagrid column dynamically? [SOLVED?]

[aswzen]

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

Thank you in advance

[stworthy]

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

[ink]

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

[aswzen]

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

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

but thank you anyway

[ink]

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.
 

[aswzen]

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