This is a migrated thread and some comments may be shown as answers.

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

4 Answers 739 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GPC
Top achievements
Rank 1
GPC asked on 05 Sep 2018, 01:31 PM

 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? 

 

4 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 06 Sep 2018, 12:20 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
GPC
Top achievements
Rank 1
answered on 06 Sep 2018, 01:32 PM
Yeah I will appreciate if you can provide samples of MVC grid Helper.
0
Eyup
Telerik team
answered on 10 Sep 2018, 01:30 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Accepted
Eyup
Telerik team
answered on 17 Sep 2018, 05:44 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
GPC
Top achievements
Rank 1
Answers by
Eyup
Telerik team
GPC
Top achievements
Rank 1
Share this question
or