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
Thanks Vasya. Is it also possible to pass in a function name to the template?
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"); }) } });
<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.