Get Current row's data from the click of context menu's item

[GPC]

 i have a Telerik grid with the following code.

@(
            Html.Kendo().Grid<IMCC.PAS.Models.ProjectViewModel>()
            .Name("ProjectsGrid")
            .Scrollable(scr => scr.Height("auto"))
            .Columns(columns =>
            {
                columns.Template(t => { }).Title("S No").ClientTemplate("#=renderNumber()#").Width("60px");
                columns.Bound(c => c.project_no).Width(100);
                columns.Bound(c => c.title);
                columns.Bound(c => c.start_date).Width(120);
                columns.Bound(c => c.finish_date).Width(120);
                columns.Bound(c => c.project_status).Width(100);
                columns.Bound(c => c.project_type).Width(130);
                columns.Bound(c => c.project_manager).Width(120);


                columns.Command(command => { command.Custom("EditClientsOfProject").Click("EditClientsOfProject").Text("Clients"); }).Width(90);
                columns.Command(command => { command.Custom("editProject").Click("EditProject").Text("Edit"); command.Destroy().Text("Del"); }).Width(160);
            })
            .Events(ev => ev.DataBinding("onDataBinding"))
            .ToolBar(toolbar =>
            {
                toolbar.Custom().HtmlAttributes(new { id = "RegisterProject", title = "Register" });
            })
            .Editable(editable => editable.Mode(GridEditMode.PopUp))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.id))
                .Read(read => read.Action("Projects_Read", "Projects"))
                .Destroy(destroy => destroy.Action("Project_Destroy", "Projects"))
            )
        )

 

and I have linked a context menu with this grid like below.

@(
            Html.Kendo().ContextMenu()
            .Name("menu")
            .Target("#ProjectsGrid")
            .Events(ev => { ev.Select("onSelect"); })
            .Orientation(ContextMenuOrientation.Vertical)
            .Animation(animation =>
            {
                animation.Open(open =>
                {
                    open.Fade(FadeDirection.In);
                    open.Duration(500);
                });
            })
            .Items(items =>
            {
                items.Add().Text("Show Clients");
                items.Add().Text("Edit");
                items.Add().Text("Delete");
            })
        )

I want to capture the click of the context menu items like below.

function onSelect(e) {
        if (e.item.textContent == "Show Clients") {
            EditClientsOfProject(e.target);
        }
        else if (e.item.textContent == "Edit") {
            alert("Edit");
        }
        else if (e.item.textContent == "Delete") {
            alert("Delete");
        }
    }

EditClientsOfProject function is supposed to work on the grid row for which user selected the "Show Clients" option. How do I pass the current row in "e" as argument to EditClientsOfProject function from onSelect event handler? 

 

[Eyup]

Hi,

You can use the following approach for the grid item's index:
https://dojo.telerik.com/IzozAcUY

And check this one for the menu item:
https://dojo.telerik.com/IzozAcUY/3

If you prefer, I can provide samples with MVC Grid helper.

I hope this will prove helpful.

Regards,
Eyup
Progress Telerik

[GPC]

Yeah I will appreciate if you can provide samples of MVC grid Helper.

[Eyup]

Hi,

We will prepare an MVC sample to demonstrate this and send it to you shortly.
Thank you for your patience in advance.

Regards,
Eyup
Progress Telerik

[Eyup]

Hello,

Thank you for you patience.
You can achieve this requirement by specifying a Filter property to the menu definition:

Html.Kendo().ContextMenu()
...
.Filter("td[role='gridcell']")

And access the corresponding index in the selected index changed event handler as follows:

function onSelect(e) {
    var index = e.target.parentElement.rowIndex;
    var recordID = $("#grid").data("kendoGrid").dataSource.data()[index].ProductID;
    ...

I am also sending a sample runnable web site as mentioned. Run the attached application and verify that it works as expected on your side, too.

Regards,
Eyup
Progress Telerik