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>
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.
What if the value we want to check isn't in the list of columns? Using the example from the code examples provided, if there was another value called Discount, that isn't mapped to a column, but I wanted to use it in the template. Is that possible? Would it be possible on a Multi-row layout grid as well?