We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

VB MVC Grid control - formatting

Thread ID:





133006 Oct 3,2017 07:12 PM UTC Oct 4,2017 06:16 PM UTC ASP.NET MVC 1
Tags: Grid
Ross Woodward
Asked On October 3, 2017 07:12 PM UTC

Please forgive the silly questions, but I can't seem to find the answers online :(

1 - in the grid control, i've got a grouping by intStatus - so all status 1's have a group header, all status2's etc.

We have a traffic light system so i'd like the status1 group header to be red, the status2 group header to be amber, and the status3 group header to be green.

Is this possible? through the style override I think you can only change all of the headers?

2 - in the grid control, i have a column for warranty date. If the warranty date CELL is before today, i'd like that in red, if its after today i'd like it in green.
I've tried setting up a querycellinfo event but can't seem to get the right syntax..

3 - html link in a cell. I have set the template up for 1 cell to create a hyperlink, however none is showing. if i hard code a value in the link it works fine, but I can't display the stkID between the anchor tags. Is this C# syntax not VB?

col.Field("stkID").Template("<a rel='nofollow' href='/Stock/StockItem?SerialNo={{:stkid}}'>{{:stkid}}</a>").Width(50).Add()

Sorry to be a pain, but this is causing me immense frustration!

Thanks in advance


Vignesh Natarajan [Syncfusion]
Replied On October 4, 2017 06:16 PM UTC

Hi Ross, 

Thanks for using Syncfusion products. 

We have achieved your requirement through QuerycellInfo and ActionComplete event of Grid. Please refer the below code snippet. 

       col.Field("ShipCountry").HeaderText("Ship Country").EditType(EditingType.Dropdown).Width(95).Add() 
        col.Field("OrderDate").HeaderText("Order Date").EditType(EditingType.Datepicker).Format("{0:MM/dd/yyyy}").Width(75).Add() 
    End Sub) 
   End Sub) 
<script type="text/javascript"> 
    function cellinfo(args) { 
        if (args.column.field == "OrderDate" && (Number(args.data.OrderDate) == Number(new Date("07/04/1996")))) 
        else if (args.column.field == "OrderDate" && (Number(args.data.OrderDate) < Number(new Date()))) 
    function complete(args) { 
        if (args.requestType == "grouping") { 

In above codes, we have used specific date value to display the Green color. If you want to compare with current date use new Date() to get current date
JS Style tag 

<style type="text/css"> 
        color:yellow !important 
        color:red !important 
        color: green !important; 
<script type="text/x-jsrender" id="columnTemplate"> 
    <a rel='nofollow' href="https://www.syncfusion.com/"> Click </a> 
<script type="text/x-jsrender" id="column"> 
    <a rel='nofollow' href="https://www.syncfusion.com/{{:EmployeeID}}.png" >Link</a> 

Please refer the online documentation for JSRender  

For your Convenience, we have prepared a sample which can be downloaded from below link 

Please refer the below screenshot to highlight specific column based the value 


Refer below screenshot for display different color for Group header 


Please refer our online documentation for your reference 

If we misunderstood your requirement, please get back to us with more detail so that we can help you as soon as possible. 

Vignesh Natarajan.  


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon