Access ListView Item when a ContextMenu is opened

6 posts, 1 answers
  1. Sean
    Sean avatar
    3 posts
    Member since:
    May 2014

    Posted 26 Sep 2014 Link to this post

    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?


  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 29 Sep 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Sean
    Sean avatar
    3 posts
    Member since:
    May 2014

    Posted 29 Sep 2014 in reply to Dimiter Madjarov Link to this post

    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
  5. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 30 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Sean
    Sean avatar
    3 posts
    Member since:
    May 2014

    Posted 30 Sep 2014 in reply to Dimiter Madjarov Link to this post

    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!
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 01 Oct 2014 Link to this post

    Hello Sean,


    Thanks for the update. Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready