1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Hyperlink in Grid

Hyperlink in Grid

Hello,

I would like to customize hyperlinks in my grid. I added a class "grid-link" to my element <a> in order to change the color and text-decoration. When i click on this link, I want to remove the "grid-link" class and add "grid-link-visited"class in order to remove text-decoration and change the color.

I use a template on my column where hyperlinks are :

col.Template = "<a onClick=\"DownloadFile()\" class=\"pointer-cursor grid-link\">${" + header.Field + "}</a>";

When i click on the link, i use a javascript function in order to download a file. I didn't managed to get the clicked cell and change his class.

I recently changed my project from EJ1 to EJ2, is it a compatibility problem ? Template is used differently in EJ2 ? If not, how should i proceed ?

Regards,
David.

3 Replies
PS Pavithra Subramaniyam Syncfusion Team July 11, 2018 11:13 AM UTC

Hi David, 

Thanks for contacting Syncfusion support. 

Query #1: I recently changed my project from EJ1 to EJ2, is it a compatibility problem 

Now both EJ1 and EJ2 controls work together. We have create an ASP.NET MVC sample, In which we have included both Essential JavaScript 1 and Essential JavaScript2 packages. kindly please refer the below code snippet and sample for more information. 

[WebConfig] 
<system.web.webPages.razor> 
      <namespaces> 
        . . . . 
        <add namespace="Syncfusion.EJ2"/> 
        <add namespace="Syncfusion.JavaScript" /> 
        <add namespace="Syncfusion.JavaScript.DataVisualization" /> 
        <add namespace="Syncfusion.MVC.EJ" /> 
      </namespaces> 
    </pages> 
  </system.web.webPages.razor> 

Layout.cshtml  
<html> 
    //Syncfusion Essential JS 2 Styles  
    <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/styles/compatibility/material.css" /> 
    @* Syncfusion Essential JS 1 Styles *@ 
    @* Syncfusion Essential JS 1 Scripts *@     
    <script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.0.0.min.js" type="text/javascript"></script> 
    <script src="https://cdn.syncfusion.com/16.1.0.24/js/web/ej.web.all.min.js" type="text/javascript"></script> 
    @* Syncfusion Essential JS 2 Scripts *@ 
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 
   . . . . . . 
  @Html.EJS().ScriptManager(); 
@Html.EJ().ScriptManager(); 
</html> 
 



Query #2: Template is used differently in EJ2 ? If not, how should i proceed ? 

For Essential JavaScript 2 Grid we suggest you to use template literals (“${}”) for templates. WE have prepared a simple sample based on your query. Please refer to the below code example, Documentation link and sample link. 

[index.chtml] 
@Html.EJS().Grid("FlatGrid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto") 
.Height("359").Columns(col => 
   { 
       col.HeaderText("Employee Image").Template("#template").Width("150").Add(); 
       col.Field("EmployeeID").HeaderText("Employee ID").Width("120").Add(); 
       col.Field("OrderID").HeaderText("Name").Width("125").Add(); 
     
   }).Render() 
 
    <style> 
        a.grid-link { 
           color:blue; 
        } 
        a.grid-link-visited { 
            color: red; 
        } 
    </style> 
 
    <script id="template" type="text/x-template"> 
        <a onClick="DownloadFile(this)" class="pointer-cursor grid-link">${EmployeeID}</a> 
    </script> 
<script> 
    function DownloadFile(e) { 
        e.classList.remove("grid-link"); 
        e.classList.add("grid-link-visited") 
    } 
    </script> 


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

Regards, 
Pavithra S. 


DC David Caraiannis July 11, 2018 01:42 PM UTC

Hello,

It worked fine. Thank you.

Regards,
David.

PS Pavithra Subramaniyam Syncfusion Team July 12, 2018 08:46 AM UTC

Hi David, 

Thanks for your update. 

We are glad to hear that the provided information helps you. 

Please contact us if you have any queries. 

Regards, 
Pavithra S. 


Loader.
Up arrow icon