Alternate row color

[wdudek]

Hi, I'm new to mvc and even newer to Telrik's mvc controls but I'm having a hard time doing something that seems like it should take a couple of seconds. I just want to specify an alternate row color in my grid but I'm not having any luck doing it. I took a look at this demo but honestly I'm nto seeing where the alternate row color or (preferably) the theme is getting set? http://demos.telerik.com/kendo-ui/web/grid/index.html

Here's my mindlessly simple grid, if anyone can suggest what I need to do or where I can find good examples for simple tasks like this it would be greatly appreciated. Trying to convince my boss that MVC is he way to go but so far I'm kind of dumbfounded as to how complicated the ui seems to have gotten. 

Thanks
Bill

<div id="movies">
    @(Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(model => model.Title).Width(500);
            columns.Bound(model => model.Price).Width(200);
        })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            .Scrollable ()


    )
</div>

<style scoped>
    #movies {
        width: 692px;
        height: 413px;
        margin: 30px auto;
        padding: 51px 4px 0 4px;
    }
    </style>

[Iliana Dyankova]

Hi Bill,

You could easily achieve the expected result using a simple CSS rule: 

<style>
.k-grid .k-alt {
   background-color: red; /* specify the alternate background-color */
}
</style>

Regards,
Iliana Nikolova
Telerik

[wdudek]

Iliana,
   Thanks for the reply but I seem to still be doing something wrong as my grid just shows up with an all white background? This is what I have now, any thoughts on what I'm doing wrong?
Thanks
Bill

<div id="movies">
    @(Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(model => model.Title).Width(500);
            columns.Bound(model => model.Price).Width(200);
        })
            .HtmlAttributes(new { style = "height: 380px;" })
            .Scrollable()
            .Groupable()
            .Sortable()
            //.Pageable(paging => paging.PageSize(3)
            //.Style(GridPagerStyles.NextPreviousAndNumeric))
            .Scrollable ()


    )
</div>


<style>
    .k-grid .k-alt {
        background-color: red; /* specify the alternate background-color */
    }
</style>

[Iliana Dyankova]

Hi Bill,

First of all let me apologize - the suggested solution is suitable for Kendo UI Grid for ASP.NET MVC while you are using Telerik Extensions for ASP.NET MVC. Hence try the following CSS rule:

<style>
.t-grid .t-alt {
    background-color: red; /* specify the alternate background-color */
}
</style>

On a side note, keep in mind that the Telerik Extensions for ASP.NET MVC were discontinued and are no longer officially supported.

Regards,
Iliana Nikolova
Telerik

[wdudek]

Thanks, that did it. I didn't realize they were discontinued, guess I'll be trying your other suggestion then with the Keno ui.

Thanks again.