Getting Grid Row Context Menu Conflict with Grid in UserControl EditForm

[b]

Hi,

I have a page with 3 RadGrids and an UserControl (pop up EditForm) with a RadGrid.  Here is my situation:

• When you right click an item in one of the 3 RadGrid on the actual page a Context Menu shows - this is good
• When you click Edit in the Context Menu, the UserControl appears in the edit pop up - this is good
• When you right click an item in the RadGrid in the UserControl two "bad" things happen: the Context Menu for the 3 RadGrids on the page shows - this is bad; and the row in the RadGrid on the page (not the UserControl) with the same index as the row right clicked in the RadGrid in the UserControl becomes selected - this is also bad

Here is the code for one of the 3 RadGrids on the actual page (there's no conflict between the three), you'll note that I use a UserControl for the modal pop up EditForm:

<telerik:RadGrid ID="GuestTabsGrid" runat="server"
    OnNeedDataSource="GuestTabsGrid_NeedDataSource" OnInsertCommand="TabsGrid_InsertCommand" OnUpdateCommand="TabsGrid_UpdateCommand"
    AutoGenerateColumns="false" AllowFilteringByColumn="false" AllowSorting="false" AllowPaging="true">
    <PagerStyle Mode="NextPrevAndNumeric" />
    <GroupingSettings CaseSensitive="false" />
    <MasterTableView TableLayout="Fixed" CommandItemDisplay="Top"
        ClientDataKeyNames="Id,Name,IsSystem,IsPublished" DataKeyNames="Id"
        EditMode="PopUp">
        <Columns>
            <telerik:GridBoundColumn UniqueName="GuestNameCol" HeaderText="Tab Name" DataField="Name"/>
            <telerik:GridTemplateColumn UniqueName="GuestSystemCol" HeaderText="Is System Tab?" DataField="IsDefault">
                <ItemTemplate>
                    <asp:Label runat="server" Text='<%# Convert.ToBoolean(Eval("IsSystem")) == true? "Yes" : "No" %>' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn UniqueName="GuestPortletsCol" HeaderText="Portlets" DataField="LearningStudioPortletsXml">
                <ItemTemplate>
                    <asp:Label runat="server" Text='' />
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn UniqueName="GuestSortOrderCol" HeaderText="Sort Order" DataField="SortOrder"/>
        </Columns>
        <EditFormSettings UserControlName="..\Controls\TabDetailsControl.ascx" EditFormType="WebUserControl"
            InsertCaption="Add new tab" CaptionFormatString="Edit Tab: {0}" CaptionDataField="Name"
            PopUpSettings-Width="750px" PopUpSettings-Modal="true">
            <EditColumn ButtonType="ImageButton" InsertText="Insert Order" UpdateText="Update record"
                UniqueName="EditCommandColumn1" CancelText="Cancel edit">
            </EditColumn>
            <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
        </EditFormSettings>
    </MasterTableView>
    <ClientSettings>
        <Selecting AllowRowSelect="true" />
        <ClientEvents OnPopUpShowing="PopUpShowing" />
        <ClientEvents OnRowContextMenu="TabRowContextMenu" />
    </ClientSettings>
</telerik:RadGrid>

Here is the code for the Context Menu for the 3 RadGrids on the page:

<telerik:RadContextMenu ID="TabGridMenu" runat="server" OnItemClick="TabGridMenu_ItemClick"
    EnableRoundedCorners="true" EnableShadows="true">
    <Items>
        <telerik:RadMenuItem Text="Edit" Value="Edit" />
        <telerik:RadMenuItem Text="Delete" Value="Delete" />
        <telerik:RadMenuItem Text="Set as default" Value="SetDefault" />
        <telerik:RadMenuItem Text="Publish" Value="Publish" />
        <telerik:RadMenuItem Text="Unpublish" Value="Unpublish" />
    </Items>
</telerik:RadContextMenu>

Here is the JavaScript function for the Context Menu on that page, you'll note I have a check to make sure that the "sender" is one of the 3 RadGrids that use this Context Menu:

function TabRowContextMenu(sender, eventArgs) {
    var menu = $find("<%=TabGridMenu.ClientID %>");
    var evt = eventArgs.get_domEvent();
    var clickedGridId = sender.get_id();

    if (evt.target.tagName == "INPUT" || evt.target.tagName == "A") {
        return;
    }

    if (clickedGridId != "<%=GuestTabsGrid.ClientID %>"
        || clickedGridId == "<%=SignInTabsGrid.ClientID %>"
        || clickedGridId == "<%=SignedInTabsGrid.ClientID %>")
        ) {
        return;
    }

    var publish = menu.findItemByValue("Publish");
    var unpublish = menu.findItemByValue("Unpublish");
    var setDefault = menu.findItemByValue("SetDefault");

    publish.set_visible(false);
    unpublish.set_visible(false);
    setDefault.set_visible(false);

    var itemIsPublished = eventArgs.getDataKeyValue("IsPublished") == "True";
    var itemIsDefault = eventArgs.getDataKeyValue("IsSystem") == "True";
    var dataItem = eventArgs.get_gridDataItem();
    var index = eventArgs.get_itemIndexHierarchical();

    document.getElementById("<%=radGridClickedRowIndex.ClientID %>").value = index;
    document.getElementById("<%=radGridClicked.ClientID %>").value = clickedGridId;

    sender.get_masterTableView().selectItem(sender.get_masterTableView().get_dataItems()[index].get_element(), true);

    if (itemIsPublished) {
        unpublish.set_visible(true);
    }
    else {
        publish.set_visible(true);
    }

    if (!itemIsDefault) {
        setDefault.set_visible(true);
    }

    menu.show(evt);

    evt.cancelBubble = true;
    evt.returnValue = false;

    if (evt.stopPropagation) {
        evt.stopPropagation();
        evt.preventDefault();
    }
}

