Need access to eventArgs.get_DomEvent() from button OnCommand

[Julian]

I have a grid where a user can right click on a row and a popup menu is displayed. Well I don't like right click functionality on a row in a webpage because it's not really standard UI behavior. I want to have the user click a button in the row to then show this same popup dialog.

I'm using a GridButtonColumn with the OnCommand.

So far I've not been able to get access to the get_DomEvent.

You can see in the javascript function I call that when I attempt to show the menu dialog that the "get_DomEvent" is
not a method that is available to me in the eventArgs. Is there some way I can get access to the get_DomEvent after
clicking on a button within the row of the grid?

Here is the code:

ASPX:

<Columns>

                            <telerik:GridTemplateColumn HeaderStyle-Width="5px"><ItemTemplate> </ItemTemplate></telerik:GridTemplateColumn>

                            <telerik:GridHyperLinkColumn HeaderStyle-Width="70px" DataTextField="CustomerNumber" DataNavigateUrlFields="CustomerNumber" DataNavigateUrlFormatString="~\Common\CustomerEdit.aspx?Customer={0}" HeaderText="Cust No." SortExpression="CustomerNumber" UniqueName="CustomerNumber" />

                            <telerik:GridHyperLinkColumn HeaderStyle-Width="300px" DataTextField="CustomerName" DataNavigateUrlFields="CustomerNumber" DataNavigateUrlFormatString="~\Common\CustomerEdit.aspx?Customer={0}" HeaderText="Name" SortExpression="CustomerName" UniqueName="CustomerName" />

                            <telerik:GridBoundColumn HeaderStyle-Width="125px" DataField="Address.City" HeaderText="City" SortExpression="Address.City" UniqueName="City" />

                            <telerik:GridBoundColumn HeaderStyle-Width="125px" DataField="Address.State" HeaderText="State" SortExpression="Address.State" UniqueName="State" />

                            <telerik:GridBoundColumn HeaderStyle-Width="75px" DataField="Address.ZipCode" HeaderText="ZipCode" SortExpression="Address.ZipCode" UniqueName="ZipCode" />

                            <telerik:GridBoundColumn HeaderStyle-Width="55px" DataField="Status" HeaderText="Status" SortExpression="Status" UniqueName="Status" />

                            <telerik:GridHyperLinkColumn HeaderStyle-Width="50px" DataNavigateUrlFields="CustomerNumber" DataNavigateUrlFormatString="~\Common\UserList.aspx?Customer={0}" HeaderText="Show" Text="Users" />

                            <telerik:GridHyperLinkColumn HeaderStyle-Width="50px" DataNavigateUrlFields="CustomerNumber" DataNavigateUrlFormatString="~\Returns\FilingEntityList.aspx?Customer={0}" Text="Entities" />

                            <telerik:GridButtonColumn ButtonType="PushButton" DataTextField="Status"  CommandName="CustomerRadGridUpdateStatusMenu" UniqueName="ChangeStatus" />

                        </Columns>

                        <PagerTemplate>

                            <vtx:GridPager ID="gridPagerControl" AddLabel="Add Customer" OnAddClicked="AddNewCustomerButton_Click" runat="server" />

                        </PagerTemplate>

                    </MasterTableView>

                    <ClientSettings>

                        <ClientEvents OnRowContextMenu="CustomerRadGridRowContextMenu"

                         OnCommand="CustomerRadGridUpdateStatusMenu"

                        />

                        <Selecting AllowRowSelect="True" />

                    </Client

JavaScript:

// Select row prior to context menu appearing

           function CustomerRadGridUpdateStatusMenu(sender, eventArgs)

           {

               // Get row index

               if (eventArgs.get_commandName() == "CustomerRadGridUpdateStatusMenu")

               {

                   var MasterTable = sender.get_masterTableView();

                   var index = eventArgs.get_commandArgument();

                   var row = MasterTable.get_dataItems()[index]; 

               }

 

               // Find row and select it

               sender.set_activeRow(row.get_element());

 

               // Fetch customer number   

               var columnCell =  MasterTable.getCellByColumnUniqueName(row, "CustomerNumber");

                 

 

               $get(clientID + 'customerNumberDisplay').innerHTML = columnCell.innerText;

               $get(clientID + 'customerNumberHidden').value = columnCell.innerText;

 

               // Fetch status

               columnCell = MasterTable.getCellByColumnUniqueName(row, "Status");

 

               $get(clientID + 'status' + columnCell.innerHTML).checked = true;

               $get(clientID + 'statusInactive').disabled = true;

               $get(clientID + 'statusActive').disabled = false;

               $get(clientID + 'statusDisabled').disabled = false;

               $get(clientID + 'statusDeleted').disabled = false;

                

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

 

               if (columnCell.innerHTML == "Inactive")

               {

                   $get(clientID + 'statusActive').disabled = true;

                   $get(clientID + 'statusDisabled').disabled = true;

               }

 

               // Apply security as last option

               if (!allowDelete && !allowDisable)

               {

                   menu.findItemByValue("CS").disable();

               }

               else

               {

                   if (!allowDelete)

                   {

                       $get(clientID + 'statusDeleted').disabled = true;

                   }

 

                   if (!allowDisable)

                   {

                       $get(clientID + 'statusDisabled').disabled = true;

                   }

               }

 

               // Show menu

               var domEvent = eventArgs.get_domEvent();

               menu.show(domEvent);

 

               eventArgs.cancelBubble = true;

               eventArgs.returnValue = false;

 

               if (eventArgs.stopPropagation)

               {

                   eventArgs.stopPropagation();

                   eventArgs.preventDefault();

               }

           }

[Marin]

Hello Julian,

Unfortunately the domEvent property is not accessible in the OnCommand client-side event for the grid. One possible workaround is to use a GridTemplateColumn (instead of the GridButtonColumn) with a standard ASP button in it, handle its OnClientClick event and execute the same logic there. You can pass the item index as a second argument to the onclick function from the ItemDataBound event:

void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem dataItem = (e.Item as GridDataItem);
                Button btn = dataItem["tempCol2"].Controls[1] as Button;
                btn.OnClientClick = "btnClick(event,"+dataItem.ItemIndex+")";
            }
        }

function btnClick(e, itemIndex)
 {
     // 'e' represents the actual dom event
     //execute logic from CustomerRadGridUpdateStatusMenu here
}

Kind regards,
Marin
the Telerik team

[Michelle]

Please help.  I am trying to implement this functionality.  It only works the first time.  If I click on the button in the grid and click on a context menu item, it works great.  However, the next time I try to click on a button, the context menu opens briefly and then closes.  Thanks!

[Marin]

Hello,

It depends how you have configured the context menu to open on button click and if there is any other code that can force it to close the second time. Normally we recommend using the RadMenu client-side API to configure when the menu is shown and on what event. More information is available in here:
http://www.telerik.com/help/aspnet-ajax/menu-client-side-objects.html 
As you can the context menu has show and showAt methods which can be useful in this case.
An online example can also be found here showing a context menu for the Ship City column in the grid:
http://demos.telerik.com/aspnet-ajax/grid/examples/columns-rows/columns/context-menu/defaultcs.aspx


Regards,
Marin
Telerik