Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
265
Conditionally set columnCssClass?
posted

What is the best way to set columnCssClass value conditionally in igGrid, for example based on a certain row property value?

Thanks!

Parents
  • 265
    posted

    To clarify, I am interested in setting the class of individual cells, not whole columns. The template property can help, as I see, but it only deals with cell's contents, not cells themselves.

Reply
  • 17590
    Offline posted in reply to coder

    Hello coder,

    Thank you for posting in our community.

    Your assumption is correct, template property is what you are looking for. You could use conditional templates for particular columns, check cell values and based on these vales set particular css class of your choice. For example the content of the cell could be wrapped in a divelement on which to apply the css class. For example:

     $("#grid").igGrid({
                    columns: [
                       { headerText: "Product ID", key: "ProductID", dataType: "number" },
                       { headerText: "Product Name", key: "Name", dataType: "string" },
                       { headerText: "Product Number", key: "ProductNumber", dataType: "string" },
           { headerText: "Availability", key: "Availability", dataType: "number", template: "<div class='{{if ${Availability} > 10}}backgorundColorGreen{{else}}backgorundColorRed{{/if}}'>${Availability}</div>" },
                   ],
                   width: "500px",
                   dataSource: products
       });

    I am also attaching a small sample illustrating my suggestion for your reference. Please have a look at this sample and let me know if you have any additional questions afterwards.

    Also, a working sample demonstrating how conditional templates are used could be found at the following link:

    http://www.igniteui.com/templating-engine/conditional-templates

    I hope you find my information helpful.

    Please let me know if you need any further assistance with this matter.

    igGridSetBackgroundCellValue Conditionally.zip
Children