access hyperlink present in radgrid

[vaibhavi]

How can i access this hyperlink in javascript?

how to assign href to hyperlink in javascript

i have tried below code but no luck

 var masterTable = $find("<%= gvList.ClientID %>").get_masterTableView();
        var grid = document.getElementById("<%=gvList.ClientID %>");
        var elements = grid.getElementsByTagName("lnkTitle");
        var lnkTitle = $('#<%=gvList.ClientID %>').find('span[id$="lnkTitle"]')

Following is the gridview i am using 

<telerik:RadGrid ID="gvList" runat="server" ShowHeader="false" OnNeedDataSource="gvList_NeedDataSource" AllowCustomPaging="true"
                    AutoGenerateColumns="false" AllowPaging="true" OnItemDataBound="gvList_ItemDataBound" OnItemCommand="gvList_ItemCommand"
                    PageSize="10" CssClass="GridViewStyle" GridLines="None" PagerStyle-Mode="NextPrevAndNumeric"
                    PagerStyle-Position="TopAndBottom" PagerStyle-AlwaysVisible="true">
                    <MasterTableView TableLayout="Fixed" NoMasterRecordsText="No documents found." DataKeyNames="RESOURCE_ID">
                        <Columns>
                             
                            <telerik:GridTemplateColumn>
                                <ItemTemplate>
                                    <div class="zerogrid">
                                        <div class="col-1-6" style="cursor: pointer; position: relative; display: inline;">
                                            
                                            <asp:HyperLink ID="lnkThumbnail" runat="server" CssClass="cursor"  NavigateUrl="#">
                                                <%-- <asp:Image runat="server" Width="100" ID="imgThumb"  />--%>
                                               <%-- <asp:Image runat="server" Width="100" ID="imgThumb" ImageUrl='<%#Eval("THUMBNAIL")%>' />--%>
                                                 <asp:Image runat="server" Width="100" ID="imgThumb" ImageUrl="#" />
                                            </asp:HyperLink>
                                        </div>
                                        <div class="col-2-3 padding-tb-10">
                                    

                          
                                           <asp:HyperLink ID="lnkTitle" runat="server" class="mylink" CssClass="cursor" NavigateUrl="#">
                                             <%--<asp:HyperLink ID="lnkTitle" runat="server"  CssClass="cursor" >--%>
                                                <asp:Label ID="Label2" Font-Bold="true" Font-Size="Large" Text='<%# Eval("TITLE") %>'
                                                    runat="server"></asp:Label>
                                                  <asp:Label ID="Label1" Font-Bold="true" Font-Size="Large" Visible="false" Text='<%# Eval("RESOURCE_URL") %>'
                                                    runat="server"></asp:Label>
                                                 <asp:Label ID="LblType" Font-Bold="true" Font-Size="Large" Visible="false" Text='<%# Eval("RESOURCE_TYPE") %>'
                                                    runat="server"></asp:Label>
                                            </asp:HyperLink>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <asp:LinkButton ID="lnkEdit" Font-Underline="false" ToolTip="Edit" Visible="false" runat="server" CommandName="Edit">
                                            <span class="fa fa-2x fa-edit"></span>
                                        </asp:LinkButton>
                                            <br />
                                            <div style="padding: 5px;">
                                                <asp:Label ID="Label3" Font-Bold="false" Font-Size="Small" Text='<%# Eval("DESCRIPTION") %>'
                                                    runat="server"></asp:Label>
                                                <br /><br />
                                                <span style="font-size:12px;color:gray;">Last Updated: </span><asp:Label ID="lblLastUpdated" ForeColor="Gray" Font-Bold="false" Font-Size="12px" Text='<%# FormatDate(Eval("LAST_UPDATED")) %>'
                                                    runat="server"></asp:Label>
                                            </div>

                                            <%--<strong>Date:</strong>&nbsp;
                                            <asp:Label runat="server" ID="lblUploaddate" Text='<%# Convert.ToDateTime(Eval("LAST_UPDATED")).ToShortDateString() %>' />
                                            <strong>Size:</strong>&nbsp;
                                            <asp:Label runat="server" ID="Label1" Text='<%#Eval("FILE_SIZE") %>' />--%>
                                            <asp:HiddenField runat="server" ID="hdnISLock" Value='<%#Eval("IS_LOCKED") %>' />
                                            <asp:HiddenField runat="server" ID="hdnResourceURL" Value='<%#Eval("RESOURCE_URL") %>' />
                                            <asp:HiddenField runat="server" ID="hdnCreatedBy" Value='<%#Eval("CREATED_BY") %>' />
                                        </div>
                                        <%--<div class="col-1-6">
                                        <asp:Image runat="server" Width="20" ID="imgFav" ImageUrl='<%# DIS_ResourceManager.CommonData.IS_FAVORITE(DataBinder.Eval(Container, "DataItem.IS_FAV"))%>' />
                                    </div>--%>
                                    </div>
                                </ItemTemplate>
                            </telerik:GridTemplateColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>

[Tsvetomir]

Hi Vaibhavi,

I have recreated the scenario you are willing to achieve using the code snippet you have provided.

In order to access the Telerik controls on client-side you might opt for using the findControl or findElement methods or use the client-side event handlers of the Telerik controls to get a reference to their objects. More information could be found in the Access Telerik Controls on Client-Side help article.

What has to be done first is to have access to all elements in the RadGrid control and then get the specific HyperLink tag. The way I have accomplished it is in the pageLoad event but depending on your desire you might choose a custom event to meet your needs.

<script type="text/javascript">
    function pageLoad(sender, args) {
        var grid = $find("<%= gvList.ClientID %>");
        var tableView = grid.get_masterTableView();
        var items = tableView.get_dataItems();
    }

</script>

When we have the collection of items in the RadGrid the HyperLink has to be accessed using the findElement() method. After accessing the specific HyperLink element the way to assign a href is via the property href and the URL has to be passed as a string.

Please download and run the sample project attached to this response and test it to check whether this is the scenario you are willing to achieve. Should you need any further assistance, do not hesitate to contact us back.

Regards,
Tsvetomir
Progress Telerik