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
235
How to toggle a class within an igGrid column template?
posted

Hi,

In my igGrid, I am trying to make the columns in a specific row flash colors based on some event. I know you can modify the look of the column by setting the template.

Can you advise how I could do this? Do you have an example?

I was looking at this example online, which shows something similar to what I wish to do.

http://jsfiddle.net/rgkQK/3/

Can you please advise?

Thanks,

Jose

  • 17590
    Suggested Answer
    Offline posted

    Hello Jose,

    In order to achieve your requirement a template column`s option could be used. Since it is applicable to a column, not a row my suggestion is to create something like a generic conditional template applicable for all columns. This approach can help you achieve something similar to row template which afterwards could be used as a basis for the flashing row color. In this template a particular classes will be applied for particular rows (it could be applied to all the rows as well). Afterwards, at some point(in my sample on a button click) all the rows with a particular class could be referenced by this class and manipulated as in the jsfiddle sampel that you provided. For example:

    <script id="colTmpl" type="text/template">
      {{if ${ProductID} % 2 == 0 }}
      <span class='blinkYellow background-color-yellow'>${key}</span>
      {{else}}
      <font color='red'>${key}</font>
      {{/if}}
     </script>

    ......

     $(function () {
               $("#grid").igGrid({
                   columns: [
                        { headerText: "Product ID", key: "ProductID", dataType: "number", template: $("#colTmpl" ).html().replace(/key/g, 'ProductID') },
                        { headerText: "Product Name", key: "Name", dataType: "string", template: $("#colTmpl" ).html().replace(/key/g, 'Name')  },
                        { headerText: "Product Number", key: "ProductNumber", dataType: "string", template: $("#colTmpl" ).html().replace(/key/g, 'ProductNumber') },
         { headerText: "Avalibility", key: "Avalibility", dataType: "number", template: $("#colTmpl" ).html().replace(/key/g, 'Avalibility') },
                        { headerText: "Product Status", key: "ProductStatus", dataType: "string", template: $("#colTmpl" ).html().replace(/key/g, 'ProductStatus')}
                    ],
          primaryKey: "ProductID",
                   dataSource: products,
           autoCommit : true,
          features:[
           {
                        name: "RowSelectors",
         enableCheckBoxes: true
                    },
        {
         name: "Selection",
         //mode: "cell",
          activation : false
        }
          ]
               });
         $("#blink").click(function(){
       setInterval(findYellow,1000); 
         })
         function findYellow(){
        $("span.blinkYellow").each(function(){
        $(this).toggleClass("background-color-yellow");
       })
      }
           });

    I am attaching a small sample for your reference. In this small application I am creating a generic template which applies yellow background color to some rows. There is a button which if clicked starts flickering some rows.

    Please test it on your side and let me know if you have any additional questions.

    igGridFlickeringRows.zip