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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trouble displaying hyperlink inside grid column.

Thread ID:

Created:

Updated:

Platform:

Replies:

144587 May 13,2019 03:02 PM UTC May 16,2019 10:20 AM UTC ASP.NET Web Forms 9
loading
Tags: Grid
Alex Jermy
Asked On May 13, 2019 03:02 PM UTC

Hi,

I have seen forum posts about trying to programmatically generate URLs from column data in a SQL database. I am trying to do that in my project but having a great deal of trouble accessing the variables in the aspx page using this '{{:variable:}}' notation.

It seems not to be binding the variables in the code behind.

I have attached my code, zipped, for reference.

Thanks,

Alex

Attachment: Bands_722279a3.zip

Vignesh Natarajan [Syncfusion]
Replied On May 14, 2019 05:03 AM UTC

Hi Alex,  
 
Thanks for contacting Syncfusion forums.  
 
Query: “I have seen forum posts about trying to programmatically generate URLs from column data in a SQL database 
 
From your query we understand that you are facing issue while generating the URL from the column data. We use JS render concept to access the values to Grid cell. From your code example we have found that you have used the js ender tag wrongly. Kindly refer the below modified code example for your reference 
 
<ej:Grid AllowSearching="true" AllowSorting="true" AllowResizeToFit="true" ID="MilestonesGrid" AllowFiltering="true" AllowGrouping="true" 
                AllowPaging="true" IsResponsive="true" runat="server" OnServerExcelExporting="MilestonesGrid_ServerExcelExporting"> 
                <FilterSettings FilterType="Excel"></FilterSettings> 
                <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true" ShowDeleteConfirmDialog="true"></EditSettings> 
                <ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport,add,edit,delete,update,cancel"></ToolbarSettings> 
                <Columns> 
                    <ej:Column Field="URL" HeaderText="Edit" Template="<a rel='nofollow' href='http://project_milestones_form.aspx?u={{:CustomerID}}&amp;e&#61;{{:EmployeeID}}'>Click Here</a>" TextAlign="Center" Width="90" /> 
                    <ej:Column Field="OrderID" HeaderText="Trade" /> 
                    <ej:Column Field="EmployeeID" HeaderText="Version ID" /> 
                    <ej:Column Field="CustomerID" HeaderText="Version Date" /> 
                    <ej:Column Field="Freight" HeaderText="Version Date" /> 
                    ……………………………………………………………….. 
                </Columns> 
            </ej:Grid> 
 
 
Refer the below screenshot for the output 
 
 
 
 
Note: same template defnition can be used inside the template script tag.   
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 


Alex Jermy
Replied On May 14, 2019 08:11 AM UTC

Hi,

Thanks for the quick response.

I have tried removing the second colon from the js render code, but I am getting this error.

'Literal content is not allowed within a 'System.Collections.Generic.List'.

Here is my control:

                    <ej:Column HeaderText="Edit" Template="<a rel='nofollow' href='http://project_milestones_form.aspx?u={{:user}}&amp;e&#61;{{:ent}}&amp;i&#61;{{:Milestone_ID}} target="_blank" title=""></a></ej:Column>

Thanks,

Alex

Vignesh Natarajan [Syncfusion]
Replied On May 14, 2019 09:37 AM UTC

Hi Alex,  
 
Thanks for the update. 
 
Query: “I have tried removing the second colon from the js render code, but I am getting this error. 
 
We are able to reproduce the reported issue at our end while using your code example (template column). We have analyzed the provided code example and found that column was not properly closed and hence error occur while parsing the template.  
 
Refer the below modified code example 
 
<ej:Grid ID="EmployeesGrid" runat="server" AllowPaging="True"> 
            <PageSettings PageSize="4"></PageSettings> 
            <Columns> 
                 <ej:Column HeaderText="Edit" Template="<a rel='nofollow' href='http://project_milestones_form.aspx?u={{:FirstName}}&amp;e&#61;{{:LastName}}&amp;i&#61;{{:EmployeeID}}' target='_blank' title=''>{{:EmployeeID}}</a>"></ej:Column> 
 
                <ej:Column Field="EmployeeID" HeaderText="Employee ID" IsPrimaryKey="True" TextAlign="Right" Width="100" /> 
                <ej:Column Field="FirstName" HeaderText="First Name" Width="100" /> 
                <ej:Column Field="LastName" HeaderText="Last Name" Width="100" /> 
                <ej:Column Field="BirthDate" HeaderText="Birth Date" TextAlign="Right" Width="100" Format="{0:MM/dd/yyyy}" /> 
                <ej:Column Field="Country" Width="100" HeaderText="Country" /> 
            </Columns> 
        </ej:Grid> 
 
Note: Kindly ensure that you have closed the anchor tag and ej:Column properly.  
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 


Alex Jermy
Replied On May 14, 2019 10:04 AM UTC

Hi,

Thanks for the quick response!

I have followed your advice and amended my column and closed it properly, but this stops the grid being populated with any data at all. It results in the grid displaying, but every cell is empty (but strangely there are still many cells).

My code is as follows:

                    <ej:Column HeaderText="Edit" Template="<a rel='nofollow' href='http://project_milestones_form.aspx?u={{:user}}&amp;e&#61;{{:ent}}&amp;i&#61;{{:Milestone_ID}}</a>" Width="600px"></ej:Column>

