CODEWITHSUNDEEP
jqueryasp.net-mvckendo-grid
giparekh
giparekh

Reputation: 307

How can I change the background color of a specific column in Kendo grid?

I am using Kendo grid in MVC project. How can I change the background color of a specific column in Kendo grid? Grid

@(Html.Kendo().Grid<Webapplication1.Models.mainViewModel>()
    .Name("mainGrid")
    .Columns(c =>
    {
        c.Bound(m => m.Id).Hidden();
        c.Bound(m => m.CountryViewModel.CountryName)
            .Title("Country").HeaderHtmlAttributes(new { @title = "Countries" });
        c.Bound(m => m.LocationViewModel.LocationName)
            .Title("Location").HeaderHtmlAttributes(new { @title = "Locations" });
        c.Bound(m => m.StockSent)
            .Title("StockSent");
        c.Command(p =>
        {p.Edit().Text(" ").UpdateText(" ").CancelText(" ").HtmlAttributes(new { @title = "Edit" });});
    })
    .ToolBar(toolbar => { toolbar.Create().Text("").HtmlAttributes(new { @title = "Add"}); })
    .Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.PopUp).TemplateName("gridEditor"))
    .DataSource(dataSource => dataSource
.Ajax()
        .PageSize(10)
        .Read(read => read.Action("mainGrid_Read", "abc"))
    .Update(update => update.Action("mainGrid_Update", "abc"))
    .Create(create => create.Action("mainGrid_Create", "abc"))
        .Model(m => { m.Id(p => p.Id);
          m.Field(p => p.CountryViewModel).DefaultValue(ViewData["DefaultCountry"] as Webapplication1.Models.CountryViewModel);      
        })
    )
)

Here the column "StockSent" should be of different color then other columns.

Upvotes: 0

Views: 3915

Answers (1)

ataravati
ataravati

Reputation: 9155

Let's say you want to change the color of the Location column. You add a class to the column, like this:

c.Bound(m => m.LocationViewModel.LocationName)
            .Title("Location")
            .HeaderHtmlAttributes(new { @title = "Locations" })
            .HtmlAttributes(new { @class = "colored-col" });

Then, in your CSS file, you'll have:

.colored-col { background-color: #ff0000 }

Upvotes: 3

Related Questions