Sub grid drop-down list inline edit filtered on parent grid value

[AP]

I have a sub grid which uses inline editing and editor templates to present drop-down lists of available values.  One of these drop-down lists has a large list of potential values which depend on a value in the parent record.

I have got this working by creating an editor template for the drop-down like this:-

@model object

@(Html.Kendo().DropDownList()
        .Name("Filter2")
        .DataValueField("Code")
        .DataTextField("Description")
        .ValuePrimitive(true)
        .OptionLabel("Select detail")
      .DataSource(src => src.Read(rd => rd.Action("GetFilter2s", "Home").Data("additionalData")))
    )

The additional data comes from a function:-

function additionalData(e) {


        return {
            detailType: detailTypev
        };
    }

The detailTypev variable is set using a function called on the beforeEdit event of the sub grid, called via a helper to pass the correct parent grid ID:-

@helper gridTemplateHelper(string uID)
{

    string f = "function(e){Subedit.call(this, e, \"" + uID + "\");}";
    @(f)

}

 function Subedit(e,gridName) {
      
       // alert(gridName);

        var row = e.sender.tbody.find('tr[data-uid="' + e.model.uid + '"]');

        if (lasteditedUID != e.model.uid)
        {
            lasteditedUID = e.model.uid;

            console.log(e.model.uid);

            e.preventDefault();  // prevent default editing
        

      

            $.ajax({
                type: "POST",
                async: true,
                contentType: "application/json;charset=utf-8",
                url: "@Url.Content("~/Home/GetDetailTypeForMetric")",
                data: '{"metricID":"' + gridName + '"}',
            dataType: "json",
            success: function (dataResult) {
                if (dataResult.Success == true) {

                    detailTypev = dataResult.DetailType;

                    
                    e.sender.editRow(row);

                    console.log(detailTypev);

                }
                else {


                    alert('An error has occurred.\n' + dataResult.Error);


                }

            },
            error: function () {

                alert('An error has occurred.');

            }
        });

        }

    }

This function checks if the row id is the same one just called (to prevent an endless loop of starting and cancelling an edit) and then prevents the edit. Then an ajax call is made to obtain the value to filter the drop-down on and the row opened for edit.

This works, but it seems a bit hacky. Is there a more elegant way of passing a filter to a drop-down list in a sub grid?

Thanks

[Anton Mironov]

Hello Andrew,

Thank you for the code snippets and the details provided.

The EditorTemplate for the DropDownList in the child Grid will execute its Read Action on opening it.

This is the reason for using these handlers and I could say this one is perfectly implemented and is the recommended approach for the case.

If further information or assistance is needed, do not hesitate to contact me and the Team.

 

Kind Regards,
Anton Mironov
Progress Telerik