</script>

Here is the code for the RadGrid in my UserControl, note that it doesn't have a Context Menu:

<telerik:RadGrid runat="server" ID="TabAvailablePortlets" OnNeedDataSource="grdPendingOrders_NeedDataSource"
    AllowPaging="false" Width="150px" OnRowDrop="grdPendingOrders_RowDrop" AllowMultiRowSelection="false"
    AutoGenerateColumns="false">
    <MasterTableView DataKeyNames="Id,Name,IsSystem,IsPublished,Content" TableLayout="Fixed">
        <Columns>
            <%--<telerik:GridDragDropColumn HeaderStyle-Width="18px" Visible="false" />--%>
            <telerik:GridBoundColumn UniqueName="TANameCol" HeaderText="Portlet Name" DataField="Name"/>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
        <Resizing AllowColumnResize="true" />
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false"/>
        <ClientEvents OnRowDropping="onRowDropping" />
        <Scrolling AllowScroll="true" UseStaticHeaders="true"/>
    </ClientSettings>
    <PagerStyle Mode="NumericPages" PageButtonCount="4" />
</telerik:RadGrid>

Any idea why this is happenning?  I would really appreciate any help in resolving this.

Thanks!

[Mira]

Hello B,

In order to prevent the described behavior, I suggest that you handle the OnRowContextMenu event of the grid in the usercontrol and cancel it:

function RowContextMenu(sender, eventArgs) {
    eventArgs.set_cancel(true);
}

I hope this helps.

All the best,
Mira
the Telerik team

[b]

Hi Mira,

I did what you suggested:

I made the following javascript function:

function PortletContextMenu(sender, eventArgs) {
  eventArgs.set_cancel(true);
}

then added it to the RadGrid in the UserControl via:

<ClientEvents OnRowContextMenu="PortletContextMenu" />

But the TabRowContextMenu() function still fires after the PortletContextMenu() function.  So I tried adding this to the top of TabRowContextMenu():

if (eventArgs._cancel == true) {
  return;
}

But it looks like eventArgs._cancel is false when TabRowContextMenu fires, even though it fires after PortletContextMenu... so likely the eventArgs object is different.

Any ideas on how I may get around this?

Thanks!

[Mira]

Hello B,

I have followed your scenario and prepared a sample project for you demonstrating how the desired functionality can be implemented. You can find it attached to this message.

I hope it helps.

Regards,
Mira
the Telerik team