RadGrid w/ Context Menu..

[Neelima]

I followed this demo to show a context menu on the RadGrid.
http://demos.telerik.com/aspnet-ajax/controls/examples/integration/gridandmenu/defaultcs.aspx?product=grid

How do I prevent context menu from showing up if the Radgrid's row is in edit mode?

[Princy]

Hello Neelima,

One suggestion is in 'OnRowContextMenu' client event check with the editIndexes of Radgrid and cancel the event if it is in edit mode.

Java Script:

<script type="text/javascript">
    function RowContextMenu(sender, eventArgs) {
        var index = $find("RadGrid1")._editIndexes[0];
        if (index == undefined) {
            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();
            }
        }
        else {
            eventArgs.set_cancel(true);
        }
    }
 </script>

Thanks,
Princy.

[Neelima]

<asp:TabContainer ID="tabGridview" runat="server">
       <asp:TabPanel ID="tabEdit" runat="server" HeaderText="Edit Reservations">
           <HeaderTemplate>
               Edit Reservations</HeaderTemplate>
           <ContentTemplate>
               <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" ShowGroupPanel="True"
                   AutoGenerateColumns="False" AllowPaging="True">
                   <GroupingSettings ShowUnGroupButton="True" />
                   <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True" ColumnsReorderMethod="Reorder"
                       ReorderColumnsOnClient="True">
                       <ClientEvents OnRowContextMenu="RowContextMenu"></ClientEvents>
                   </ClientSettings>
                   <MasterTableView EditMode="InPlace" DataKeyNames="Trip_ID" GroupLoadMode="Client"
                       PageSize="2">
                       <CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>
                       <Columns>
                                  <%--  Columns Here --%>
</Columns>
                       <EditFormSettings>
                           <EditColumn UniqueName="EditCommandColumn1">
                           </EditColumn>
                       </EditFormSettings>
                   </MasterTableView><HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Sunset"
                       EnableImageSprites="True">
                   </HeaderContextMenu>
               </telerik:RadGrid>
           </ContentTemplate>
       </asp:TabPanel>

Princy,

I'm getting this error:

Microsoft JScript runtime error: '_editIndexes' is null or not an object

Thanks
Neelima

[Princy]

Hello Neelima,

Try the following approach to access RadGrid from client side and check whether it works.

Java Script:

<script type="text/javascript">
       function RowContextMenu(sender, eventArgs) {
           var grid = sender;
           var index = grid._editIndexes[0];
           if (index == undefined) {
               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();
               }
           }
           else {
               eventArgs.set_cancel(true);
           }
       }
 </script>

Thanks,
Princy.

[Neelima]

Thanks a lot Princy
That worked. However I have another issue with this grid.

The RadGrid's pager row disappears after the postback if the number of rows is less than the page size selected from the pagers DropDownList.

For example.. Lets say ..Initially there were only 2 records. If I select page size to be 10 from the DropDownList, after the postback pager disappears.

Thanks again for your help!!
Neelima

[Princy]

Hello Neelima,

You can set PagerStyle AlwaysVisible property as 'true' to achieve this.

ASPX:

<MasterTableView>
  <PagerStyle AlwaysVisible="true" />

Thanks,
Princy.