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
445
Condition in each grid column
posted

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

Parents
No Data
Reply
  • 17590
    Offline posted

    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>

    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.

    igGridGenericTemplate (2).zip
Children
No Data