I am trying to change the color of entire column of igGrid.
I wrote a JavaScript code in the Index.cshtml page for the same, which is as below:
---------------------------------------------------------------------
<div style="float: left;"> @Html.DropDownListFor(m => m.SelectedItmCategory, Model.lstItmCategory, htmlAttributes: new { @class = "form-control", @id = "cmbproj", style = "float:right;", @onChange = "fnAssignModuleName(this.id);" }) </div>
@Html.HiddenFor(m => m.SelectedItmCategory, new { @id = "hdnSelectedItmCategory" })
<script>function fnAssignModuleName(id) { debugger; var gridId = "DevpProject_Index"; //getting gridId of current controller var moduleName = $("#" + 'cmbproj' + " option:selected").val(); //getting the CategoryDescription='Others' var columnIndex; if (gridId == "DevpProject_Index" && moduleName == "Others") { for (i = 0; i < gridId.length; i++) { //columnIndex = $("#" + gridId + "_" + "DEVP_HDR_VARIANCE_REASONS").data("columnIndex"); //$(grid.igGrid("cellAt", columnIndex, i)).css('background-color', 'red'); $("#" + gridId + "_" + "DEVP_HDR_VARIANCE_REASONS").css('background-color', 'red'); } } else { $("#" + gridId + "_" + "DEVP_HDR_VARIANCE_REASONS").css('background-color', '#38B09D'); } }</script>
-------------------------------------------------------------------
using line: $("#" + gridId + "_" + "DEVP_HDR_VARIANCE_REASONS").css('background-color', 'red');I am able to change the required column's header backgroud color in igGrid.
But I want to change the entire column backgroud color in igGrid. For this, I tried below lines of code but the 2nd line is not giving the desired output:
//columnIndex = $("#" + gridId + "_" + "DEVP_HDR_VARIANCE_REASONS").data("columnIndex");//$(grid.igGrid("cellAt", columnIndex, i)).css('background-color', 'red');
Please let me know how to achieve it.
Thanks in advance
Please suggest some solution.
Hello Pree,
Thank you for posting in our community.
What I can suggest for achieving your requirement is using columnCssClass option of igGrid columns. This property is a space-separated list of CSS classes to be applied on the data cells of this column. You could set this property initially when creating columns collection as following:
<style> .colStyle { background-color:red; } .newColStyle { background-color:green; } </style> ..... @(Html.Infragistics().Grid(Model) .ID("grid1") .Width("100%") .AutoCommit(true) .Height("500px") .AutoGenerateColumns(false) .PrimaryKey("Name") .Columns(col => { col.For(c => c.ProductID).HeaderText("ProductID").Hidden(false).ColumnCssClass("colStyle"); col.For(c => c.Name).HeaderText("Name"); col.For(c => c.ReleaseDate).HeaderText("ReleaseDate"); col.For(c => c.ProductNumber).HeaderText("Product Number"); col.For(c => c.Col1).HeaderText("Col1"); col.For(c => c.Col2).HeaderText("Col2"); }).Features(features =>{ features.Updating() .EditMode(GridEditMode.Row).ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Name").ReadOnly(true); }); //features.Filtering().Labels(x => { x.Yesterday("a").GreaterThan("ffff"); }).FilterDialogWidth("100"); features.Selection().MultipleSelection(true); features.Sorting(); features.Hiding(); features.ColumnMoving(); features.Paging().Type(OpType.Remote).PageSize(3);}).DataSourceUrl(Url.Action("GetData")).UpdateUrl(Url.Action("OrdersSaveData")).Render())
<style> .colStyle { background-color:red; } .newColStyle { background-color:green; } </style>
.....
@(Html.Infragistics().Grid(Model) .ID("grid1") .Width("100%") .AutoCommit(true) .Height("500px") .AutoGenerateColumns(false) .PrimaryKey("Name") .Columns(col => { col.For(c => c.ProductID).HeaderText("ProductID").Hidden(false).ColumnCssClass("colStyle"); col.For(c => c.Name).HeaderText("Name"); col.For(c => c.ReleaseDate).HeaderText("ReleaseDate"); col.For(c => c.ProductNumber).HeaderText("Product Number"); col.For(c => c.Col1).HeaderText("Col1"); col.For(c => c.Col2).HeaderText("Col2"); }).Features(features =>{ features.Updating() .EditMode(GridEditMode.Row).ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("Name").ReadOnly(true); }); //features.Filtering().Labels(x => { x.Yesterday("a").GreaterThan("ffff"); }).FilterDialogWidth("100"); features.Selection().MultipleSelection(true); features.Sorting(); features.Hiding(); features.ColumnMoving(); features.Paging().Type(OpType.Remote).PageSize(3);}).DataSourceUrl(Url.Action("GetData")).UpdateUrl(Url.Action("OrdersSaveData")).Render())
Please keep in mind that if this property is set it after initialization dataBind method should be called afterwards in order to re-render igGrid and apply the new css classes. For example if this is done on a button click the code will look like the following:
$("#changeCssBtn").click(function(){ $("#grid1").igGrid("option", "columns")[0].columnCssClass = "newColStyle "; $("#grid1").igGrid("dataBind");});
I hope you find this information helpful.
Please let me know if you have any further concerns or questions regarding this matter.
Thank you for using Infragistics components.
Thank you for the reply. I had solved the issue using below lines of code:
var gridId = evt.target.id;var columnIndex;
if(gridId == "ProjNew_Index"){ for(i = 62; i < ds.length; i++) { columnIndex = $("#" + gridId + "_" + "REASONS").data("columnIndex")-1; $(grid.igGrid("cellAt", columnIndex, i)).css('background-color', 'gray'); } }
Thank you
I am glad that you managed to resolve your issue.
Please let me know if you need any further assistance with this matter.