This is a migrated thread and some comments may be shown as answers.

[Solved] Getting a DataKey ID

4 Answers 269 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Boone asked on 13 Aug 2009, 07:08 PM

I have a grid, inside one of the columns I have a tooltip that contains a radmenu. When you click an item in the radmenu I need it to call a JS method and pass the dataItem that the tooltip came from.

So lets say i have two rows in my grid with ID 1 and 2. If I hover over the second tooltip and click on my menu item it needs to pass the 2.

This is the last thing that is holding me up with this project. Please help...

    
                <telerik:RadScriptBlock ID="RadScriptBlock2" runat="server"> 
        
                    <script type="text/javascript"> 
        
                        //<![CDATA[
        
                        function menuTools_Click(sender, eventArgs)
        
                        {
        
                            //I need the datakey from what ever dataitem this came from.
        
                            //So if I hover over the first 'hover over me' box and click the item I should get ID=0
        
                            var id = 2;
        
                            var wnd = openRadWindow("http://www.google.com"+"?ID="+id, "600", "600");
        
                        }
        
                        //]]> 
        
                    </script> 
        
                </telerik:RadScriptBlock> 
        
                  <telerik:RadGrid ID="Grid1" runat="server" AutoGenerateColumns="false" 
        
                    OnDetailTableDataBind="DetailTableDataBind" 
        
                    OnNeedDataSource="NeedDataSource"> 
        
                    <MasterTableView DataKeyNames="ID" HierarchyLoadMode="ServerOnDemand"> 
        
                        <DetailTables> 
        
                            <telerik:GridTableView DataKeyNames="ID" ClientDataKeyNames="ID" AutoGenerateColumns="false"> 
        
                                <Columns> 
        
                                    <telerik:GridBoundColumn DataField="CompanyName" HeaderText="CompanyName" /> 
        
                                </Columns> 
        
                            </telerik:GridTableView> 
        
                        </DetailTables> 
        
                        <Columns> 
        
                            <telerik:GridBoundColumn DataField="ID" HeaderText="ID" /> 
        
                            <telerik:GridTemplateColumn> 
        
                                <ItemTemplate> 
        
                                    <asp:Button ID="buttonDetails" runat="server" OnClientClick="return false;" Text="Hover over me" /> 
        
                                    <telerik:RadToolTip runat="server" ID="RadToolTipButtonDetails" HideEvent="ManualClose" RenderInPageRoot="true" 
        
                                        ShowEvent="OnMouseOver" RelativeTo="Element" TargetControlID="buttonDetails" Position="Center" Title="Tools"> 
        
                                            <telerik:RadMenu ID="menuTools" runat="server" Flow="Vertical" OnClientItemClicking="menuTools_Click">                                 
        
                                                <Items> 
        
                                                    <telerik:RadMenuItem Width="160px" Value="Print" ToolTip="Print" /> 
        
                                                </Items> 
        
                                            </telerik:RadMenu> 
        
                                    </telerik:RadToolTip> 
        
                                </ItemTemplate> 
        
                            </telerik:GridTemplateColumn> 
        
                        </Columns> 
        
                    </MasterTableView> 
        
                    <ClientSettings EnableRowHoverStyle="true"> 
        
                        <Selecting AllowRowSelect="true" /> 
        
                    </ClientSettings> 
        
                </telerik:RadGrid>

4 Answers, 1 is accepted

Accepted

answered on 14 Aug 2009, 08:37 AM

Hello Boone,

Please try the following approach:

    
            <script type="text/javascript"> 
        
                function menuTools_Click(sender, args) 
        
                { 
        
                    var activeToolTip = Telerik.Web.UI.RadToolTip.getCurrent(); 
        
                    var rowElement = activeToolTip.get_targetControl().parentNode.parentNode; 
        
                    var dataItemId = rowElement.id.split("__")[1]; 
        
                    var dataItem = $find('<%= RadGrid1.ClientID %>').get_masterTableView().get_dataItems()[dataItemId]; 
        
                    alert(dataItem.getDataKeyValue("ID")); 
        
                } 
        
            </script>

Regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Accepted

answered on 19 Aug 2009, 07:45 AM

Hi Boone,

To access the row object on clicking the menu item client side, you can try out the following code:

js:

                     function menuTools_Click(sender,args)          
                {           
                          
                    var rowElement = sender._element.parentNode.parentNode                
                    var dataItemId = rowElement.id.split("__")[1];           
                    var dataItem = $find('<%= RadGrid1.ClientID %>').get_masterTableView().get_dataItems()[dataItemId];           
                    alert(dataItem.getDataKeyValue("ID"));           
                }          

Another suggestion would be to use a RadContextMenu control rather than the menu control. Take a look at the following demo which uses a RadContextMenu

AJAX-enabled Context Menu

Thanks

Shinu.