locked
KendoUI - DataViz: alternate gradient background RRS feed

  • Question

  • User1915367943 posted

    Hi Guys,

    I need your help. I try to make a diagram/ chart using kendo ui dataviz, and I like to have alternate gradient for the background. Is there any way I can do this?

    This is the alternate gradiant background will look like.

    Thank you,

    Danny 

    Monday, February 4, 2013 12:40 AM

Answers

  • User281315223 posted

    This is typically handled within the CSS by applying a class to alternating rows. Could you post some of the related CSS and HTML for your diagram?

    You should also consider using the Developer Tools (F12) feature in your browser, which will allow you to inspect the specific rows, which will likely show you how the colors are being rended (and the location of the related CSS) so that you could easily change it.

    This discussion on the Kendo UI forums refers to the Grid element having an alternating row property to allow for changes in row styling : 

       rowTemplate: "<tr><td>Test</td></tr>",
    altRowTemplate: "<tr class='k-alt'><td>Test</td></tr>", //Applies the k-alt class (for alternating rows)

    which you would just need to make the appropriate change in your CSS to accomplish : 

    tr { background : #FFF; }
    tr.k-alt {background : green; }




    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 4, 2013 8:32 AM
  • User2103994393 posted

    Here is the example 

    http://docs.telerik.com/kendo-ui/controls/charts/how-to/linear-gradient-bars

    If you want any clarification, please post here.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 26, 2016 11:09 AM

All replies

  • User281315223 posted

    This is typically handled within the CSS by applying a class to alternating rows. Could you post some of the related CSS and HTML for your diagram?

    You should also consider using the Developer Tools (F12) feature in your browser, which will allow you to inspect the specific rows, which will likely show you how the colors are being rended (and the location of the related CSS) so that you could easily change it.

    This discussion on the Kendo UI forums refers to the Grid element having an alternating row property to allow for changes in row styling : 

       rowTemplate: "<tr><td>Test</td></tr>",
    altRowTemplate: "<tr class='k-alt'><td>Test</td></tr>", //Applies the k-alt class (for alternating rows)

    which you would just need to make the appropriate change in your CSS to accomplish : 

    tr { background : #FFF; }
    tr.k-alt {background : green; }




    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, February 4, 2013 8:32 AM
  • User1915367943 posted

    Hi Rion, 

    Thank you for your feedback. I'm looking for chart not Grid element. I think I didn't explain it properly. I like to create bar or mix chart using KendoUI [I know how to do it] but I need put alternate gradient background on that chart. I don't have any idea how to put alternate gradient background.

    The real example is

    Thank you,

    Danny

    Monday, February 4, 2013 5:53 PM
  • User2103994393 posted

    Here is the example 

    http://docs.telerik.com/kendo-ui/controls/charts/how-to/linear-gradient-bars

    If you want any clarification, please post here.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 26, 2016 11:09 AM