Hyperlinks based on condition in cell

[Eddie Willcox]

Hi,

I would like to add hyperlinks in my grid rows. These hyperlinks must only display based on a certain condition. Is this possible? The hyperlinks should also have parameters attached to the for the specific row.

[Sujith Kumar Rajkumar]

Hi Eddie, 

 

Greetings from Syncfusion support. 

 

You can achieve your requirement by using the column template and conditional rendering(using if, else statements) as demonstrated in the below code snippet, 

 

<div id="ControlRegion"> 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

   { 

       col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add(); 

       col.Field("Country").Template("#template").Width("150").Add(); 

   }).Render() 

</div> 

 

<script id="template" type="text/x-template">  

    <div> 

        ${if(Country)} 

            <a rel='nofollow' href=https://en.wikipedia.org/wiki/${Country}>${Country}</a> 

        ${else} 

            <span>Not provided</span> 

        ${/if} 

    </div> 

</script> 

 

We have prepared a sample based on this for your reference. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/170347/ze/GridWithColumnTemplate376641114 

 

More details on column template and conditional rendering in template can be checked in the below documentation links, 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#column-template 

                               https://ej2.syncfusion.com/aspnetmvc/documentation/grid/columns/#using-condition-template 

 

Please get back to us if you require any further assistance. 

 

Regards, 

Sujith R 

[Eddie Willcox]

Thanks for the sample.

Can the condition be based on other cells in the grid?

As in your example provided, can the template in country column be based on a condition in the employee id column?

if employee id = 1 then rel='nofollow' href must contain employee id and country values as parameters

[Eddie Willcox]

I have answered my own question. Yes, the condition can be based on other cells in the grid.

Thank you for your assistance

[Ajith Govarthan]

Hi Eddie, 

Thanks for the update. 

Based on your query, you want render anchor tag elements based on other column values in your grid application. So, we have prepared sample in that we have rendered the anchor tag elements using column template based on the employee id values for Country column. For your convenience we have attached the sample, please refer them for your reference. 

Code example: 

DataGridFeatures.cshtml 

@{ 

    ViewBag.Title = "DataGridFeatures"; 

} 

 

<div id="ControlRegion"> 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

   { 

       col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add(); 

       col.Field("FirstName").HeaderText("Name").Width("125").Add(); 

       col.Field("Title").HeaderText("Title").Width("170").Add(); 

       col.Field("Country").Template("#template").Width("150").Add(); 

       col.Field("ReportsTo").HeaderText("ReportsTo").Width("120").Add(); 

   }).Render() 

</div> 

<script id="template" type="text/x-template">  

    <div> 

        ${if(EmployeeID != 1)} 

        <a rel='nofollow' href=https://en.wikipedia.org/wiki/${Country}>${Country}</a> 

        ${else} 

        <a rel='nofollow' href=https://en.wikipedia.org/wiki/${Country} rel="nofollow">${EmployeeID} </a> 

        ${/if} 

    </div> 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridWithColumnTemplate-1026430297.zip 

Please get back to us if you need further assistance. 

Regards, 

Ajith G.