VB MVC Grid control - formatting

[Ross Woodward]

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

[Vignesh Natarajan]

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  

Link: https://www.jsviews.com/  

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

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication351923753313.zip  

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 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo  

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

https://help.syncfusion.com/aspnetmvc/grid/columns#column-template  

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.