Popup Editing of Grid<dynamic>

[Alex]

I am trying to use popup editing with a grid that uses <dynamic> so that I can pass in any model and re-use it.I was able to reproduce my issue by editing the "editing_popup.cshtml" file in the "Kendo.MvcExamples" solution.

 

Notice that I explicitly told the template "ProductViewModel" to be used. Initally it wasn't using that template, until I moved it into Views\Shared\EditorTemplates. But once I did I got the same error I get from my own project:

 

Inner Exception: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Object', but this dictionary requires a model item of type 'Kendo.Mvc.Examples.Models.ProductViewModel'.

 

I understand WHY, I'm getting this error; the grid basically treats dynamic as an object and that is what is being sent to the viewmodel's template ("ProductViewModel.cshtml"). My question, is is there someway I can get around it, even if I have to pass in a "Type" object.

 

@(Html.Kendo().Grid<dynamic>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound("ProductName");
        //columns.Bound(p => p.ProductName);
        //columns.Bound(p => p.UnitPrice).Width(120);
        //columns.Bound(p => p.UnitsInStock).Width(120);
        //columns.Bound(p => p.Discontinued).Width(120);
        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ProductViewModel"))
    .Pageable()
    .Sortable()
    .Scrollable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Events(events => events.Error("error_handler"))
        //.Model(model => model.Id(p => p.ProductID))
        .Model(model => model.Id("ProductID"))
        .Create(update => update.Action("EditingPopup_Create", "Grid"))
        .Read(read => read.Action("EditingPopup_Read", "Grid"))
        .Update(update => update.Action("EditingPopup_Update", "Grid"))
        .Destroy(update => update.Action("EditingPopup_Destroy", "Grid"))
    )
)
<script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
</script>

[Boyan Dimitrov]

Hello Alex,

Indeed the problem is caused due to the fact the template expects a Kendo.Mvc.Examples.Models.ProductViewModel class, but it receives a System.Object class. There is no other workaround except to pass exact same model (in terms of type) to the template. If you change the Model class on template level you are able to access only the properties of the System.Object class instead of the Kendo.Mvc.Examples.Models.ProductViewModel. 

I would suggest to change the model for the popup template to be System.Object and define the template without EditorFor helpers, but with simply HTML elements or basic HTML helper and add the correct name attributes and class to these elements in order the two-way binding between the model and HTML to work properly. The easiest way would be to inspect the generated template html when grid is bound to Kendo.Mvc.Examples.Models.ProductViewModel to get an idea what attributes and classes you should set. 

Regards,
Boyan Dimitrov
Progress Telerik