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
The reason that only the first row is being colored is because when using an id selector in jQuery like you are doing in the rowsRendered event, only one element is returned since the id of an element is assumed to be unique on the page.
You are setting the "Id" column's template to "<div id='primekey'>...". An element's id attribute should be unique and setting this id in the template is setting every row to have the same id. I would recommend setting the class attribute of the <div> instead of the id for this.
As for creating the multi column headers, it is not recommended to use AutoGenerateColumns if you will be customizing your columns. If you will be changing background colors and using multi-column headers for any columns, you should be defining the columns when initializing the grid. You can see an example of how to define the multi-column headers in this sample.
If you have any further questions or concerns with this, please let me know.