Add hyperlink to a column without CommandColumn

[Anthony]

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?

[Vignesh Natarajan]

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 

 

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

Kindly get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Szoke]

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 !

[Vignesh Natarajan]

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 

 

https://blazor.syncfusion.com/documentation/datagrid/columns#using-hyperlink-column-and-performing-routing-on-click 

https://blazor.syncfusion.com/documentation/datagrid/columns#column-template  

https://blazor.syncfusion.com/documentation/datagrid/templates#template-context  

 

Please get back to us if you have further queries.  

 

Regards, 

Vignesh Natarajan 

[Szoke]

Thank you for noticing the error!

[Vignesh Natarajan]

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