[Solved] Show RadContextMenu only when you click a control in a templateColumn in a RadGrid Row

[Chandra]

Hello - Could you help me how to Show the 'RadContextMenu' in a Row only when you click a child control(link button/image button) of TemplateColumn? Appreciate your help.

<script type="text/javascript">
function ShowContextMenuOnlyWhenYouClickMe(sender, eventArgs) {

 var menu = $find("<%= RadMenuWaterLevel.ClientID %>");

//How do I get the domEvent & masterTable to select the current row?
menu.show(domEvent); ??

 }
  </script>


 <telerik:RadGrid runat=server AllowPaging="True"
                        AllowSorting="True" DataSourceID="ObjectDataSourceData" GridLines="None"
                        Skin="WebBlue" ID="RadGridGWSearchResultsWaterLevels" ShowStatusBar="True"
                        GroupingEnabled="False" PageSize="100" AutoGenerateColumns="false">
                        <clientsettings>
                            <scrolling allowscroll="True" usestaticheaders="True" />
                                           <Selecting AllowRowSelect="True" />
                            <ClientEvents onRowClick="RowContextMenuWaterLevel" ></ClientEvents>
                        </clientsettings>
                        <mastertableview datasourceid="ObjectDataSourceData"
                            commanditemdisplay="TopAndBottom">
                            <commanditemsettings showaddnewrecordbutton="False"
                                showexporttocsvbutton="True" showrefreshbutton="False" />
                                                <Columns>
                                 <telerik:GridBoundColumn DataField="Result Parameter Name" HeaderText="parameter Name" DataType="System.String" >
                                </telerik:GridBoundColumn>

                                <telerik:GridBoundColumn DataField="Result Parameter Name Count" HeaderText="Count" DataType="System.Int32" >
                                </telerik:GridBoundColumn>

                                 <telerik:GridTemplateColumn
                        UniqueName="ComboColumn2"
                        HeaderText="" >
                            <ItemTemplate>
                                <input id="clickDropDown" type="button" value="Press Me"  onclick="ShowContextMenuOnlyWhenYouClickMe" />

                            </ItemTemplate>
                        </telerik:GridTemplateColumn>


                                </columns>

                        </mastertableview>
                        <PagerStyle Position="TopAndBottom"></PagerStyle>
                    </telerik:RadGrid>

                    <telerik:RadContextMenu ID="RadMenuWaterLevel" runat="server"
                        EnableRoundedCorners="true" EnableShadows="true">
                        <Items>
                            <telerik:RadMenuItem Text="Map" />
                            <telerik:RadMenuItem Text="Download" />
                        </Items>
                    </telerik:RadContextMenu>

Thanks
Chandra

[Shinu]

Hello Chandra,


Try following code and see whether it helps.

Aspx - Add asp:Button in GridTemplateColumn:

<telerik:GridTemplateColumn UniqueName="CustomerID1" HeaderText="ID">
    <ItemTemplate>
       <asp:Button ID="clickDropDown" Font-Size="11px" Width="65px" runat="server" Text="Press Me" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

Code - attaching onclick from server by passing the ItemIndex:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        var Item = ((GridDataItem)e.Item);
        Button btn = (Button)Item.FindControl("clickDropDown");
        btn.Attributes.Add("onclick", "ShowContextMenuOnlyWhenYouClickMe(event, '" + Item.ItemIndex+ "')");
    }
}

JavaScript - showing contextmenu:

<script type="text/javascript">
    var index;  // index of corresponding row
    function ShowContextMenuOnlyWhenYouClickMe(e, i) {
        var menu = $find("<%= RadMenuWaterLevel.ClientID %>");
        index = i;
        menu.show(e);
        alert(index); // index of corresponding row
    }
</script>

-Shinu.

[Chandra]

Hi Shinu - Thanks for the help and posting the sample code. but, it does not work as expected. However, I have modified the code  and it works fine now. 

<telerik:GridTemplateColumn UniqueName="CustomerID1" HeaderText="ID">
    <ItemTemplate>
       <asp:Button ID="clickDropDown" Font-Size="11px" Width="65px" runat="server" Text="Press Me" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        var Item = ((GridDataItem)e.Item);
        Button btn = (Button)Item.FindControl("clickDropDown");
               btn.Attributes.Add("onclick", string.Format("ShowRowContextMenu(this, event, '{0}', '{1}', {2})", RadMenu1.ClientID, RadGrid1.ClientID , item.ItemIndex));
    }
}

//Client side click event to show the context menu.
                function ShowRowContextMenu(sender, evt, menuClientId, gridClientId, rowIndex) {

                    //Get a reference to the context menu
                    var menu = $find(menuClientId);

                    //get a reference to the Radgrid.
                    var grid = $find(gridClientId);

                    //get a reference to the masterTableView
                    var tableView = grid.get_masterTableView();

                    //Clean up all of the previously selected items.
                    tableView.clearSelectedItems();

                    //Select the current Row.
                    tableView.selectItem(tableView.get_dataItems()[rowIndex].get_element(), true);

                    //Show the context Menu.
                    menu.show(evt);

                    //Cancel any other default behaviours of the Click event, so that the menu stays on the screen.
                    evt.cancelBubble = true;
                    evt.returnValue = false;

                    //Stop event propogation.
                    if (evt.stopPropagation) {
                        evt.stopPropagation();
                        evt.preventDefault();
                    }

                }



Thanks again for the guidelines.

Chandra

[Obaid]

hi chandra,
how to get datakayvalue on radcontextmenu item click event of selected row.