Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Pree Khanna
400
Change entire specific column's background color in igGrid
posted

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

Parents Reply
  • 17590
    Offline posted in reply to Pree Khanna

    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())

    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.

Children