1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Url.ActionLink in Grid Column

Url.ActionLink in Grid Column

Hi!

Two questions:

1] How do I add an ActionLink(....) to a column in a grid using tag helpers
2] How do I make each Column 's "headertext" bold and it's backcolor using tag helpers

Thanks




7 Replies
RS Renjith Singh Rajendran Syncfusion Team April 13, 2018 07:20 AM UTC

Hi Sarosh, 

Thanks for contacting Syncfusion support. 

Query 1 : How do I add an ActionLink(....) to a column in a grid using tag helpers 
 
We suspect that you would like to have links for the data in your column. We suggest you to use the column template feature of Grid. Please refer the documentation and online sample link below, 

Documentations :  
 

Please refer the code example below, 

<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" allowFiltering="true"> 
        <e-grid-columns> 
            ... 
            <e-grid-column field="ShipCity" headerText="Ship City" template="#temp" width="170"></e-grid-column> 
       </e-grid-columns> 
   </ejs-grid> 
</div> 
<script id="temp" type="text/x-template"> 
    @Html.ActionLink("${ShipCountry}", "Index") 
</script> 

Query 2 : How do I make each Column 's "headertext" bold and it's backcolor using tag helpers 
 
To apply customized styles to a column in Grid, we suggest you to use the customAttributes property of Grid. Please refer the code example below 

@{  
    Object custom = new Object(); 
    custom = (new { @class = "customcss"}); 
} 
<div> 
    <ejs-grid id="Grid" dataSource="ViewBag.DataSource" allowPaging="true" allowFiltering="true"> 
        <e-grid-columns> 
            ... 
           <e-grid-column field="Freight" customAttributes=custom headerText="Freight" format="C2" width="120"></e-grid-column> 
       </e-grid-columns> 
    </ejs-grid> 
</div> 
<style> 
    .e-grid .e-headercell.customcss 
    { 
        background-color: #2382c3; 
    } 
    .e-grid .customcss .e-headercelldiv { 
        font-weight: bold; 
    } 
</style> 

Please get back to us if you need further assistance. 

Regards, 
Renjith Sigh Rajendran. 


SW Sarosh Wadia April 16, 2018 01:20 AM UTC

Hi!

Both the suggestions worked as suggested.

Thanks

RS Renjith Singh Rajendran Syncfusion Team April 16, 2018 05:50 AM UTC

Hi Sarosh, 

Thanks for the update. 

We are happy to hear that your requirement has been achieved. 

Please get back to us if you need further assistance. 

Regards, 
Renjith Singh Rajendran. 


RS Rohit Shinde January 2, 2019 10:06 PM UTC

Hi,

This code does not work with EJS().Grid.

Here is how I am attempting to use it:
<div id="ControlRegion" style="max-width: 898px;">
    @Html.EJS().Grid("FlatGrid2").Width(805).GridLines(Syncfusion.EJ2.Grids.GridLine.Both).DataSource(ds => ds.Url(@Url.Action("UrlDatasource2", "Budget")).Adaptor("UrlAdaptor")).AllowSorting().AllowFiltering().AllowResizing(true).Columns(col =>
{
    col.Field("Category").HeaderText("Category").HeaderTextAlign(Syncfusion.EJ2.Grids.TextAlign.Center).Template("#customSubCatLink").Add();
    col.Field("Status").AllowFiltering(false).AllowSorting(false).HeaderText("Status").Format("N2").Template("#progessTemplate").Add();
}).SelectionSettings(select => select.Type(Syncfusion.EJ2.Grids.SelectionType.Multiple)).QueryCellInfo("queryCellInfo").PageSettings(page => page.PageCount(2)).EditSettings(edit => { edit.AllowAdding(false).AllowEditing(false).AllowDeleting(false).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog).ShowDeleteConfirmDialog(true); }).SortSettings(sort => sort.Columns(cols2)).FilterSettings(filter => { filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu); }).Toolbar(new List<string>() { "Search" }).Render()
</div>

<script type="text/x-jsrender" id="customSubCatLink">
    @Html.ActionLink("${Category}", "Index", "SubcategoryBudget", new { subCatName = "${Category}" }, null)
</script>

And here it what gets rendered:
SubcategoryBudget?subCatName=%24%7BCategory%7D

Thanks,
S


PS Pavithra Subramaniyam Syncfusion Team January 3, 2019 06:45 AM UTC

Hi Rohit, 
 
Essential JS 2 components uses ES6 template engine and hence we cannot use Html helpers inside the column template as most of the time the placeholder values will be escaped/encoded by the html helpers. Hence to use action link inside the cell, please use hyper link as follows.  
 
 
<script type="text/x-jsrender" id="customSubCatLink">  
    <a rel='nofollow' rel='nofollow' href='/SubcategoryBudget/Index/?subCatName=${Category}'>${Category}</a>  
</script>  
 
Regards, 
Pavithra S. 


FR Francesco January 13, 2019 06:08 PM UTC

This code is ok. But how insert Area Routing in ActionLink?

@Html.ActionLink("Orders", "Index", "Orders", new { area = "UGCustomer", id = "120"}, null)

MF Mohammed Farook J Syncfusion Team January 16, 2019 11:00 AM UTC

Hi Francesco, 
 
To render “ActionLink” inside the cell in Grid in MVC platform, we suggest to use the corresponding “hyperlink”(i.e. anchor tag) of that “ActionLink”. We suggest you to use the below code to achieve your requirement, 
 
 
<script type="text/x-jsrender" id="customSubCatLink"> 
   <a rel='nofollow' href="/Orders/Index/120?area=UGCustomer">Orders</a>     //This is corresponding anchor tag for the provided ActionLink 
</script>  
 
 
Please get back to us if you need further assistance. 
 
Regards, 
J Mohammed Farook 
 


Loader.
Up arrow icon