Alternate row color

5 posts, 1 answers
  1. wdudek
    wdudek avatar
    65 posts
    Member since:
    Dec 2006

    Posted 30 Jan 2014 Link to this post

    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>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 31 Jan 2014 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. wdudek
    wdudek avatar
    65 posts
    Member since:
    Dec 2006

    Posted 31 Jan 2014 in reply to Iliana Nikolova Link to this post

    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>
  5. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 03 Feb 2014 Link to this post

    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!
  6. wdudek
    wdudek avatar
    65 posts
    Member since:
    Dec 2006

    Posted 04 Feb 2014 in reply to Iliana Nikolova Link to this post

    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. 
Back to Top
UI for ASP.NET MVC is VS 2017 Ready