Need conditional colouring option in Kendo UI Grid + Export the same with colour to Excel

2 posts, 0 answers
  1. Shashank
    Shashank avatar
    4 posts
    Member since:
    Feb 2018

    Posted 05 Mar Link to this post

    Hi,

    I am having a requirement for conditional cell colouring in Kendo UI grid and user should be able to extract the same coloured cells in excel using Kendo Export to Excel feature.

    Please refer the attached screenshot in which I need to colour based on following conditions

    1) Colour the entire Order ID column with Gray background

    2) Colour Green and yellow background for the selected country and state in Ship Country and Ship city respectively 

    3) Mark Red colour for those columns where Freight is less than 25

    So, I am looking for a way through achieve this conditional colouring in export to excel as well, i.e. by clicking on export to excel user can download the excel with all these cells coloured. 

    Can you please assist me in achieving this.

     

  2. Stefan
    Admin
    Stefan avatar
    1878 posts

    Posted 07 Mar Link to this post

    Hello, Shashank,

    Thank you for the details.

    Based on the screenshot I can assume that the coloring in the Grid in Grid is already achieved and only the export should be colored properly. If this is not correct, then the column.template property can be added and based on the conditions to add different color and background to the Grid cell:

     https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.template

    This article can also prove helpful:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/style-rows-cells-based-on-data-item-values

    As for the exported Excel document, we have two example demonstrating how to change the color and the background respectively:

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/alternating-rows

    https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/excel/cell-format

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top