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. Image for the cookie policy date

VB MVC Grid control - formatting

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

Ross



1 Reply

VN Vignesh Natarajan Syncfusion Team 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() 
        col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.JavaScript.TextAlign.Right).Width(75).Format("{0:C}").Add() 
        col.Template("#columnTemplate").TextAlign(TextAlign.Center).Width(110).Add() 
        col.Template("#column").TextAlign(TextAlign.Center).Width(110).Add() 
    End Sub) 
gridbuilder.ClientSideEvents( 
   Sub(cell) 
       cell.QueryCellInfo("cellinfo").ActionComplete("complete") 
 
   End Sub) 
 
                         . 
                         . 
                         . 
 
 
<script type="text/javascript"> 
    function cellinfo(args) { 
        if (args.column.field == "OrderDate" && (Number(args.data.OrderDate) == Number(new Date("07/04/1996")))) 
            $(args.cell).addClass("green"); 
        else if (args.column.field == "OrderDate" && (Number(args.data.OrderDate) < Number(new Date()))) 
            $(args.cell).addClass("red"); 
    } 
    function complete(args) { 
        if (args.requestType == "grouping") { 
            $($("td.e-groupcaption").get(0)).addClass("amber"); 
            $($("td.e-groupcaption").get(1)).addClass("stop") 
            $($("td.e-groupcaption").get(2)).addClass("start") 
        } 
    } 
</script> 

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"> 
    .red{ 
        background-color:orangered; 
    } 
    .green{ 
        background-color:greenyellow; 
    } 
    .amber{ 
        color:yellow !important 
    } 
    .stop{ 
        color:red !important 
 
    } 
    .start{ 
        color: green !important; 
    } 
</style> 
<script type="text/x-jsrender" id="columnTemplate"> 
    <a rel='nofollow' href="https://www.syncfusion.com/"> Click </a> 
</script> 
<script type="text/x-jsrender" id="column"> 
    <a rel='nofollow' href="https://www.syncfusion.com/{{:EmployeeID}}.png" >Link</a> 
</script> 


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. 

Regards, 
Vignesh Natarajan.  





Loader.
Live Chat Icon For mobile
Up arrow icon