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. Image for the cookie policy date

Add hyperlink to a column without CommandColumn

Is it possible to add an onClick event to a row cell without using a command column?   I want to show a name of a user in a column but be able to open a dialog when the name is clicked?

5 Replies

VN Vignesh Natarajan Syncfusion Team January 21, 2020 01:40 AM

Hi Anthony,  
 
Greetings from Syncfusion support.  
 
Query: “I want to show a name of a user in a column but be able to open a dialog when the name is clicked? 
 
We suggest you to achieve your requirement using Column Template of EjsGrid. Using column template you can render custom component inside the Grid column. We suggest you to render a Span element with click event bounded to it. Refer the below code example.   
 
<EjsGrid DataSource="@Employees"> 
    <GridColumns> 
        <GridColumn Field="FirstName" HeaderText="Employee Name" TextAlign="TextAlign.Center" Width="120"> 
            <Template> 
                @{ 
                    <span @onclick="Clicked">@(context as EmployeeData).FirstName</span> 
                } 
            </Template> 
        </GridColumn> 
. . . . . .. . .  
    </GridColumns> 
</EjsGrid> 
@code{ 
    public List<EmployeeData> Employees { get; set; } 
    public void Clicked(MouseEventArgs Args) 
    { 
        // perform your action here, open a dialog here 
    } 
 
Note: To perform data operations in that column, kindly define Field property of grid column similar to column name.  
 
Refer our UG documentation for your reference 
 

Kindly get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 



SZ Szoke December 2, 2021 08:40 AM

Hello ! I try to follow the method in my own project, but I keep getting this error. What do I do wrong ?




Thanks in advance !



VN Vignesh Natarajan Syncfusion Team December 3, 2021 12:50 AM

Hi Szoke,  
 
Thanks for contacting Syncfusion support.  
 
Query: “! I try to follow the method in my own project, but I keep getting this error. What do I do wrong ? 
 
We have analyzed the provided screenshot and we are able to find the cause of the issue. Template Tag needs to be defined inside the GridColumn tag. You have defined outside of the GridColumn, hence the reported issue has occurred.   
 
Kindly define the Template tag inside the GridColumn tag to resolve the query. Refer the below code example.  
 
<SfGrid DataSource="@Employees"> 
    <GridColumns> 
        <GridColumn Field=@nameof(EmployeeData.EmployeeID) TextAlign="TextAlign.Center" HeaderText="Employee ID" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.Name) HeaderText="First Name" Width="130"></GridColumn> 
        <GridColumn Field=@nameof(EmployeeData.Title) HeaderText="Title" Width="120"></GridColumn> 
        <GridColumn HeaderText="User profile" TextAlign="TextAlign.Center" Width="120"> 
            <Template> 
                @{ 
                    var Employee = (context as EmployeeData); 
                    <div><a rel='nofollow' href="#" @onclick="@(() => Navigate(Employee))">View</a></div> 
                } 
            </Template> 
        </GridColumn> 
    </GridColumns> 
</SfGrid> 
 
  
 
Refer our ug documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan 



SZ Szoke replied to Vignesh Natarajan December 3, 2021 04:55 PM

Thank you for noticing the error!



VN Vignesh Natarajan Syncfusion Team December 3, 2021 10:34 PM

Hi Szoke,  

Thanks for the update.  

We are glad to hear that you have resolved your query.  

Kindly get back to us  if you have further queries.  

Regards, 
Vignesh Natarajan 



Loader.
Live Chat Icon For mobile
Up arrow icon