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
195
igGrid depending on value show value or image in grid
posted

I'm using an igGrid table for displaying my data in ASP.NET MVC (with razor views). I have a column "Category". Depending on if the value (type string) is empty or not I want to show eighter the value or an icon. How can I do this?

Currently I'm filling my array for the datasource like this:

<text>

vendorDetails.push(

{

"Id": @detail.Id,
"Vendor": "@(detail.Vendor)",
"Category": "@(detail.CategoryName?.Substring(0, 6))",
"PurVal": "@Math.Round(detail.PurchasedValue, 0)",
"Tot": "@totalP",
"TotSc": "@Math.Round(detail.TotSc, 2)",
"MaxSc": "@Math.Round(detail.MaxTotSc, 2)",
"ToScDel": "@Math.Round(detail.ToScDel, 2)",
"MaxScDel": "@detail.MaxScDel",
"TotScQua": "@Math.Round(detail.TotScQua, 2)",
"MaxScQua": "@detail.MaxScQua",
"TotScPurch": "@Math.Round(detail.TotScPurch, 2)",
"MaxScPurch": "@detail.MaxScPurch",
"AvgScoreDATE": "@Math.Round(detail.AvgScoreDATE, 2)",
"AvgScoreQTY": "@Math.Round(detail.AvgScoreQTY, 2)",
"PPM": "@Math.Round(detail.PPM, 0)",
"ReactivityScore": "@detail.Reactivity_Score",
"QltyTblCertificatesScore": "@detail.Qlty_TblCertificates_Score",
"InternalStopScore": "@detail.InternalStopScore",
"CustomerStopScore": "@detail.CustomerStopScore",
"SqAgreementScore": "@detail.SqAgreementScore",
"PriceScore": "@detail.PriceScore",
"QltyTblSupplierPaymenttermsScoreScore": "@detail.Qlty_TblSupplierPaymenttermsScore_Score",
"BackgroundColor": "@backgroundColor"

}

);

</text>

  • 17270
    Verified Answer
    Offline posted

    Hello Ronny,

    Thank you for posting in our community.

    What I can suggest for achieving your requirement is using template column option. It gives you the opportunity to add conditional templates and style the cell based on your requirement. We have a working sample illustrating my suggestion here. In this sample  we set a template for Unit Price column. Depending on the Delta Price column value we render up or down arrow next to the cell value. The template looks like the following:

     <script id="colTmpl" type="text/template">
            $ ${UnitPrice} 
            {{if parseInt(${UnitPrice}) >= parseInt(${DeltaPrice}) }} 
            <img width='10' height='15' src= 'https://www.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowUp.gif' />
            {{else}}
            <img width='10' height='15' src= 'https://www.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowDown.gif' />
            {{/if}}
        </script>
    

    This template is afterwards set to the template column option as following:

    { headerText: headerTextValues[1], key: "UnitPrice", type: 'number', width: 150, template: $( "#colTmpl" ).html() },

    In your scenario the template can be set in the Razor definition of the grid since the Template option takes string parameter. For example:

     .Columns(column =>
                    {
                        column.For(x => x.ProductName).HeaderText("Product Name").Width("30%");
                        column.For(x => x.CategoryName).HeaderText("Category").Width("30%");
                        column.For(x => x.UnitPrice).HeaderText("Unit Price").Width("20%").Template(" {{if parseInt(${UnitPrice}) >= 3 }} $ ${UnitPrice} <img width='10' height='15' src= 'https://www.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowUp.gif' />{{else}}<img width='10' height='15' src= 'https://www.igniteui.com/images/samples/templating-engine/colTemplateWithConditionalCell/arrowDown.gif' />{{/if}}");
                        column.For(x => x.UnitsInStock).HeaderText("Units In Stock").Width("20%");
                    })

    The template from the code snippet above checks the of the Unite Price column`s value and if it is less than 3 only an arrow down is rendered, in case that the value is greater than 3 the value and error up is rendered in the cell.

    Some topic that I believe you might find helpful are available here and here.

    Please test this approach on my your side and let me know whether it helps you achieve your requirement.