This is a migrated thread and some comments may be shown as answers.

Context menu is displaced (two grid, two menus)

2 Answers 115 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Edward
Top achievements
Rank 1
Edward asked on 04 Feb 2019, 08:59 PM

Have a grid and context menu defined in a partial view.  When the grid is positioned where the page is scrolled to the top then the context menu opens at point of right mouse click.  But as soon as page is scrolled down and grid is partially moved up and hidden from view, then the context menu is not positioned correctly on the y axis.

 

@using Kendo.Mvc.UI

@using NEP_Deconstruction.Data
@{
    const string ValuesSuffix = "-Values";
}

@(Html.Kendo().Grid<NEP_Deconstruction.Data.Models.ApprovalViewModel>()
                    .Name("approval_grid")
                    .Columns(columns =>
                    {
                        columns.Bound(o => o.ID)
                            .EditorTemplateName("IntegerReadonly");
                        columns.Bound(o => o.ApprovalNumber)
                            .EditorTemplateName("IntegerReadonly");
                        columns.Bound(o => o.SourceCount)
                            // other column definitions
                        columns.Bound(o => o.Comment);

                        columns.Command(command =>
                        {
                            command.Edit().Text(" ").IconClass("k-icon k-i-edit").HtmlAttributes(new { style = "min-width: auto" });
                            command.Destroy().Text(" ").IconClass("k-icon k-i-delete").HtmlAttributes(new { style = "min-width: auto" });
                        }).Width(/*210*/ 125);
                    })
                    .ToolBar(toolbar => { toolbar.Create(); /*toolbar.Save();*/ })
                    .Editable(editable =>
                    {
                        editable.TemplateName("ApprovalPopupEditor");
                        editable.Mode(GridEditMode.PopUp);
                    })
                    .Resizable(c => c.Columns(true))
                    .Reorderable(c => c.Columns(true))
                    .Filterable()
                    .Groupable()
                    .Pageable(p => p.Numeric(false).PreviousNext(false))
                    .Selectable()
                    .Sortable()
                    .Scrollable(scrollable => scrollable.Virtual(true).Endless(true))
                    .ColumnMenu()
                    .HtmlAttributes(new { style = "height:430px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .Batch(true)
                        .PageSize(100)
                        .ServerOperation(true)
                        .Events(events => events.Error("error_handler")
                                                .RequestStart("approval_grid_requeststart"))
                        .Model(model =>
                        {
                            // ***
                            // various default values set
                        })
                        .Read(read => read.Action("Read", "Approval"))
                        .Create(create => create.Action("Create", "Approval"))
                        .Update(update => update.Action("Update", "Approval"))
                        .Destroy(destroy => destroy.Action("Destroy", "Approval"))
                    )
                    .Events(events => events.Change("approval_grid_change")
                                            .DataBound("approval_grid_databound")
                                            .Edit("approval_grid_edit")
                                            .Save("approval_grid_save"))
)
@(Html.Kendo().ContextMenu()
                    .Name("approval_menu")
                    .Target("#approval_grid")
                    .Filter("tr[role='row']")
                    .Orientation(ContextMenuOrientation.Vertical)
                    .Items(items =>
                    {
                        items.Add()
                        .Text("Refresh");
                        //.ImageUrl(Url.Content("~/shared/web/toolbar/reply.png"))
                        items.Add()
                        .Text("Edit");
                        items.Add()
                        .Text("Delete");
                    })
                    .Events(e => e.Select("approval_menu_select"))
)

 

2 Answers, 1 is accepted

Sort by
0
Edward
Top achievements
Rank 1
answered on 04 Feb 2019, 09:01 PM
Title says two grids and two menus... but the problem seems to occur with two grids and one context menu for the top grid.  I removed the second context menu for the second grid.  With both context menus, both menus are displaced.
0
Edward
Top achievements
Rank 1
answered on 04 Feb 2019, 09:31 PM
This appears to be a side effect from a third party library used to lock the page scroll...  Not an issue, except to implement a workaround for the library...
Tags
Grid
Asked by
Edward
Top achievements
Rank 1
Answers by
Edward
Top achievements
Rank 1
Share this question
or