If I comment out this line, the grid displays and is also populated with the correct data. Could it be a problem with the JS Render? Do I perhaps need to reference something unusual for the '{{:variable}}' syntax to work?

Vignesh Natarajan [Syncfusion]
Replied On May 14, 2019 10:23 AM UTC

Hi Alex,  
 
Query: “ It results in the grid displaying, but every cell is empty (but strangely there are still many cells). 
 
Still the anchor tag was not properly closed and defined. Please refer the below code example for the issue 
 
<ej:Column HeaderText="Edit" Template="<a rel='nofollow' href='http://project_milestones_form.aspx?u={{:user}}&amp;e&#61;{{:ent}}&amp;i&#61;{{:Milestone_ID}}</a>" Width="600px"></ej:Column> 
 
In above code example single quotation and anchor tag was not properly closed. This is the cause of the issue. Please refer the below modified code example 
 
<ej:Column HeaderText="Edit" Template="<a rel='nofollow' href='http://project_milestones_form.aspx?u={{:user}}&amp;e&#61;{{:ent}}&amp;i&#61;{{:Milestone_ID}}'></a>" Width="600px"></ej:Column> 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh Natarajan. 


Alex Jermy
Replied On May 14, 2019 10:56 AM UTC

Hi,

Today the Syncfusion form is working really fast!

Thanks very much.

I am partially sighted so I sometimes struggle with these small differences in punctuation and syntax, but after I made your additions I can now get the grid to render, and populate with data, but nothing displays in the cell in which I hope to display a hyperlink. 

My column is now identical to the one you sent me in the last answer. My code is now as follows:

                    <ej:Column HeaderText="Edit" Template="<a rel='nofollow' rel='nofollow' href='http://project_milestones_form.aspx?u={{:user}}&amp;e&#61;{{:ent}}&amp;i&#61;{{:Milestone_ID}}'></a>" Width="600px"></ej:Column>

Even if I hardcode the values, as follows, nothing is displayed in this column. This is the first time I have used the 'Target' argument in a grid or a column and I am wondering if I am missing something?

Thanks,

Alex

Vignesh Natarajan [Syncfusion]
Replied On May 15, 2019 04:02 AM UTC

Hi Alex,  
 
Thanks for the update.  
 
Query: “Even if I hardcode the values, as follows, nothing is displayed in this column. 
 
In your Template definition of column you have defined the anchor tag correctly but you have not assigned any value to it. So the empty column is displayed in it. Refer the below modified code example 
 
 <ej:Column HeaderText="Edit" Template="<a rel='nofollow' rel='nofollow' rel='nofollow' href='http://project_milestones_form.aspx?u={{:user}}&amp;e&#61;{{:ent}}&amp;i&#61;{{:Milestone_ID}}'>{{:Milestone_ID}}</a>" Width="600px"></ej:Column> 
 
Note: you need to specify the value to be displayed inside anchor tag. 
 
Refer the general link for your reference 

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


Alex Jermy
Replied On May 15, 2019 02:54 PM UTC

Hi,

Sorry in my previous post I meant to state that I had not used the 'template' control of the column before.

I am slightly confused by your answer though: Why have you written the 'rel='nofollow'' thing 3 times? And why have you repeated '{{:Milestone_ID}} twice? Also why have you highlights the '{{:Milestone_ID}} and then provided a quote about the 'anchor' tag?

Thanks,

Alex

Vignesh Natarajan [Syncfusion]
Replied On May 16, 2019 10:20 AM UTC

Hi Alex, 
 
Sorry for the inconvenience caused. 
 
Query 1: Why have you written the 'rel='nofollow'' thing 3 times?  
 
By mistake the 'rel='nofollow'' is mentioned three times. Please remove the multiple reference. 
 
Query 2:And why have you repeated '{{:Milestone_ID}} twice?  
 
{{:Milestone_ID}} is nothing but the value of the Milestone_ID. To render the column template, we need to assign the value in the template definition. So, one is related to the template value and next one is  related to the Url. (i.e. For example if the url is “http://project_milestones_form.aspx?345”  then in the template Url we need define like 'http://project_milestones_form.aspx?{{:Milestone_ID}}' ) 
 
Query 3: Also why have you highlights the '{{:Milestone_ID}} and then provided a quote about the 'anchor' tag? 
 
We have just highlighted the Milestone_ID to show you that if you have used Url with number value (i.e. column value) then you need define the url with column value. If you have using the common Url, then there is no need of using this. 
 
Please refer the modified code example, 
 
 
  <ej:Grid ID="OrdersGrid" ……… > 
 
……………………………….. 
 
                    <Columns> 
 
                        <ej:Column HeaderText="Edit" Template="<a rel='nofollow' rel='nofollow' href='http://project_milestones_form.aspx?{{:OrderID}}'>{{:OrderID}}</a>" Width="60px"></ej:Column> 
 
…………………………………………….. 
                    </Columns> 
</ej:Grid> 
 
 
 
Output: 
 
 
Please get back to us, if you need further assistance. We will be happy to assist you. 
 
Regards, 
Vignesh Natarajan. 
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon