ContextMenu on Child Grid with RadMultiPage

[Keith]

I am trying to get a RadContextMenu to fire on individual child grids and I'm running into roadblocks.  I have followed the demo and I have the RadContextMenu working on individual grids with no problem, but when I add children I am unable to fire the context menu.  When applying the <ClientEvents OnRowContextMenu="RowContextMenu" /> to any grid (parent or child) I get a "Object doesn't support this property or method. " for menu.show(evt);

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
    <script type="text/javascript">
        function RowContextMenu(sender, eventArgs) {
            var menu = $find("<%=RadGrid1.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();
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadMenu1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadMenu1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                <telerik:AjaxUpdatedControl ControlID="RadMenu1"></telerik:AjaxUpdatedControl>
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
</telerik:RadAjaxLoadingPanel>
<input type="hidden" id="radGridClickedRowIndex" name="radGridClickedRowIndex" />

    <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
        runat="server" AutoGenerateColumns="False" OnItemCommand="RadGrid1_ItemCommand">
        <ClientSettings>
            <ClientEvents OnRowContextMenu="RowContextMenu" />
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
        <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="JobID">
            <NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">
                    <telerik:RadTabStrip runat="server" ID="TabStrip1" MultiPageID="Multipage1" Skin="WebBlue"
                        Align="justify" AutoPostBack="true">
                        <Tabs>
                            <%--RadTabs--%>
                        </Tabs>
                    </telerik:RadTabStrip>

                    <telerik:RadMultiPage runat="server" ID="Multipage1" RenderSelectedPageOnly="false" SelectedIndex="0">
                        <telerik:RadPageView runat="server" ID="PageView1">
                            <telerik:RadGrid runat="server" ID="OrdersGrid" DataSourceID="SqlDataSource2">
                                <ClientSettings Selecting-AllowRowSelect="true" />
                                <MasterTableView ShowHeader="true" AutoGenerateColumns="False" ClientDataKeyNames="Employee_Identifier" HierarchyDefaultExpanded="true">
                                    <Columns>
                                        <%--column info--%>
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>

                            <asp:SqlDataSource ID="SqlDataSource2" runat="server" />
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>

                </asp:Panel>

                <telerik:RadTabStrip runat="server" ID="TabStrip2" Skin="WebBlue" Align="Justify" Width="900px"
                    Orientation="HorizontalBottom">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Tab 1">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Tab 2">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
            </NestedViewTemplate>

            <Columns>
                <%--Column info--%>
            </Columns>
        </MasterTableView>

    </telerik:RadGrid>

    <asp:SqlDataSource ID="SqlDataSource1" ProviderName="System.Data.SqlClient" runat="server"></asp:SqlDataSource>
</div>

<telerik:RadContextMenu ID="RadMenu1" runat="server" OnItemClick="RadMenu1_ItemClick"
    EnableRoundedCorners="true" EnableShadows="true">
    <Items>
        <telerik:RadMenuItem Text="Menu Item Text">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadContextMenu>

Is there a demo out there showing how to perform a RadContextMenu on a child RadGrid when used in conjunction with RadMultiPage and RadTabStrip?

[Princy]

Hi Keith,

I guess you want to show the Menu for child grid row click, add the RowContextMenu client function to the child grid also. Please have a look at the below code snippet:

ASPX:

<telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">

    <script type="text/javascript">

        function RowContextMenu(sender, eventArgs) {

            var menu = $find("<%=RadMenu1.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();

            }

        }

    </script>

</telerik:RadCodeBlock>

. . .

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" runat="server" >

    <ClientSettings>

        <ClientEvents OnRowContextMenu="RowContextMenu" />

        <Selecting AllowRowSelect="true" />

    </ClientSettings>

    <MasterTableView>

        <NestedViewTemplate>

            <asp:Panel runat="server" ID="InnerContainer" >

                <telerik:RadTabStrip runat="server" ID="TabStrip1" MultiPageID="Multipage1" AutoPostBack="true">

                 . . .

                </telerik:RadTabStrip>

                <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0">

                    <telerik:RadPageView runat="server" ID="PageView1">

                        <telerik:RadGrid runat="server" ID="OrdersGrid" DataSourceID="SqlDataSource2">

                            <ClientSettings>

                                <ClientEvents OnRowContextMenu="RowContextMenu" />

                                <Selecting AllowRowSelect="true" />

                            </ClientSettings>

                         . . .

                        </telerik:RadGrid>

                    </telerik:RadPageView>

                </telerik:RadMultiPage>

            </asp:Panel>

            . . .


        </NestedViewTemplate>

    </MasterTableView>

</telerik:RadGrid>

</div>

<telerik:RadContextMenu ID="RadMenu1" runat="server" EnableRoundedCorners="true"

    EnableShadows="true" OnItemClick="RadMenu1_ItemClick">

    <Items>

        <telerik:RadMenuItem Text="Menu Item Text">

            <Items>

                <telerik:RadMenuItem Text="Add">

                </telerik:RadMenuItem>

                <telerik:RadMenuItem Text="Edit">

                </telerik:RadMenuItem>

                <telerik:RadMenuItem Text="Delete">

                </telerik:RadMenuItem>

            </Items>

        </telerik:RadMenuItem>

    </Items>

</telerik:RadContextMenu>

Thanks,
Princy

[Keith]

The problem is that when I add <ClientEvents OnRowContextMenu="RowContextMenu" /> to anything on this page I get a javascript unhandled exception on this line under RowContextMenu:

menu.show(evt);

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'show'


I'm going to work on a blank solution to submit so that my issue can be duplicated on Telerik's end.  Thanks.

[Keith]

I just spent an hour creating a sample project to submit to support and in my sample project I am having no problems.  Thanks for your help Princy.  It's going to be up to me to debug my page and find out what control is causing this issue.

[Keith]

Ugh.  It was a simple typo.

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

I pulled the RadGrid as a menu instead of the RadMenu as it should have been

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