I am using igGrid with a JSON datasource that can contain different sets of columns which results in me using auto generated columns. I wish to apply column templates to these columns and want to know if this is possible. I can build a column template on the server where I know which columns will be used to populate the grid and pass it over to the client, but how do I apply that template to the grid when binding the data?
I am also interested in other customizations such as changing the Display Name, Column Width, Column Order etc of each column, can this be set through the column template?
Data binding on client:
$("#dataGrid").igGrid({ autoGenerateColumns: true, defaultColumnWidth: "150px", width: "100%", dataSource: data, dataSourceType : "json", responseDataKey: "data"});
Thank you!
Hi Elin,
Make sure that the character before the # is not space and it will work. If you change the template in my sample it will look like this:
template = 'My value is <span style="color:#AABBCC; background-color:#DDEEFF">${#placeHolder}</span>';
Please let me know if this works for you.
Kind regards, Petko Zhekov Software Engineer
By the way, is there a way to escape the # character when used in a template so that it isn't interpreted as a comment character? We are using HEX color codes in our templates (directly in the style attribute of an element since the colors are generated by the user so we can't use static CSS classes).
Thank you for posting in our forums!
Yes, you can set column template to auto generated column. The grid has just the right API method for this purpose – setColumnTemplate. The method accepts the column key and the template as arguments. Since you don’t define column keys you have to get them from the generated “columns” collection. I prepared a sample page that demonstrates my solution. Please review it and let me know if this works for you.
I’m looking forward to your reply!