jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Linking column headers dynamically
Tagged: angular grid, column, dynamic, dynamic column, grid, Header, jquery grid, jqxgrid, static
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 8 months ago.
-
Author
-
Hi,
I have a grid with following columns. The column headers are Name, City, Contact and Email. Edit and Delete columns are always present irrespective of the first four columns because those are button which will delete or edit the row.Heres the static code….
$("#jqxgrid").jqxGrid({ source: dataAdapter, selectionmode: 'multiplecellsextended', columns: [{ text: 'Name', columntype: 'textbox', datafield: 'Name' }, { text: 'City', columntype: 'textbox', datafield: 'City' }, { text: 'Contact', columntype: 'textbox', datafield: 'Contact' }, { text: 'Email', columntype: 'textbox', datafield: 'Email' }, { text: 'Edit', datafield: 'Edit', columntype: 'button' }, { text: 'Delete Row', datafield: 'Delete', columntype: 'button' }] });
I want to modify this column headers so that even if there are new header names, it will display the new header names dynamically. I dont have to write it statically every time new column headers are used.
I have used the below code in order to make it dynamic.
var headers= ["Name", "City", "Contact", "Email"]
I get this array of headers from the backend first and then i use it to make it dynamic. heres that code.
var gridColumns = []; for(var v = 0; v < headers.length; v++){ gridColumns.push({ text:headers[v], dataField: headers[v], columnType:'Textbox'}); } $("#jqxgrid").jqxGrid({ source: dataAdapter, selectionmode: 'multiplecellsextended', columns: gridColumns });
But this will only add the first four column names. Edit and delete buttons which are always present wont be available. I can push them too by including in the headers array but i want to keep it seperate since it performs additional functions which i have edited from the above code.
My question is- how can i link the dynamic columns and the column of Edit and Delete together. I tried doing something like this but it gave me an error.
$("#jqxgrid").jqxGrid({ source: dataAdapter, selectionmode: 'multiplecellsextended', columns: gridColumns, [{ text: 'Edit', datafield: 'Edit', columntype: 'button' }, { text: 'Delete Row', datafield: 'Delete', columntype: 'button' }] });
Please note the linking here at the columns: part. gridColumns are dynamic and edit and delete column added after that. this fails. Can someone pls let me know how to correct this to get desired result.
Hi ashwin prabhu,
Please try either pushing the “Edit” and “Delete” column objects to the gridColumns array or concatenating the two arrays, i.e.:
$("#jqxgrid").jqxGrid({ source: dataAdapter, selectionmode: 'multiplecellsextended', columns: gridColumns.concat([{ text: 'Edit', datafield: 'Edit', columntype: 'button' }, { text: 'Delete Row', datafield: 'Delete', columntype: 'button' }]) });
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.