Editable Hierarchy Grid not working

[Rick Glos]

I'm trying to build an editable hierarchy grid but as soon as I add the Editable method, I get a System.InvalidOperationException.

The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.

Apparantly it's failing somewhere within the Kendo.Mvc.UI.HTML.GridEditorForCellBuilder.AppendEditorFor method:

The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.InvalidOperationException: The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.

Source Error:


Line 53:
Line 54: <script id="template" type="text/kendo-tmpl">
Line 55:     @(Html.Kendo().Grid<Toolbox.Web.Models.RebateAverageCostViewModel>()
Line 56:         .Name("grid_#=ID#")
Line 57:         .Columns(columns =>

Source File: c:\Data\Source\Work\2\Wilco\Toolbox\Main\Toolbox.Web\Views\RebateAverageCosts\Index.cshtml    Line: 55

Stack Trace:


[InvalidOperationException: The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.]
   System.Web.Mvc.ViewDataDictionary`1.SetModel(Object value) +584415
   System.Web.Mvc.ViewDataDictionary..ctor(ViewDataDictionary dictionary) +371
   System.Web.Mvc.WebViewPage`1.SetViewData(ViewDataDictionary viewData) +48
   System.Web.Mvc.RazorView.RenderView(ViewContext viewContext, TextWriter writer, Object instance) +98
   System.Web.Mvc.BuildManagerCompiledView.Render(ViewContext viewContext, TextWriter writer) +115
   System.Web.Mvc.Html.TemplateHelpers.ExecuteTemplate(HtmlHelper html, ViewDataDictionary viewData, String templateName, DataBoundControlMode mode, GetViewNamesDelegate getViewNames, GetDefaultActionsDelegate getDefaultActions) +579
   System.Web.Mvc.Html.TemplateHelpers.TemplateHelper(HtmlHelper html, ModelMetadata metadata, String htmlFieldName, String templateName, DataBoundControlMode mode, Object additionalViewData, ExecuteTemplateDelegate executeTemplate) +1002
   System.Web.Mvc.Html.TemplateHelpers.TemplateHelper(HtmlHelper html, ModelMetadata metadata, String htmlFieldName, String templateName, DataBoundControlMode mode, Object additionalViewData) +66
   System.Web.Mvc.Html.TemplateHelpers.TemplateFor(HtmlHelper`1 html, Expression`1 expression, String templateName, String htmlFieldName, DataBoundControlMode mode, Object additionalViewData, TemplateHelperDelegate templateHelper) +117
   System.Web.Mvc.Html.TemplateHelpers.TemplateFor(HtmlHelper`1 html, Expression`1 expression, String templateName, String htmlFieldName, DataBoundControlMode mode, Object additionalViewData) +104
   System.Web.Mvc.Html.EditorExtensions.EditorFor(HtmlHelper`1 html, Expression`1 expression, Object additionalViewData) +62
   Kendo.Mvc.UI.Html.GridEditorForCellBuilder`2.AppendEditorFor(HtmlHelper`1 htmlHelper, IHtmlNode container) +62
   Kendo.Mvc.UI.Html.GridEditorForCellBuilder`2.AppendEditor(IHtmlNode container, HtmlHelper`1 htmlHelper) +52
.... snip .....

My parent grid looks like this:

@(Html.Kendo().Grid<Toolbox.Web.Models.RebateAverageCostItemViewModel>()
    .Name("grid")
    .DataSource(dataSource => dataSource // Configure the grid data source
        .Ajax() // Specify that ajax binding is used
        //.Batch(true) // Enable batch updates
        .Model(model =>
        {
            model.Id(item => item.ID); // Specify the property which is the unique identifier of the model
            model.Field(item => item.ID).Editable(false); // Make the property not editable
        })
        .Read(read => read.Action("RebateAverageCostItems_Read", "RebateAverageCosts")) // Set the action method which will return the data in JSON format
    )
    .Columns(columns =>
    {
        columns.Bound(c => c.ID).Width(10);
        columns.Bound(c => c.ItemNo).Width(100);
        columns.Bound(c => c.ProductDescription).Width(200);
        columns.Bound(c => c.ProductGroup).Width(100);
        columns.Bound(c => c.PackSize).Width(100);
        columns.Bound(c => c.Supplier).Width(100);
        columns.Bound(c => c.PriceUOM).Width(100);
    })
    //.Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode
    .Pageable()     // Enable paging
    .Sortable()     // Enable sorting
    .Filterable()   // Endable filtering
    .ClientDetailTemplateId("template")
    .Events(events => events.DataBound("dataBound"))
)

Next my child grid looks like this:

<script id="template" type="text/kendo-tmpl">
    @(Html.Kendo().Grid<Toolbox.Web.Models.RebateAverageCostViewModel>()
        .Name("grid_#=ID#")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Width(10);
            columns.Bound(c => c.BeginDate);
            columns.Bound(c => c.EndDate);
            columns.Bound(c => c.NetCostAfterRebate);
        })
        .DataSource(dataSource => dataSource
            .Ajax() // Specify that ajax binding is used
            .Batch(true) // Enable batch updates
            .Model(model =>
            {
                model.Id(item => item.ID); // Specify the property which is the unique identifier of the model
                model.Field(item => item.ID).Editable(false); // Make the property not editable
            })
            .Read(read => read.Action("RebateAverageCosts_Read", "RebateAverageCosts", new { rebateAverageCostItemId = "#=ID#" }))
        )
// Note if I comment out this line, it works in read only mode....
        .Editable(editable => editable.Mode(GridEditMode.InCell)) // Use in-cell editing mode
        .Pageable()     // Enable paging
        .Sortable()     // Enable sorting
        .ToClientTemplate()
    )
</script>

I'm not sure where to begin to troubleshoot.

[Vladimir Iliev]

Hi Rick,

Basically this error is thrown because one of the columns in the grid is bound to "Double" type but is set to use editor template (editor templates are placed under the Views -> Shared -> EditorTemplates folder) which expects "String" type. Please check the example below how to specify the editor template name using UIHint attribute over the model property:

[Required]
[DisplayName("Unit Price")]
[UIHint("Double")]
public double UnitPrice
{
    get;
    set;
}

Then you should add "Double.cshtml" editor template under the the Views -> Shared -> EditorTemplates folder:

@model double?

@(Html.Kendo().NumericTextBoxFor(m => m)
      .HtmlAttributes(new {style="width:100%"})
      .Min(0)
)

Kind Regards,
Vladimir Iliev
the Telerik team

[Rick Glos]

Thanks Vladimir.  I used the UIHint as you mentioned and set it to Number rather than create a new editor, but your additional advice on using an editor template may come in useful later.

// To prevent the following error:
//   The model item passed into the dictionary is of type 'System.Double', but this dictionary requires a model item of type 'System.String'.
// I needed to add the UIHint below to specify the template to use in edit mode, templates are in Shared/EditorTemplates
[Required]
[DisplayName("Net Cost")]
[UIHint("Number")]
public double NetCostAfterRebate { get; set; }