BuyLog In
Ticket T674688
Visible to All Users

ASPxGridView - How to show a context menu when empty space is clicked

created 6 years ago

Hi,

I have a webpage that has several grids, they all reuse the same context menu methods and this works fine when selecting a row. But when I select the blank area below a row or an empty data row the default browser menu appears.

When I look at the options within the SettingsContextMenu it allows for a menu to be visible when clicking on all areas of the grid except for the grid body.

ASPx
<SettingsContextMenu EnableColumnMenu="True" Enabled="true" EnableFooterMenu="True" EnableGroupPanelMenu="True" EnableRowMenu="True" EnableGroupFooterMenu="True"></SettingsContextMenu>

Is there a way to show the context menu when clicking in this area, without creating a popup menu for each grid and overriding the grids context menu even to show the popup menu? I was hoping to do this without going to all that hassle as the built in context menu works well.

Comments (2)
DevExpress Support Team 6 years ago

    Hello,
    Currently, the issue is not completely clear to me.
    >> But when I select the blank area below a row or an empty data row the default browser menu appears.
    What do you mean by 'select the blank area'? Also, when I clicked the  empty data row, the context menu appeared. See the attached video.
    Would you please create a screencast that demonstrates the problematic behaviour? Thank you in advance.

    X X
    Xander75 6 years ago

      By select I meant right click, which is how a context menu is shown. I also meant that when you click the blank area in the grid below the empty data row or any rows that there is no way to show the default context menu with a New & Refresh menu item.

      I know that clicking the empty data row or rows will show the context menu. What I am asking is why is there no easy way to also show the context menu when right clicking in the blank area of the main body of a grid?

      Sign in to comment on this post

      Answers approved by DevExpress Support

      created 6 years ago (modified 6 years ago)

      Hi,

      UPDATED:

      As far as I understand, the VerticalScrollBarMode property is set to 'Auto' in your grid. Since VerticalScrollableHeight is 200 by default and the width of the empty row is less, this space appears. Or, you have specified the grid width explicitly. In both cases, you can use the following workaround: specify the height of the empty row so it occupies all the grid height.
      You can do this using CSS:

      CSS
      .dxgvEmptyDataRow {  
    height : 200px;  
}

      The height should be 200 if you are using default settings. Otherwise, use your custom value.
      Also, I would like to note that I passed this scenario to our developers so they can research how to improve this behavior in the future.
      Thank you for your impact.

        Show previous comments (5)
        DevExpress Support Team 6 years ago

          The example works exactly as you described. See the attached video. Would you please clarify if it demonstrates different behavior on your side?

          X X
          Xander75 6 years ago

            Hi Nataly,

            You were correct, this does indeed fix the issue with it working for only the blank area and therefore uses the default context menu for the rows to show the edit & delete options. I made a slight change though to the code, firstly I changed this so it would work with multiple grids using a selectedGrid variable that is set when the popupMenu appears. Secondly, I added the code: ASPxClientUtils.GetDocumentScrollTop() to ensure the popupMenu is displayed correctly on screen if the page has been scrolled. See the code below, just in case anyone else needs to do something similar.

            However, I do believe that this would be better implemented as a part of the grids context menu so as not to have to require to do this as a workaround in future. Hopefully the R&D team can implement this in a future release.

            Thank you for your help on this, it was one of those issues that the users just wouldn't stop going on about despite everything else working perfectly.

            JavaScript
            var selectedGrid = null;  

function OnInit(s, e) {  
    ASPxClientUtils.AttachEventToElement(s.GetMainElement(), "contextmenu", function (event) {  
        if (event.target.className == "dxgvCSD") {  
            selectedGrid = s;  
            event.preventDefault();  
            popupMenu.ShowAtPos(event.x, event.y + ASPxClientUtils.GetDocumentScrollTop());  
        }  
    });  
}  

function OnInitItemClick(s, e) {  
    switch (e.item.name) {  
        case "New":  
            selectedGrid.AddNewRow();  
            break;  
        case "Refresh":  
            selectedGrid.Refresh();  
            break;  
    }  
}
            DevExpress Support Team 6 years ago

              Thank you for sharing your code. I am happy to hear that the issue was resolved.

              Sign in to comment on this post

              Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

              Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.