Trouble displaying hyperlink inside grid column.

[Alex Jermy]

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]

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]

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]

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]

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]

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]

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]

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 

https://www.w3schools.com/tags/tag_a.asp  

 

Please get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan.  

[Alex Jermy]

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]

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.