Creating dynamic hyperlink in grid control using column template

I want to build a dynamic hyperlink and pass a value from one of the columns in the grid as a parameter. Ex: webform.aspx?ID=parmvalue
If I want to build the entire hyperlink URL and make parmvalue = the column value in LoadNo column below, how would I do it?

Here is my grid markup:

<ej:Grid ID="OrdersGrid" runat="server" AllowFiltering="True" AllowTextWrap="True" AllowScrolling="true">
            <Columns>
                <ej:Column Field="LoadNo" HeaderText="Load No" IsPrimaryKey="true" TextAlign="Right" Width="80" />
                <ej:Column Field="EquipmentType" HeaderText="Equip Type" Width="70" />                
                <ej:Column Field="PUDateTime" HeaderText="P/U Date" Format="{0:MM/dd/yyyy hh:mm}" TextAlign="Right" Width="90" />
                <ej:Column Field="Distance" HeaderText="Miles" TextAlign="Right" Width="70" />              
                <ej:Column Field="OriginCity" HeaderText="Origin City" Width="120" />
                <ej:Column Field="OriginSt" HeaderText="Origin ST" Width="70" />
                <ej:Column Field="DestCity" HeaderText="Dest City" Width="120" />
                <ej:Column Field="DestSt" HeaderText="Dest ST" Width="70" />
                <ej:Column Field="TotalStops" HeaderText="Stops" Width="50" />
                <ej:Column HeaderText="View Details" Template="<a rel='nofollow' href='#'>View</a>" Width="50"/>   
            </Columns>
            <ScrollSettings Height="300" Width="880" ></ScrollSettings>
            <FilterSettings FilterType="Excel"></FilterSettings>
        </ej:Grid>

1 Reply

FS Farveen Sulthana Thameeztheen Basha Syncfusion Team December 19, 2017 04:32 PM UTC

Hi Jeff, 

Thanks for contacting Syncfusion Support. 

We have achieved your requirement “add HyperLink column and pass values in Grid” using column Template feature of the Grid.  By using  column Template we can place hyperlink using Template property and also add the required parameters to the server side as like below code example.  
 
<ej:Grid ID="FlatGrid" runat="server" IsResponsive="true"  AllowPaging="True"> 
     <ToolbarSettings ShowToolbar="true" ToolbarItems="excelExport,wordExport,pdfExport"></ToolbarSettings> 
            <Columns> 
                 <ej:Column HeaderText="HyperLink" Template="<a rel='nofollow' href='//www.syncfusion.com/?OrderID={{:OrderID}}'>Click Me</a>" TextAlign="Center/> 
                 
                .  . . 
            </Columns> 
            
   </ej:Grid> 

Please refer to the screenshot:- 

 

Please refer to the sample and documentation  link:- 




Regards, 

Farveen sulthana T 



Loader.
Up arrow icon