[Solved] Gird Header BackColor

[Shalini]

Hi,

  I want to know how to programatically change the header backcolor of the Grid..Kindly let me know on how to do it..Help me with the necessay code and Steps on how the result could be achieved..

Thanks,

Shalini Jennifer

[Dimo]

Hi Shalini,

You can change the header styling by using HeaderHtmlAttributes for a Grid column:

Html.Telerik().Grid(Model)
    .Name("Grid1")
    .Columns(columns =>
    {
        columns.Bound(o => o.OrderID).Width(100).HeaderHtmlAttributes(new { @class="newBack" });
    })

Then you can use the custom CSS class to define background styles and hover background styles:

.newBack
{
    background:none #fc9;
}

.newBack .t-state-hover
{
    background:none #fea;
}

You may want to include a condition in the column's declaration, for example, a parameter passed from the controller. The syntax then will be:

columns.Bound(o => o.OrderID).Width(100).HeaderHtmlAttributes((1 == 1) ? new { @class = "newBack" } : new { @class = "otherClass" });

// or

columns.Bound(o => o.OrderID).Width(100).HeaderHtmlAttributes((1 == 1) ? new { @class = "newBack" } : null);

Regards,
Dimo
the Telerik team

[Shalini]

Thanks for the Code..

I want to know how to use this code when i set my autogenerate columns as true..

Please let me know on how to set the HeaderHtmlAttributes for the code below :

 @(Html.Telerik().Grid(Model)
        .Name("Grid")
        .Resizable(resizing => resizing.Columns(true))
        .Columns(columns =>
         {
             columns.Template(               
             @<text>                   
             <input name="checkedRecords" type="checkbox" value="@item.ProductId" title="checkedRecords"/>
             </text>)               
             .Title("").Width(36).HtmlAttributes(new { style = "text-align:center" });
             columns.AutoGenerate(true);            
          })
      )

[Dimo]

Hello Shalini,

In this case you can use the ability to define a callback function in AutoGenerate(...) and set properties there, as shown in this demo:

http://demos.telerik.com/aspnet-mvc/grid/autogeneratecolumns

Kind regards,
Dimo
the Telerik team

[Shalini]

Hi,

 I was not able to get it working..Could you help me out with the sample codes??

Thanks,

Shalini

[Dimo]

Hi Shalini,

It will be easier if you show me your current implementation, probably there is a need for minor correction there.

Dimo
the Telerik team

[Shalini]

Hi,

This is my code for autogeneration of columns.....I need to set the Header back colour of the columns and alignment of cell contents of a column here..When i use this code it throws an error....

columns.AutoGenerate(column =>

{

column.HtmlAttributes(

 

new { style = "text-align:left" });

 

 

　

 

columns.HeaderHtmlAttributes(

 

new { @class = "newBack" });

 

 

});

[Dimo]

Hello Shalini,

As you can see in the demo, the syntax inside the callback is different. This will work:

column.HtmlAttributes.Add("style", "text-align:right");
column.HeaderHtmlAttributes.Add("class", "newBack");

Dimo
the Telerik team

[Shalini]

Hi,

       I also need each column contents to be alligned differently...

My Code is as follows:

columns.AutoGenerate(column =>

{

column.HeaderHtmlAttributes.Add(

 

"class", "newBack");

 

 

column.HtmlAttributes.Add(

 

"style", "text-align:right");

 

 

 

 

column.Title(

 

"ProductId").Width(36).HtmlAttributes.Add("style", "text-align:left");

 

 

column.Title(

 

"ProductName").Width(36).HtmlAttributes.Add("style", "text-align:left");

 

 

column.Title(

 

"Price").Width(36).HtmlAttributes.Add("style", "text-align:right");

 

 

column.Title(

 

"Description").Width(36).HtmlAttributes.Add("style", "text-align:left");

 

 

 

 

})

But this also throws up an error...

Kindly modify the code above to achieve the result

Thanks,

Shalini

[Dimo]

Hello Shalini,

The Autogenerated columns demo shows how to use IF statements to apply different settings for different columns.

Dimo
the Telerik team

[Shalini]

Hi,

  Thanks for the reply..Its working as expected...