Display column value as Hyperlink

[Som Nuantawee]

Hi,

 

I have created a Grid using JavaScript in Version 12.3.0.36

 

The grid is populated using data from a SharePoint list. The SharePoint data source returns a URL column to the Grid. The column is displayed as a string and not as a Hyperlink.

 

Could you please let me know if there is a way to display the URL as a Hyperlink in the Grid and supply a friendly description for the URL?

 

Also is there a way to add a Link Button to the Grid and use the returned URL value?

 

Kind Regards

 

 

Attachment: Hyperlink_Column_93600abc.zip

[Sellappandi Ramu]

Hi Som,

 

Thanks for using Syncfusion Products.

 

We have achieved your requirement “display the URL as a Hyperlink in grid column” by using column Template feature in following workaround solution. Please refer the following code snippet.

 

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

        <a id="{{:Link}}" rel='nofollow' href="{{:Link}}">{{:Link}}</a>

    </script>

    <div id="Grid"></div>

    <script>

        $(function () {

            var Data = [{ "No": 1, "Name": "John", "Link": "http://js.syncfusion.com/demos/web/#!/flat" }, { "No": 2, "Name": "Smith", "Link": "http://mvc.syncfusion.com/demos/web" }, { "No": 3, "Name": "Tomps", "Link": "http://asp.syncfusion.com/demos/web/" }, { "No": 4, "Name": "Hanar", "Link": "http://www.syncfusion.com/" }, { "No": 5, "Name": "Reek", "Link": "http://help.syncfusion.com/web" }]

            $("#Grid").ejGrid({

                dataSource: Data,

                columns: [

                              . . .

                              { headerText: "Links", template: "#temp", width: 110 }],

            });

        });

    </script>

For your convenience we have created a sample and the same can be downloaded from the following link.

Sample Link: http://www.syncfusion.com/downloads/support/directtrac/general/Links-1275118796.zip

Please try the above sample and let us know if you would require any further assistance.

Regards,
Sellappandi R

[Som Nuantawee]

Thanks Sellappandi for the quick response.

 

The solution is exactly what I was looking for.

 

Regards

[Sellappandi Ramu]

Hi Som,

 

Thanks for your update.

 

Please get back to us if you require further assistance. We will be glad to assist you.

 

Regards,

Sellappandi R