Hi,
I create a grid where each column will show an information in depend of the other column value. Lets say:
I have a model that is populated by my action:
ProductModel
ProductId
ProductName
ProductStatus
What I want to do know is to add a css to each column in depend of their status as below.
ProductId ProductName ProductStatus
1 prod 1 OK
2 prod 2 KO
3 prod 3 Not valid
4 prod 4 To apply
So here if status is OK, I will color the line on green. Red for KO etc. and this will be done on grid rendering. So what I search is something like:
@(Html.Infragistics()
.Grid<ProductModel>()
column.For(x => x.ProductName).ColumnCssClass(c => { if(c.ProductStatus == KO) return "prd-red-class"; })
I thought of a way to do it with DataView
var dataview = grid.data('igGrid').dataSource.dataView()
dataview.forEach(function(obj, index) {
if (obj.ProductStatus.value == "OK") {
$(obj.ProductStatus).css('red-color-css');
}
});
I don't know if ti yould work. Any ideas?
Thank you
Hello cem ozbas,
Thank you for posting in our community.
What I can suggest for achieving your requirement is using conditional templates. In your scenario something like a generic template could be created. In this template the value of the Product Status field could be cheeked. If this value is OK than the text color could be set to green using color css property. Otherwise, text color could be set to red. The generic template will contain ${key} in place of the column key and when set to a particular column ${key} string could be replaced with the particular column key. For example:
<script id="colTmpl" type="text/template"> {{if ${ProductStatus} == "OK" }} <font color='green'>${key}</font> {{else}} <font color='red'>${key}</font> {{/if}} </script> <script> $.ig.loader(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')} ], width: "500px", dataSource: products }); }); </script>
<script id="colTmpl" type="text/template"> {{if ${ProductStatus} == "OK" }} <font color='green'>${key}</font> {{else}} <font color='red'>${key}</font> {{/if}} </script>
<script>
$.ig.loader(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')} ], width: "500px", dataSource: products }); });
</script>
I am also attaching a small sample illustrating my suggestion for your reference. This sample is created using JavaScript only however, same approach could be applied in an MVC scenario.
Please have a look at my sample and let me know if you have any additional questions afterwards.
Do not hesitate to contact me for any further assistance with this matter.