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

1 Answer 41 Views
Grid
AP
Top achievements
Rank 1
Iron
Iron
Veteran
AP asked on 18 Oct 2023, 11:21 AM

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

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 23 Oct 2023, 07:43 AM

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

Stay tuned by visiting our public roadmap and feedback portal pages. If you're new to the Telerik family, be sure to check out our getting started resources, as well as the only REPL playground for creating, saving, running, and sharing server-side code.

Tags
Grid
Asked by
AP
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Anton Mironov
Telerik team
Share this question
or