Clever Geek Handbook

How do I get the current line in Kendo context menu?

I have a Kendo context menu for a Kendo grid. I want to extract the value of the current row. It's my opinion:

@(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 am getting the value Undefined

for e

. How can I retrieve the current line? And can I extract Model.Id

which is not related in columns?

+3


source to share


3 answers


You can use event Select

:

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

Then select the selected item as follows:

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 with the right mouse button, it will not select the default row, but item

will undefined

. Add this javascript to make sure the row is selected (note your grid should 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 an ID, you 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);
    })
)
+2


source


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



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

        alert(item.SomeColumn);
    }
+2


source


This approach only works when your grid is a Ajax

snap . When you have Server

a binding , $(e.target).data("kendoGrid")

has a value of null / undefined.

In this case, I did the following:

  • Define a template on a 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>);
...

  • Later, in the select

    context menu handler , 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 triggered the event, you can use $(e.item)

.

+1


source






More articles:


All Articles