Inline editing of kendo mvc razor grid , How to send additional unique parameter via dropdown EditorFor template while calling action method

Question

I am using kendo mvc razor grid.

version: 2015.1.408.545.

I am working on providing inline editing. In it their is one column which is having dropdown and it is bound through editor for template like this.

@(Html.Kendo().DropDownList()
            .Name("ParentGraphicsCategoryID").HtmlAttributes(new { @style = "font-size:12px", id = "ParentGraphicsCategoryID" })
            .DataTextField("Text")
            .OptionLabel("- Select Parent Graphic Category - ")
            .DataValueField("Value")
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetGraphicCategories", "CommonLookUp");
                });
            }))

The problem is : How to pass an additional parameter like id which is unique for every row , While calling "GetGraphicCategories" action method in above code ?

By following this link: http://www.telerik.com/forums/pass-grid-view-model-data-to-editor-template

@(Html.Kendo().DropDownList()
                .Name("ParentGraphicsCategoryID").HtmlAttributes(new { @style = "font-size:12px", id = "ParentGraphicsCategoryID" })
                .DataTextField("Text")
                .OptionLabel("- Select Parent Graphic Category - ")
                .DataValueField("Value")
                .DataSource(source =>
                {
                    source.Read(read =>
                    {
                        read.Action("GetGraphicCategories", "CommonLookUp").Data("getParentID()");
                    });
                }))

function getParentID() {
    var row = $(event.srcElement).closest("tr");
    var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
    var dataItem = grid.dataItem(row);
    //where the OrderID is the model ID
    return { statusId: dataItem.StatusId } }

It is suggeted in above url's code. But unable to get row value while calling "getParentID()" in "Data" method as it is called through dropdowns editor for template .Hence grid variable value is null.

Code for creating Grid is below:

@(Html.Kendo().Grid<GraphicsCategoryModel>()
    .Name("GraphicsCategory")
    .Columns(columns =>
    {
        columns.Bound(a => a.GraphicsCategoryName).Title("Graphics Category Name").Width(150);
        columns.Bound(a => a.ParentGraphicsCategoryName).EditorTemplateName("ParentGraphicCategoryList").Title("Parent Graphics Category Name").Width(150);
        columns.Command(command => { command.Edit(); }).Title("Actions").Width(70);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable(pageable => pageable.Enabled(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(10)
        .Events(events => { events.Error("error_handler"); })
        .ServerOperation(true)
        .Model(model =>
        {
            model.Id(p => p.GraphicsCategoryID);
            model.Field(p => p.GraphicsCategoryID).Editable(false);
        })
        .Create(update => update.Action("InsertOrUpdateGraphicsCategory", "GraphicsCategories"))
        .Update(update => update.Action("InsertOrUpdateGraphicsCategory", "GraphicsCategories"))
        .Destroy(update => update.Action("DeleteAdminAreaOwnership", "AdminAreaOwnership"))
        .Read(read => { read.Action("GetAllGraphicsCategories", "GraphicsCategories"); read.Type(HttpVerbs.Get); })
            ).Events(p => p.DataBound("generalColumnBound")))

Answer 1

The reason you are unable to get the row and grid in getParentID() is because you are using InLine edit mode.

In InLine edit mode, event.srcElement is the Edit button. But, when you click the button to enter edit mode, kendo removes the Edit button from the DOM. As a result, by the time you are inside getParentID(), the button is gone and the $(event.srcElement) can no longer return the button, so you can't can any .closest() elements from it to find the row and grid.

The reason it works in your linked example is because they are using InCell edit mode where event.srcElement will be the DropDownList which is still in the DOM inside getParentID() and .closest() will work, etc.

A simple solution is to just use InCell editing where your current technique should work. Assuming you don't want that though...

You can try changing getParentID() such that it is defined with the Grid(instead of with the DropDownList/EditorTemplate) and implement it like:

function getParentID() {
    var grid = $("#GraphicsCategory").getKendoGrid();
    var row = $("#GraphicsCategory").find("tr.k-grid-edit-row");
    var dataItem = grid.dataItem(row);

    return ...
}

This relies on knowing which specific Grid you are in(which is why it needs to be defined with the Grid) and then finds the row being edited based on the k-grid-edit-row class that kendo applies to the current row when it puts it into edit mode.

There are others ways to do this that are more generic(don't require a getParentID() specific to each Grid) but they involve using more javascript to specify a custom editor for the column instead of an MVC/Razor EditorTemplate and I'm not sure if you want to go down that road.