Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Added hyperlink on cell text is lost after selecting a row

3 Answers 139 Views
Grid
This is a migrated thread and some comments may be shown as answers.
CP
Top achievements
Rank 1
Iron
CP asked on 17 Mar 2017, 02:53 PM

I have a grid where i have attached a hyperlink control to the text in each cell. This allows the user to select a whole row by clicking the white space but clicking the text will (eventually) open up an editor dialog for the row data. The hyperlink appears as expected when the grid is first displayed but if a row is selected then the linking is lost because it is created within the ItemDataBound server side event which is not fired again. I tried adding the link back in the ItemCreated event but the cell contents don't appear to be populated at this point and my grid was displaying with empty cells. Can anyone suggest where I can add my hyperling creation such that it will correctly display on row selection and subsequent repaint of the grid ?

My grid code ....

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PriceList.aspx.cs" Inherits="GridWithFollowTabs.PriceList" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<!DOCTYPE html>
 
<html>
    <head runat="server">
        <title></title>
        <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
 
        <link href="Skins/Max2017/Ajax.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Button.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Grid.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Input.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Menu.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Splitter.Max2017.css" rel="stylesheet" type="text/css" />
        <link href="Skins/Max2017/Window.Max2017.css" rel="stylesheet" type="text/css" />
 
        <style type="text/css">
            html, body, form, RadPane { height: 100%; margin: 0px; padding: 0px; }           
            div.RadMenu .rmLast, floatri { float: right !important; }           
            .rgCommandRow { visibility: collapse; }
             
            .clickable { cursor:pointer; font-weight:normal; text-decoration:none; }
            .clickable:hover { text-decoration: underline !important; }
             
            .mainSelector{ cursor:pointer; width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; position:absolute; }
            .mainSelectorChecked{ width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; background-image:url(../images/ico_entry_checked.png); background-repeat:no-repeat; }
            .mainSelectorUnChecked { width : 24px; float: left; clear: left; margin-top:2px; padding:0px; padding-top:2px; padding-bottom:2px; background-image:url(../images/ico_entry_unchecked.png); background-repeat:no-repeat; }
                       
            .row_selector { background-image: url("../images/ico_entry_unchecked.png"); background-position: center 6px; background-repeat: no-repeat; clear: left; float: left; min-height: 18px; padding-top: 4px; width: 16px; }
            .row_selectorCurrent { }
            .row_selectorCurrentChecked { background-image: url("../images/ico_currrentEntry_checked.png"); }
            .row_selectorCurrentUnChecked { background-image: url("../images/ico_currrentEntry_unchecked.png"); }
            .row_selectorChecked { background-image: url("../images/ico_entry_checked.png"); }
            .row_selectorSelected { }           
             
            div.RadGrid .rgSelectedRow { background: #e0f18e !important;  }           
             
        </style>
 
    </head>
    <body>
        <form id="form1" runat="server">
 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                <Scripts>
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
                    <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                </Scripts>
            </telerik:RadScriptManager>
 
            <telerik:RadWindowManager ID="RadWindowManager1" runat="server" style="z-index: 20000">
            </telerik:RadWindowManager>
 
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    var clickCalledAfterRadconfirm = false;
                    var lastClickedItem = null;
                    var grid = null;
 
                    document.addEventListener("DOMContentLoaded", function () {
                        top.$page.hideLoading();
                    });
 
                    function OnClientItemClicking(sender, eventArgs) {
                        if (!clickCalledAfterRadconfirm) {
                            lastClickedItem = eventArgs.get_item();
                            if (lastClickedItem.get_text() === "Delete" || lastClickedItem.get_text() === "Delete selected entries") {
                                eventArgs.set_cancel(true);
 
                                if (sender.get_element().id === "rmDiscounts" || sender.get_element().id === "cmDiscounts") {
                                    grid = $find("<%= rgDiscounts.ClientID %>");
                                } else {
                                    grid = $find("<%= rgProducts.ClientID %>");
                                }
 
                                var gridItemsCount = grid.get_selectedItems().length;
                                if (gridItemsCount > 0) {
                                    radconfirm("<font color=\"red\">WARNING !!</font><br /><br /> " + gridItemsCount + " entries are selected for deletion.<br /><br />" +
                                        "You are about to PERMANENTLY delete ALL information associated with the selected Price List entries. If you are deleting Provider / Groups then all products for these entries will also be deleted.<br /><br />" +
                                        "Are you sure you want to delete these entries ?? <br /><br />",
                                         confirmCallbackFunction, 600, 300, null, "Confirm delete request", "../images/ModalDialogAlert.gif");
                                }
                            }
                        }
                    }
 
                    function confirmCallbackFunction(args) {
                        if (args) {
                            clickCalledAfterRadconfirm = true;
                            lastClickedItem.click();
                        }
                        else
                            clickCalledAfterRadconfirm = false;
 
                        lastClickedItem = null;
                    }
 
                    function onDiscountsClientItemClicked(sender, args) {
                        var item = args.get_item(),
                            itemValue = item.get_value(),
                            itemText = item.get_text(),
                            itemAttribute = item.get_attributes().getAttribute("Device");
                    }
 
                    function onProductsClientItemClicked(sender, args) {
                        var item = args.get_item(),
                            itemValue = item.get_value(),
                            itemText = item.get_text(),
                            itemAttribute = item.get_attributes().getAttribute("Device");
                    }
 
                    function RowContextMenu(sender, eventArgs) {
                        var menu = null;
 
                        if (sender.get_element().id === "rgDiscounts") {
                            menu = $find("<%=cmDiscounts.ClientID %>");
                        } else {
                            menu = $find("<%=cmProducts.ClientID %>");
                        }
                        var evt = eventArgs.get_domEvent();
 
                        if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
                            return;
                        }
 
                        var index = eventArgs.get_itemIndexHierarchical();
                        //document.getElementById("radGridClickedRowIndex").value = index;
 
                        sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);
 
                        menu.show(evt);
 
                        evt.cancelBubble = true;
                        evt.returnValue = false;
 
                        if (evt.stopPropagation) {
                            evt.stopPropagation();
                            evt.preventDefault();
                        }
                    }
 
                    function ShowEditForm(id, rowIndex) {
                        var grid = $find("<%= rgDiscounts.ClientID %>");
 
                        var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                        grid.get_masterTableView().selectItem(rowControl, true);
 
                        window.radopen("WebForm1.aspx?ItemKey=" + id, "RadWindow2");
                        return false;
                    }
 
                    function SplitterResized(sender, eventArgs) {
                        var pane1 = sender.getPaneById('<%= Radpane1.ClientID %>');
                        var menu1 = $find("<%= rmDiscounts.ClientID %>");
                        var grid1 = $find("<%= rgDiscounts.ClientID %>");
 
                        var newHeight1 = menu1.get_childListElement().clientHeight + grid1.GridHeaderDiv.clientHeight + 1;
                        grid1.GridDataDiv.style.height = pane1.get_height() - newHeight1 + "px";
                        grid1.repaint();
 
                        var pane2 = sender.getPaneById('<%= Radpane2.ClientID %>');
                        var menu2 = $find("<%= rmProducts.ClientID %>");
                        var grid2 = $find("<%= rgProducts.ClientID %>");
 
                        var newHeight2 = menu2.get_childListElement().clientHeight + grid2.GridHeaderDiv.clientHeight +1;
                        grid2.GridDataDiv.style.height = pane2.get_height() - newHeight2 + "px";
                        grid2.repaint();
                    }
 
                    function DiscountsResized(sender, eventArgs) {
                        var menu = $find("<%= rmDiscounts.ClientID %>");
                        var grid = $find("<%= rgDiscounts.ClientID %>");
 
                        var newHeight = menu.get_childListElement().clientHeight + grid.GridHeaderDiv.clientHeight + 1;
                        grid.GridDataDiv.style.height = sender.get_height() - newHeight + "px";
                        grid.repaint();
                    }
 
                    function ProductsResized(sender, eventArgs) {
                        var menu = $find("<%= rmProducts.ClientID %>");
                        var grid = $find("<%= rgProducts.ClientID %>");
 
                        var newHeight = menu.get_childListElement().clientHeight + grid.GridHeaderDiv.clientHeight + 1;
                        grid.GridDataDiv.style.height = sender.get_height() - newHeight + "px";
                        grid.repaint();
                    }
 
                    function GridCreated(sender, eventArgs) {
                        var menu = null;
                        var parent = null;
                        var scrollArea = sender.GridDataDiv;
 
                        // which grid is this ??
                        if( sender.ClientID === "rgDiscounts" ) {
                            menu = $find("<%= rmDiscounts.ClientID %>");
                            parent = $get("Radpane1");
                        } else {
                            menu = $find("<%= rmProducts.ClientID %>");
                            parent = $get("Radpane2");
                        }
 
                        var gridHeader = sender.GridHeaderDiv;
                        var newHeight = menu.get_childListElement().clientHeight + gridHeader.clientHeight + 1;
                        scrollArea.style.height = parent.clientHeight - newHeight + "px";
                    }
 
                    function RowSelecting(sender, eventArgs) {
                        var grid = null;
 
                        if (sender.ClientID === "rgDiscounts") {
                            grid = $find('<%= rgDiscounts.ClientID %>');
                        } else {
                            grid = $find('<%= rgProducts.ClientID %>');
                        }
 
                        // find all of the currently selected rows and reset them
                        var masterTableView = grid.get_masterTableView();
                        var selectedIndex = parseInt(eventArgs.get_itemIndexHierarchical())
                        var gdiCurrent = masterTableView.get_dataItems()[selectedIndex];
 
                        if (sender.ClientID === "rgDiscounts") {
                            gdiCurrent.get_cell("rgDiscountSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                        } else {
                            gdiCurrent.get_cell("rgProductSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                        }
                    }
 
                    function RowDeSelecting(sender, eventArgs) {
                        var grid = null;
 
                        if (sender.ClientID === "rgDiscounts") {
                            grid = $find('<%= rgDiscounts.ClientID %>');
                        } else {
                            grid = $find('<%= rgProducts.ClientID %>');
                        }
 
                        // find all of the currently selected rows and reset them
                        var masterTableView = grid.get_masterTableView();
                        var selectedIndex = parseInt(eventArgs.get_itemIndexHierarchical())
                        var gdiCurrent = masterTableView.get_dataItems()[selectedIndex];
 
                        if (sender.ClientID === "rgDiscounts") {
                            gdiCurrent.get_cell("rgDiscountSelectCol").className = "row_selector";
                        } else {
                            gdiCurrent.get_cell("rgProductSelectCol").className = "row_selector";
                        }
                    }
 
                    function GridRowClicked(sender, eventArgs) {
                        var grid = null;
 
                        if (sender.ClientID === "rgDiscounts") {
                            grid = $find('<%= rgDiscounts.ClientID %>');
                        } else {
                            grid = $find('<%= rgProducts.ClientID %>');
                        }
 
                        // find all of the currently selected rows and reset them
                        var masterTableView = grid.get_masterTableView();
                        var selectedItems = masterTableView.get_selectedItems();
                        var selectedIndex = parseInt(eventArgs.get_itemIndexHierarchical())
                        var flaggedAsSelected = false;
 
                        for (var i = 0; i < selectedItems.length; i++) {
                            if (selectedItems[i].get_itemIndex() === selectedIndex) {
                                flaggedAsSelected = true;
                            }
                            selectedItems[i].set_selected = false;
                            if (sender.ClientID === "rgDiscounts") {
                                selectedItems[i].get_cell("rgDiscountSelectCol").className = "row_selector";
                            } else {
                                selectedItems[i].get_cell("rgProductSelectCol").className = "row_selector";
                            }
                        }
 
                        if (!flaggedAsSelected) {
                            // set our current row to selected
                            var gdiCurrent = masterTableView.get_dataItems()[selectedIndex];
                            if (sender.ClientID === "rgDiscounts") {
                                gdiCurrent.get_cell("rgDiscountSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                            } else {
                                gdiCurrent.get_cell("rgProductSelectCol").className = "row_selector row_selectorCurrentUnChecked";
                            }
                         }
                    }
 
                </script>
            </telerik:RadCodeBlock>
 
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="rgDiscounts">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgDiscounts"></telerik:AjaxUpdatedControl>
                            <telerik:AjaxUpdatedControl ControlID="rgProducts" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                    <telerik:AjaxSetting AjaxControlID="rgProducts">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="rgProducts"></telerik:AjaxUpdatedControl>
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
 
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Max2017" EnableEmbeddedSkins="false"></telerik:RadAjaxLoadingPanel>
 
            <telerik:RadSplitter ID="RadSplitter1" runat="server" Orientation="Horizontal" Width="100%" Height="100%" ResizeWithBrowserWindow="true"
                ResizeMode="Proportional" VisibleDuringInit="false" Skin="Max2017" EnableEmbeddedSkins="false"
                OnClientLoad="SplitterResized" OnClientResized="SplitterResized">
 
                <telerik:RadPane ID="Radpane1" runat="server" Scrolling="Y" Width="100%" OnClientResized="DiscountsResized">
 
                    <telerik:RadMenu ID="rmDiscounts" runat="server" Width="100%" ShowToggleHandle="true" BorderStyle="none"
                        EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                        OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onDiscountsClientItemClicked" OnItemClick="rmDiscounts_ItemClick">
                        <Items>
                            <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Delete" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Items" BorderStyle="None">
                                <GroupSettings ExpandDirection="Down" Width="200px" />
                                <Items>
                                    <telerik:RadMenuItem Text="Add Product Provider"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Add Product Group"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Add Product Group Type"></telerik:RadMenuItem>                                   
                                </Items>                               
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Refresh" BorderStyle="None" />
                        </Items>                       
                    </telerik:RadMenu>
 
                    <telerik:RadGrid ID="rgDiscounts" runat="server" Width="100%" RenderMode="Lightweight"
                        AllowSorting="true" AllowMultiRowSelection="true" CssClass="RadGrid_RoundCorners"
                        Skin="Max2017" EnableEmbeddedSkins="false"
                        OnNeedDataSource="rgDiscounts_NeedDataSource" OnItemCreated="rgDiscounts_ItemCreated" OnItemDataBound="rgDiscounts_ItemDataBound"
                        OnUpdateCommand="rgDiscounts_UpdateCommand" OnInsertCommand="rgDiscounts_InsertCommand" OnDeleteCommand="rgDiscounts_DeleteCommand"
                        OnPreRender="rgDiscounts_PreRender" OnItemCommand="rgDiscounts_ItemCommand">
 
                        <MasterTableView DataKeyNames="Discount_Id" ClientDataKeyNames="Discount_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
 
                            <Columns>
                                <telerik:GridClientSelectColumn UniqueName="rgDiscountSelectCol">
                                    <HeaderStyle Width="30px" />
                                </telerik:GridClientSelectColumn>
 
                                <telerik:GridBoundColumn DataField="Discount_Id" UniqueName="DiscountId" Display="false">
                                </telerik:GridBoundColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Provider" HeaderText="Product Provider" SortExpression="Product_Provider"
                                    UniqueName="ProductProvider">
                                    <HeaderStyle Width="30%" Font-Bold="true" />
                                    <ItemStyle CssClass="clickable" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Group" HeaderText="Product Group" SortExpression="Product_Group"
                                    UniqueName="ProductGroup">
                                    <HeaderStyle Width="30%" Font-Bold="true" />
                                    <ItemStyle CssClass="clickable" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridNumericColumn DataField="Discount_Percent" HeaderText="Discount % (Cost)" SortExpression="Discount_Percent"
                                    UniqueName="DiscountPercent" DataType="System.Double" DataFormatString="{0:#,##0.0}">
                                    <HeaderStyle Width="20%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridNumericColumn DataField="Renewal_Percent" HeaderText="Discount % (Renew)" SortExpression="Renewal_Percent"
                                    UniqueName="RenewalPercent" DataType="System.Double" DataFormatString="{0:#,##0.0}">
                                    <HeaderStyle Width="20%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                            </Columns>
 
                        </MasterTableView>
 
                        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true">
                            <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
                            <ClientEvents OnRowContextMenu="RowContextMenu" OnGridCreated="GridCreated" OnRowClick="GridRowClicked" />
                        </ClientSettings>
 
                    </telerik:RadGrid>
 
                </telerik:RadPane>
 
                <telerik:RadSplitBar ID="Radsplitbar1" runat="server" CollapseMode="Both" EnableResize="True">
                </telerik:RadSplitBar>
 
                <telerik:RadPane ID="Radpane2" runat="server" Scrolling="Y" Width="100%" OnClientResized="ProductsResized">
 
                    <telerik:RadMenu ID="rmProducts" runat="server" Width="100%" ShowToggleHandle="true" BorderStyle="none"
                        EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                        OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onProductsClientItemClicked" OnItemClick="rmProducts_ItemClick">
                        <Items>
                            <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Delete" BorderStyle="None" />
                            <telerik:RadMenuItem Text="Refresh" BorderStyle="None" />
                        </Items>                       
                    </telerik:RadMenu>
 
                    <telerik:RadGrid ID="rgProducts" runat="server" Width="100%" AllowMultiRowSelection="true"
                        AllowSorting="true" RenderMode="Lightweight" CssClass="RadGrid_RoundCorners" Skin="Max2017" EnableEmbeddedSkins="false"
                        OnNeedDataSource="rgProducts_NeedDataSource" OnItemCreated="rgProducts_ItemCreated" OnItemDataBound="rgProducts_ItemDataBound"
                        OnUpdateCommand="rgProducts_UpdateCommand" OnInsertCommand="rgProducts_InsertCommand" OnDeleteCommand="rgProducts_DeleteCommand"
                        OnItemCommand="rgProducts_ItemCommand">
 
                        <MasterTableView DataKeyNames="Product_Id" ClientDataKeyNames="Product_Id" AllowMultiColumnSorting="true" AutoGenerateColumns="false" CommandItemDisplay="Top" >
 
                            <Columns>
                                <telerik:GridBoundColumn DataField="Product_Id" UniqueName="ProductId" Display="false">
                                </telerik:GridBoundColumn>
 
                                <telerik:GridClientSelectColumn UniqueName="rgProductSelectCol">
                                    <HeaderStyle Width="30px" />
                                </telerik:GridClientSelectColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Code" HeaderText="Product Code" SortExpression="Product_Code"
                                    UniqueName="ProductCode">
                                    <HeaderStyle Width="12%" Font-Bold="true" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridBoundColumn DataField="Product_Description" HeaderText="Product Description" SortExpression="Product_Description"
                                    UniqueName="ProductDescription">
                                    <HeaderStyle Width="30%" Font-Bold="true" />
                                </telerik:GridBoundColumn>
 
                                <telerik:GridNumericColumn DataField="Unit_Sell" HeaderText="Unit Sell" SortExpression="Unit_Sell"
                                    UniqueName="UnitSell" DataType="System.Double" DataFormatString="{0:#,##0.00}">
                                    <HeaderStyle Width="7%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridNumericColumn DataField="Unit_Cost" HeaderText="Unit Cost" SortExpression="Unit_Cost"
                                    UniqueName="UnitCost" DataType="System.Double" DataFormatString="{0:#,##0.00}">
                                    <HeaderStyle Width="7%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridNumericColumn DataField="Renewal_Cost" HeaderText="Renewal Cost" SortExpression="Renewal_Cost"
                                    UniqueName="RenewalCost" DataType="System.Double" DataFormatString="{0:#,##0.00}">
                                    <HeaderStyle Width="9%" HorizontalAlign="Right" Font-Bold="true" />
                                    <ItemStyle HorizontalAlign="Right" />
                                </telerik:GridNumericColumn>
 
                                <telerik:GridBoundColumn DataField="Comments" HeaderText="Comments" SortExpression="Comments"
                                    UniqueName="Comments">
                                    <HeaderStyle  Font-Bold="true" />
                                </telerik:GridBoundColumn>
                            </Columns>
 
                        </MasterTableView>
 
                        <ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true" >
                            <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="100%" />
                            <ClientEvents OnGridCreated="GridCreated" OnRowSelecting="RowSelecting" OnRowDeselecting="RowDeSelecting" OnRowClick="GridRowClicked" />
                        </ClientSettings>
 
                    </telerik:RadGrid>
 
                </telerik:RadPane>
 
            </telerik:RadSplitter>
 
            <telerik:RadContextMenu ID="cmDiscounts" runat="server"
                Skin="Max2017" EnableEmbeddedSkins="false" EnableRoundedCorners="true" EnableShadows="true"
                OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onDiscountsClientItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="Add a new Item"></telerik:RadMenuItem>
                    <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Delete selected entries"></telerik:RadMenuItem>
                    <telerik:RadMenuItem IsSeparator="true"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add a Product Provider"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add a Product Group"></telerik:RadMenuItem>
                    <telerik:RadMenuItem Text="Add a Product Group Type"></telerik:RadMenuItem>
                </Items>
            </telerik:RadContextMenu>
 
            <telerik:RadContextMenu ID="cmProducts" runat="server"
                EnableRoundedCorners="true" EnableShadows="true" Skin="Max2017" EnableEmbeddedSkins="false"
                OnClientItemClicking="OnClientItemClicking" OnClientItemClicked="onProductsClientItemClicked">
                <Items>
                    <telerik:RadMenuItem Text="Add" BorderStyle="None" />
                    <telerik:RadMenuItem Text="Delete selected entries" BorderStyle="None" />
                </Items>                       
            </telerik:RadContextMenu>
 
            <asp:HiddenField ID="addrBook" runat="server" />
            <asp:HiddenField ID="dbServer" runat="server" />
            <asp:HiddenField ID="mxServer" runat="server" />
            <asp:HiddenField ID="userName" runat="server" />
            <asp:HiddenField ID="userPass" runat="server" />
 
            <input id="currDisc" runat="server" visible="false" />
 
        </form>
    </body>
</html>

 

And the ItemDataBound server event to attach the hyperlink to the cell text ...

protected void rgDiscounts_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataBoundItem = (GridDataItem)e.Item;
 
        foreach (GridColumn col in rgDiscounts.MasterTableView.RenderColumns)
        {
            if (col.Display && col.Visible && col.Selectable)
            {
                HyperLink link = new HyperLink();
                link.Text = dataBoundItem[col.UniqueName].Text;
                link.Attributes["onclick"] = String.Format("return ShowEditForm('{0}','{1}');", dataBoundItem["DiscountId"].Text, e.Item.ItemIndex);
                dataBoundItem[col.UniqueName].Controls.Add(link);
            }
        }
    }
}

 

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 22 Mar 2017, 08:32 AM
RadGridLinkColumnsExport.zip
Hello,

You can do that by traversing the Items collection during the Page_PreRender event handler.

Generally, there are various ways of creating link columns and I suggest that you check the attached web site for possible alternative approaches.

Regards,
Eyup
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
CP
Top achievements
Rank 1
Iron
answered on 24 Mar 2017, 11:38 AM

Thank you Eyup.

The template column appears to be my best option as the hyperlink is only selected in clicking the actual text and with my clickable CSS the link is only underlined on hover however I really need the link to either execute a javascript function to open a new aspx in a RadWindow or to open that RadWindow directly. Is this something that can be done ?

<style type="text/css">
            .clickable { cursor:pointer; font-weight:normal; text-decoration:none; }
            .clickable:hover { text-decoration: underline !important; }           
</style>
 
             
<script type="text/javascript">
     function ShowEditForm(id, rowIndex) {
        window.radopen("WebForm1.aspx?ItemKey=" + id, "RadWindow2");
        return false;
    }
</script>
 
 
<telerik:GridTemplateColumn UniqueName="TemplateColumn" HeaderText="Template Column">
    <ItemTemplate>
        <asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("Product_Group")%>' CssClass="clickable"
            NavigateUrl='<%# "javascript:ShowEditForm(" + Eval("Discount_Id") + ", 0)" %>'>
        </asp:HyperLink>
    </ItemTemplate>
    <HeaderStyle Width="20%" Font-Bold="true" />
</telerik:GridTemplateColumn>
0
Eyup
Telerik team
answered on 29 Mar 2017, 07:28 AM
Hi,

For this requirement a LinkButton is a better option. You can also check the different options provided in the following post:
http://www.telerik.com/forums/context-menu---open-a-pop-up#Qe9fJgzWrE2DhYPWX7OkCQ

You can also check:
http://www.telerik.com/forums/open-report-link-using-unique-row-id#eupACGJdv0mBbLYsQEvMdQ

Here is a basic sample:
<ItemTemplate>
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click"
        OnClientClick='<%# "buttonClick(this,event,"+Eval("OrderID")+"); return false;" %>'>
    </asp:LinkButton>
</ItemTemplate>
JavaScript:
function buttonClick(linkButton, event, index) {
    alert(index);
}


Regards,
Eyup
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
CP
Top achievements
Rank 1
Iron
Answers by
Eyup
Telerik team
CP
Top achievements
Rank 1
Iron
Share this question
or