Dynamic columns

[ashwin prabhuParticipant]

Hi,
I am not sure if there is an option but i suppose there would be. Heres the link
https://www.jseditor.io/?key=dynamic-columns-list

I have 8 columns in this link. Order, Id, Comment, Id_type, Ub_factor, UbAction, Lb_Factor and LBAction. Suppose user gives a count of 3 at the beggining. So he only wants to display 3 columns. i.e. Order, Id and Comment.
How can i edit this code to make it dynamic based on the number user entered.

I was thinking of doing something like this but it didnt work.

var source = {
            datatype: "json",
            datafields: 
                 for (i=0; i<3; i++) {
               [{
                name: head1,
                type: 'string'
                }
                }

where head1 is the dyanmic name. means head1 corresponds to the first column. i.e. Order. I am able to get the column header names dynamically though.

Similarly, i will have to add a for loop here.

$("#jqxgrid").jqxGrid({
                width: 1060,
                height: 600,
                ready: function() {
                    $("#jqxgrid").jqxGrid('selectrow', 1);
                },
                editable: true,
                source: dataAdapter,
                columnsresize: true,
                sortable: true,
                 for (i=0;i<3;i++) {
                 columns: [{
                        text: head1,
                        columntype: 'textbox',
                        datafield: head1,
                        width: 50,
                       
                    },
                  }

Can we add for loops like this to make it generate dynamic columns or is there any other way to do this ?

[ChristianBParticipant]

Hi ashwin prabhu,
here is the Code of my solution:

var gridColumns 	= [];
var dataFieldColumns 	= [];

for(var v = 0; v < values.length; v++){
	gridColumns.push({ text:yourColname, dataField: yourDataBinding});
	dataFieldColumns.push({name:yourDataName, type: yourDataType});
}

var source =
{
	datatype: "json",
	datafields: dataFieldColumns,
	localdata: whatever
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxTable").jqxGrid(
{
	height: '100%',
	width: '100%',
	source: dataAdapter,
	columns: gridColumns
});

hope it’s helpful
LLAP
Christian

[ashwin prabhuParticipant]

Hi ChristianB-

Thanks. I get what you have showed over here.
can you please show a sample example by refering to this link.
https://www.jseditor.io/?key=dynamic-columns-list

We can take values.length = 8 as is the case in the link. Can you please edit the link and share the link here. i think we have to add something more apart from this.

[Author]

Posts