BuyLog In
Bug Report T624124
Visible to All Users

Menu placed in the DataGrid cell template displays the Down arrow after upgrade to 17.2.7

created 7 years ago

I have embedded a dxMenu in a column in DataGrid like this

HTML
@(  
 Html.DevExtreme().DataGrid<MyObject>()  
.Columns(col=>{  
col.Add()  
            .Option("cellTemplate", new JS("actionCellTemplate"))  
            .DataType(GridColumnDataType.Object)  
            .Width(40)  
            .Caption("")  
            .AllowExporting(false)  
            .AllowFiltering(false)  
            .AllowHiding(false)  
            .Fixed(true)  
            .FixedPosition(HorizontalEdge.Right)  
            .ShowInColumnChooser(false)  
            .Alignment(HorizontalAlignment.Center);  
})  
)

with script

JavaScript
var actionMenuData = [{ text: "", icon: "menu", items: [{ text: "Details", value: "details" }, { text: "Permissions", value: "permissions" }, { text: "Plans", value: "plans" }, { text: "Application Secret", value: "secret" }] }];  

function actionCellTemplate(cellElement, cellInfo) {  
    $('<div>').dxMenu({  
        items: actionMenuData,  
        showFirstSubmenuMode: { name: 'onHover', delay: { show: 0, hide: 0 } },  
        hideSubmenuOnMouseLeave: true,  
        onItemClick: function (e) {  
            if (e.itemData.value) {  
                switch (e.itemData.value){  
                    case "details":  
                        window.location = '@Url.Action("Details","Application")/' + cellInfo.data.ID;  
                        break;  
                    case "permissions":  
                        window.location = '@Url.Action("Permissions", "Application")/' + cellInfo.data.ID;  
                        break;  
                    case "plans":  
                        window.location = '@Url.Action("ChargePlans", "Application")/' + cellInfo.data.ID;  
                        break;  
                    case "secret":  
                        window.location = '@Url.Action("Secret", "Application")/' + cellInfo.data.ID;  
                        break;  
                }  
            }  
        }  
    }).appendTo(cellElement);  
}

The menu appeared as 3 strips before upgrading to 17.2.7.  After the upgrade, the menu has a down arrow overlapped on the menu icon.  How can I remove the down arrow?

Comments (1)
DevExpress Support Team 7 years ago

    Hi Edwin,

    Thank you for bringing this to our attention. I've reproduced the issue. We need additional time to research it. We will update the ticket when we have any news.

    In the meantime, override the "dx-menu .dx-menu-horizontal .dx-menu-item-popout:before" CSS rule in the following manner:

    CSS
    .dx-datagrid .dx-menu .dx-menu-horizontal .dx-menu-item-popout:before {  
    content: "";  
}

    The https://codepen.io/anon/pen/qogKpP?editors=0110 example shows this approach in action.

    Sign in to comment on this post

    Answers approved by DevExpress Support

    created 7 years ago (modified 7 years ago)

    We have fixed the issue described in this ticket and will include the fix in our next maintenance update. To apply this solution before the official update, request a hotfix by clicking the corresponding link for product versions you require.

    Note: Hotfixes may be unavailable for beta versions and updates that are about to be released.

    Additional information:

    We've managed to fix the issue. After applying the hotfix, the "Down" arrow will be displayed properly. If you wish to hide it in dxDataGrid, override our CSS rules in the following manner:

    CSS
    .dx-data-grid .dx-menu .dx-menu-item-popout {  
  display: none;  
}  

.dx-data-grid .dx-menu .dx-icon.dx-icon-menu {  
  margin: 0px 3px;  
}
      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.