javascript - How to get the current row in a Kendo context menu? - Stack Overflow

admin管理员组

文章数量:1296317

I have a Kendo context menu for a Kendo grid. I want to extract value of current row. This is my view:

@(Html.Kendo().Grid<Class>()
    .Name("reqRows")
    .Columns(columns =>
    {
        columns.Bound(x => x.0);
    })
)

@(Html.Kendo().ContextMenu()
    .Name("brc")
    .Target("#reqRows")
    .Items(items =>
    {
        items.Add()
            .Text("1").LinkHtmlAttributes(new { onClick = "confirm()" });
    })
)

<script>
    function confirm(e) {
        alert(e);
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert(dataItem.0);
    }
</script>

I get Undefined value for e. How can I extract the current row? And can I extract Model.Id, which is not bound in columns?

I have a Kendo context menu for a Kendo grid. I want to extract value of current row. This is my view:

@(Html.Kendo().Grid<Class>()
    .Name("reqRows")
    .Columns(columns =>
    {
        columns.Bound(x => x.0);
    })
)

@(Html.Kendo().ContextMenu()
    .Name("brc")
    .Target("#reqRows")
    .Items(items =>
    {
        items.Add()
            .Text("1").LinkHtmlAttributes(new { onClick = "confirm()" });
    })
)

<script>
    function confirm(e) {
        alert(e);
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        alert(dataItem.0);
    }
</script>

I get Undefined value for e. How can I extract the current row? And can I extract Model.Id, which is not bound in columns?

• javascript
• c#
• kendo-ui
• kendo-asp-mvc

Share Improve this question Follow edited Oct 21, 2015 at 22:14 Nic 12.9k2020 gold badges8484 silver badges106106 bronze badges asked May 3, 2015 at 8:22 AkbariAkbari 2,40988 gold badges4646 silver badges8787 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

You can use the Select event:

@(Html.Kendo().ContextMenu()
    .Name("brc")
    .Target("#reqRows")
    .Items(items =>
    {
      items.Add().Text("1");
    })
    .Events(e => e.Select("selectItem"))
)

Then get the selected item like this:

function selectItem(e) {
    var grid = $(e.target).data("kendoGrid");
    var item = grid.dataItem(grid.select());
    var data = item.SomeColumn;
}

If you open the context menu using the right mouse button, it won't select the row by default and item will be undefined. Add this javascript to ensure the row is selected (note that your grid will need to be .Selectable()):

$("#reqRows").on("mousedown", "tr[role='row']", function (e) {
    if (e.which === 3) {
        $("#reqRows tbody tr").removeClass("k-state-selected");
        $(this).addClass("k-state-selected");
    }
});

If you want ID, you'll need to bind it to the grid. Just keep it hidden:

@(Html.Kendo().Grid<Class>()
    .Name("reqRows")
    .Columns(columns =>
    {
        columns.Bound(x => x.Id).Hidden();
        columns.Bound(x => x.SomeColumn);
    })
)

This worked for me, and there's no need for the code that adds/removes the k-state-selected class:

    function selectItem(e)
    {
        var item = e.sender.dataItem(e.target);

        alert(item.SomeColumn);
    }

The above approach only works when your grid has Ajax binding. When you have Server binding, the $(e.target).data("kendoGrid") is null/undefined.

In this case, I did the following:

1. Define a template in an column with some hidden fields:

   ...
   columns.Bound(pg => pg.FileName)
       .Title("My column")
       .Template(
           @<text>
               @* Store information for JS in hidden row fields. *@
               <input type="hidden" class="unique-id-hidden" value="@item.UniqueID" />
   
               @* Output the visible content. *@
               <div>
                   @item.FileName
               </div>
           </text>);
   ...
   

2. Later, in the select handler of the context menu, I do something like:

   function selectItem(e) {
       var uniqueID = $(e.target).closest("tr").find('.unique-id-hidden').first().val();
   
       // Do something with the data.
   }
   

To get the menu item that fired the event, you can use $(e.item).

本文标签： javascriptHow to get the current row in a Kendo context menuStack Overflow