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

Access ListView Item when a ContextMenu is opened

5 Answers 614 Views

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

Sean asked on 26 Sep 2014, 05:56 PM

Hi, I have a ListView that is the target of a ContextMenu, when you right-click on a ListView item the ContextMenu opens. The next action is the user selecting a ContextMenu option. I am trying to access the data for the ListView item that was right clicked to open the ContextMenu.

I can do this if I bind a double-click event handler to the each ListView item and open the ContextMenu in JavaScript.

@(Html.Kendo().ListView<SchedulerMVC.Models.EmployeeViewModel>()

.Name("listview-context-menu")

.TagName("div")

.ClientTemplateId("template")

.DataSource(dataSource =>

{

dataSource.Read(read => read.Action("Data", "ContextMenu").Type(HttpVerbs.Get));

dataSource.PageSize(5);

})

.Selectable()

.Events(e =>

{

e.DataBound("setItemDoubleClickEvent");

})

)

@(Html.Kendo().ContextMenu()

.Name("context-menu")

.Target("#listview-context-menu")

.Orientation(ContextMenuOrientation.Vertical)

.Items(items =>

{

items.Add().Text("MenuItem").SpriteCssClasses("k-icon k-i-tick");

})

.Events(events => events.Select("selectContext"))

)

// ListView DoubleClick

function setItemDoubleClickEvent() {

var items = $(".product");

items.dblclick(function (e) {

var listView = $("#listview-context-menu").data("kendoListView");

var contextMenu = $("#context-menu").data("kendoContextMenu");

var uid = $(this).data("uid");

var item = listView.dataSource.getByUid(uid);

contextMenu.open(e.clientX, e.clientY);

});

}

I figured that if you are opening a ContextMenu for a ListView item there should be a direct way to access that items data. Is there any way to do this with the right-click event or within the ContextMenu select event handler?

5 Answers, 1 is accepted

answered on 29 Sep 2014, 08:26 AM

Hi Sean,

In the current case you should add the Filter() configuration option of the Context menu and filter by the ListView items. Then you could access the currently clicked one in the select event through the e.target parameter.
E.g.

Html.Kendo().ContextMenu()

.Name("context-menu")

.Target("#listview-context-menu")

.Filter("[role='option']")

function selectContext(e){

var item = e.target;

}

Regards,
Dimiter Madjarov
Telerik

Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

answered on 29 Sep 2014, 03:21 PM

I tried this and the Filter method, set to ["role='option'"] doesn't appear to filter down to individual ListView items. The e.target property still returns the entire ListView element.

Here is the innerHtml of the e.target property returned in selectContext():

<div

<div class="product" data-uid="fff33e04-adbc-45e5-9af2-918b1d51172f" role="option" aria-selected="false"

...

</div

<div class="product" data-uid="0190c516-6204-4942-b5d2-03e859009ab2" role="option" aria-selected="false"

...

</div

I still can't see a way to identify the individual ListView item that was intended as the target when the ContextMenu was opened. Perhaps the Filter method on the ContextMenu is not working as it should.

Would someone be able to take the demo page for Menu / Context Menu and extend it to access the data in a ListView item when a ContextMenu item is selected? Currently selecting a ContextMenu Item doesn't do anything with the ListView item on the demo page.

MVC ContextMenu Demo

Thanks

Accepted