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