Disabling the k-alt on a grid in MVC

11 posts, 1 answers
  1. Ian
    Ian avatar
    73 posts
    Member since:
    Jun 2013

    Posted 06 Aug 2013 Link to this post

    Using the MVC wrapper I create the grid.

    I need to tell the grid to not render the alternative style of alternating lines. Right now it adds a .k-alt to every other TR

    Is this possible?
  2. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 08 Aug 2013 Link to this post

    Hi Ian,

    This is not supported out-of-the-box in Kendo UI Grid, however you could achieve it using:

    • Additional JavaScript. For example in the dataBound event remove k-alt class using jQuery API:
      @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()   
          .Name("grid")
          //....
         .Events(ev => ev.DataBound("onDB"))
      )
       
      <script>
      function onDB() {
         $("#grid tr.k-alt").removeClass("k-alt");
      }
      </script>
    • Custom CSS:
      <style>
      #grid tr.k-alt {
          background: transparent ;
      }
      </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. Kendo UI is VS 2017 Ready
  4. Ristogod
    Ristogod avatar
    63 posts
    Member since:
    Aug 2008

    Posted 18 Mar 2014 Link to this post

    I need the exact opposite of this. The alt color is light and my text readable. So when I remove the alt, every row is unreadable.
  5. Ristogod
    Ristogod avatar
    63 posts
    Member since:
    Aug 2008

    Posted 18 Mar 2014 in reply to Ristogod Link to this post

    I was able to make mine work using the javascript method.
    function dataBound(e) {
        $("#contacts tr").addClass("k-alt");
    }

    I would however prefer a CSS method that tells it to apply the k-alt class to all the rows that aren't k-alt class. I simply don't know how to do this, or even if it's possible.
  6. Ristogod
    Ristogod avatar
    63 posts
    Member since:
    Aug 2008

    Posted 18 Mar 2014 in reply to Ristogod Link to this post

    I refined the jQuery a bit to only add it to rows that aren't already classed as k-alt:

    function dataBound(e) {
         $("#contacts tr:not(.k-alt)").addClass("k-alt");
     }
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 18 Mar 2014 Link to this post

    Hi Nathan,

    In order to change all grid rows color you could use the following CSS rule:
    .k-grid tr {
       background-color: #fff; /* specify the background-color */
    }

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 06 Jul in reply to Iliana Nikolova Link to this post

    I've tried both of you solutions but neither do anything.  The alternating dark row still appears.  I need all rows to be the same color.  A row separator line is more than enough.   Any ideas?   This is an old thread and I'm using 2016 latest version kendo grid.  Thanks!
  9. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 08 Jul Link to this post

    Hi Michael,

    I tested both of the suggested solutions and they are working as expected (dojo). Could you please modify my example and demonstrate your exact setup - this way I would be able to provide concrete recommendations?

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  10. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 08 Jul in reply to Iliana Nikolova Link to this post

    I've done more testing and generally got it to work. But I think the main problem is the way it plays with bootstrap themes, especially our "dark" themes. The alternating row colors are problematic among other things This question is becoming off scope but are there any papers in how to make kendo and bootstrap work tigether
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2593 posts

    Posted 12 Jul Link to this post

    Hi Michael,

    The following documentation topic describes how to use the Kendo UI widgets alongside Twitter Bootstrap: 
    http://docs.telerik.com/kendo-ui/third-party/using-kendo-with-twitter-bootstrap

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  12. SpicyMikey
    SpicyMikey avatar
    16 posts
    Member since:
    Nov 2014

    Posted 12 Jul in reply to Iliana Nikolova Link to this post

    Thanks.  This does indeed help.  Especially since my issues are with Grids and there is a good discussion on that in that document
Back to Top
Kendo UI is VS 2017 Ready