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:

Created:

Updated:

Platform:

Replies:

133006 Oct 3,2017 07:12 PM UTC Oct 4,2017 06:16 PM UTC ASP.NET MVC 1
loading
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

Ross



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() 
        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.  





CONFIRMATION

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.

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

;