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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Display column value as Hyperlink

Thread ID:

Created:

Updated:

Platform:

Replies:

117788 Dec 15,2014 03:04 AM UTC Dec 16,2014 04:05 AM UTC JavaScript 3
loading
Tags: ejGrid
Som Nuantawee
Asked On December 15, 2014 03:04 AM UTC

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 [Syncfusion]
Replied On December 15, 2014 09:49 AM UTC

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
Replied On December 15, 2014 11:22 PM UTC

Thanks Sellappandi for the quick response.
 
The solution is exactly what I was looking for.
 
Regards

Sellappandi Ramu [Syncfusion]
Replied On December 16, 2014 04:05 AM UTC

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


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;