MVC Grid popup template with dropdown

[Joe]

I have a grid popup edit template that includes a Kendo dropdown.  I need to pass a model property value as the parameter to the Read() method of the dropdown.  But the model is null when the Read() method gets called.   So the value is always 0.  

I've defined the Field in the parent grid.  I even added it as a column too.  Model.ProductId is always 0.

How do I pass a value from the popup editor model to the controller for the dropdown?

                    @(Html.Kendo().DropDownList()
                        .Name("WarehouseId")
                        .OptionLabel("Select a warehouse...")
                        .HtmlAttributes(new { style = "width: 100%" })
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Value("-1")
                        .DataSource(source =>
                        {
                            source.Read(read =>
                            {
                                read.Action("Inventory_Warehouse_Read", "Purchasing", new { productId = @Model.ProductId});
                            });
                        })
                        .Height(400)
                        )

[Mihaela]

Hello Joe,

By design, the popup editor is serialized during the Grid's initialization at the client-side hence the Model server-side properties are not available at this time. Having this in mind, you can pass the value of a Model property through the Read request of the DropDownList editor as follows:

• Set the AutoBind(false) option to ensure that the DropDownList will not trigger the Red request during its initialization:

@model GridViewModel

@(Html.Kendo().DropDownList()
.Name("WarehouseId")
.AutoBind(false)
...
.DataSource(source =>
{
     source.Read(read =>
     {
         read.Action("Inventory_Warehouse_Read", "Purchasing");
      });
})
.Height(400)
)

• Handle the Edit event of the Grid, check if the operation is "Update" (if the record is not a new one), and get a reference to the DropDownList editor, which is available when the Popup editor opens.
• Call the read() method of the DropDownList DataSource to trigger the Read request and pass the desired Model field through the request. The "e.model" event data contains the data item of the currently edited record.

@(Html.Kendo().Grid <GridViewModel>()
    .Name("grid")
    .Events(ev => ev.Edit("onEdit")
    ...
)

<script>
    function onEdit(e) {
        if (!e.model.isNew()) {
            $("#WarehouseId").data("kendoDropDownList").dataSource.read({ productId: e.model.ProductId });
        }
    }
</script>

Would you give this example a try and let me know if it works as expected at your end?

Regards,
Mihaela
Progress Telerik

[Joe]

What an outstanding response, worked perfectly!  I was so close too, literally two lines of code :)

Your explanation helped a lot.  I understand how these popup editor templates much better now.

By disabling auto-bind, you prevent the dropdown from calling read() with id = 0 so the grid event can call the dropdown read() with the actual id from model.

[Mihaela]

Thank you for your feedback, Joe! I am glad that the solution was helpful to you.

Your assumption is correct - the edited data item is available as soon as the Edit event triggers (when the Popup editor opens).

Best,
Mihaela