Access ListView Item when a ContextMenu is opened

[Sean]

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?

[Dimiter Madjarov]

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

 

 

[Sean]

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>
</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

[Dimiter Madjarov]

Hi Sean,


Could you please make sure that the currently used version is Q2 2014 SP1 (2014.2.903)? There was similar issue in previous versions, which was fixed in the official release.

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

 

 

[Sean]

Hi Dimiter, 

Updating to version 2014.2.903 worked! The e.target attribute is now returning a single ListView item.

<div class="product k-state-border-down" data-uid="cdcd109e-307c-4f48-8546-d0d9b022397e" role="option"
 aria-selected="false">
 ...
</div>

Thanks for your help!

[Dimiter Madjarov]

Hello Sean,


Thanks for the update. Have a great day!

Regards,
Dimiter Madjarov
Telerik