This is a migrated thread and some comments may be shown as answers.

Popup Editing of Grid<dynamic>

1 Answer 67 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 20 Dec 2017, 07:55 PM

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>

1 Answer, 1 is accepted

Sort by
0
Boyan Dimitrov
Telerik team
answered on 22 Dec 2017, 02:15 PM

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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Boyan Dimitrov
Telerik team
Share this question
or