This is a migrated thread and some comments may be shown as answers.

Alternate row color

4 Answers 972 Views
Grid
This is a migrated thread and some comments may be shown as answers.
wdudek
Top achievements
Rank 1
wdudek asked on 30 Jan 2014, 10:26 PM
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>

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 31 Jan 2014, 01:56 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
wdudek
Top achievements
Rank 1
answered on 31 Jan 2014, 04:53 PM
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>
0
Accepted
Iliana Nikolova
Telerik team
answered on 03 Feb 2014, 09:19 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
wdudek
Top achievements
Rank 1
answered on 04 Feb 2014, 09:13 PM
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. 
Tags
Grid
Asked by
wdudek
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
wdudek
Top achievements
Rank 1
Share this question
or