Hi,
I am using iggrid in that I am having dynamically added columns. I want to add a background color for "td". Is it possible using conditional template? if yes how? if not can anybody please tell me the other options for this?
Thanks in advance!
Regards,
-Niranjan
Hello Niranjan,
Thank you for posting in our forums!
You cannot directly change the color of the <td> elements from the column template since the template is nested inside the <td>. You can achieve this by setting a flag for the style in the column template and including some additional jQuery code to apply the style to the <td>. The additional code should be run after the rows are rendered, and I recommend handling the rowsRendered event for this.
Please see this jsFiddle for a demonstration of how you can achieve this.
If you need any further assistance with this, please let me know and I will be glad to help.
Thanks Michael !!
I have made changes as per your suggestion. and color is being added only for first row. please suggest. please see my code below.
I have one more question that in my following code I have more than 40 autogenerated columns. And I want to add background color, multi-column header. Could you please help?
Thanks in advance
$(
"#grid").igGrid({
columns: [
{ headerText:
"Id", key: "Id", dataType: "number", width: "150px", template: "<div id='primekey'>${Id}</div>" },
"Name", key: "Name", dataType: "string", width: "150px" },
"Type", key: "Type", dataType: "string", width: "150px" },
"FullTime/PartTime", key: "FullTimePartTime", dataType: "string", width: "150px" },
"End Date", key: "EndDate", dataType: "string", width: "150px" },
"Business Area", key: "BusinessArea", dataType: "string", width: "150px" },
"SubBusiness Area", key: "SubBusinessArea", dataType: "string", width: "150px" },
"Team", key: "Team", dataType: "string", width: "150px" }
],
autoGenerateColumns:
true,
dataSource: data,
defaultColumnWidth: 50,
width:
"1000px",
height:
"400px",
rowsRendered:
function(evt, ui) {
colorizeColumn(
"primekey");
},
features: [
{
name:
"Sorting",
type:
"local"
'Paging',
"local",
pageSize: 10
"ColumnFixing",
fixingDirection:
"left",
columnSettings: [
columnKey:
"Id",
isFixed:
allowFixing:
false
"Name",
true
"Type",
}
]
"Filtering",
allowFiltering:
caseSensitive:
false,
});
function colorizeColumn(cellColor) {
// Add class to the cell's parent (<td>).
"#" + cellColor + "").parent()
.addClass(
"T");
-Niranjan V