How to add hyperlinks to text displayed in grid

[Nithin Bodla]

How can I add hyperlink to text in one of the column in the grid?

[Rahul Narayanasamy]

Hi Nithin, 

 

Thanks for contacting Syncfusion support. 

 

Query: How can I add hyperlink to text in one of the column in the grid? 

 

We have validated your query and you can achieve your requirement by using the below method. You can add hyperlink to one of the columns in the grid by using column template. Please find the below code example and documentation link for your reference. 

 

[Code example] 

<div> 

    <ejs-grid id="Grid" actionComplete="actionComplete" allowPaging="true"> 

        <e-datamanager url="/Home/UrlDatasource" adaptor="UrlAdaptor"></e-datamanager> 

        <e-grid-editSettings allowAdding="true"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="120"></e-grid-column> 

            <e-grid-column field="ShipCity" headerText="Ship City" template="#template" width="170"></e-grid-column> 

            <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

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

    <div> 

        <a rel='nofollow' href="#">${ShipCity}</a>     //put your hyperlink here  

    </div> 

</script> 

We have prepared a simple sample based on your requirement. Please find the sample in below link. 

 

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/TestSample_Hlink-546572904 

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns.html#column-template 

Please get back to us if you need further assistance on this. 

Regards, 

Rahul Narayanasamy. 

[Nithin Bodla]

Sorry I had forgot to mention,I am not explicitly specifying columns in my grid, they are auto generated from DataSource.
How to template the columns which are auto generated?

How to add extra columns to grid which has auto generated columns(from data source)?

Error while trying to access the selected row data:

...

<script> 

    function rowSelected(args) {  

        var grid = $("#Grid").ejGrid("instance"); 

        ....

[Prasanna Kumar Viswanathan]

Hi Nithin, 

Query 1: How to template the columns which are auto generated? 

 

We can achieve your requirement using the create event and columns method of ejGrid control. In the below code example we have update the column template for the CustomerID column in Grid dataSource. 

 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

        .AllowSorting() 

        

        .ClientSideEvents(evs=> evs.Create("onGridCreateEvent"))) 

) 

 

<script type="text/javascript"> 

 

   function onGridCreateEvent(args) { 

 

        for (var i = 0; i < this.model.columns.length; i++) { 

 

            if (this.model.columns[i]['field'] == 'CustomerID') { 

                this.model.columns[i]['template'] = "#template"; 

            } 

        } 

        this.columns(this.model.columns); 

    } 

 

</script> 

 

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

    <div> 

        <a rel='nofollow' rel='nofollow' href="#">{{:CustomerID}}</a> 

    </div> 

</script> 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:columns 

 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-template 

Link: https://help.syncfusion.com/api/js/ejgrid#events:create 

Query 2: How to add extra columns to grid which has auto generated columns(from data source)? 

 

By default, all the fields which is in the dataSource get bind to the Grid columns. If you want to add any additional column in Grid then we suggest you to use the columns method of ejGrid control. 

 

Refer the help documentation. 

 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:columns 

Query 3: Error while trying to access the selected row data ? 

 

As per your given detail you have used rowSelected event of ejGrid. The rowSelected event will be triggered after the row is selected. In this event we can access the selected row data using arguments.  

 

Refer the below code example. 

 

 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource) 

         

          --- 

 

       .ClientSideEvents(evs=> evs.RowSelected("onGridRowSelectedEvent")) 

) 

 

<script type="text/javascript"> 

 

    function onGridRowSelectedEvent(args) { 

 

        var selectedData = args.selectedData; // you can get the selected data 

    } 

 

</script> 

 

 

Refer the help documentation. 

 

Link: https://help.syncfusion.com/api/js/ejgrid#events:rowselected 

If you still facing the same issue then please provide the following details for better assistance. 

1. Share the stack trace detail if you facing any script errors in console window.
2. Share the full Grid code example.
3. Share the Essential Studio version details.

 

We have prepared a sample and it can be downloadable from the below location. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/139042/ze/SyncfusionMvcApplication11_(12)-475401111.zip 

Regards, 

Prasanna Kumar N.S.V