Grid - inline editing with custom editor template, no model value?

[Mike]

I am running into an issue with a simple string property when using a custom EditorTemplate in the Kendo Grid and inline editing.

I am doing something very similar to this: http://docs.kendoui.com/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates#create-custom-editor-for-a-bound-property

The issue appears to be that the model value for the property is not being passed to the editor template when entering edit mode. For example, if I remove the custom EditorTemplate usage, the grid works fine: clicking Edit shows a textbox for the string property with the saved value for the row prefilled in the textbox. When I use the custom EditorTemplate, the Model value is null. I've tried simplifying my editor template down to nothing but outputing the model value with the same results.

Any ideas of what might be causing this?

[Mike]

After trying some more things out, I tried setting the default value for the field that I'm using the custom EditorTemplate for, like so:

    .Model(model =>
    {
        model.Id(p => p.Id);
        model.Field(p => p.FooPropertyName).DefaultValue("TEST");
    })

When adding a record to the grid, this default string value of "TEST" does get passed to the EditorTemplate as the model value. However, when I have an existing row in the grid with a value for FooPropertyName, when entering Inline Edit mode, the value of TEST is still passed. Shouldn't the actual property value be passed in this case?

I'm using the latest release 2012.3.1114.

[Daniel]

Hello Mike,

The model will be passed with the default values if you are using Ajax editing. Since the data is not available on the server the editor template will be serialized with the default values. The actual values will be populated for the item on the client using the MVVM pattern. If the value is not populated to the input in your case this, could be caused by using a name different than the field name. If this is not causing the problem a sample project which reproduces the issue would help to determine what exactly goes wrong.

Regards,
Daniel
the Telerik team

[Mike]

Hi Daniel - 

Yes, this weekend I put together a sample program and haven't been able to duplicate the issue. Now, I'm trying to determine the cause of the problem in our project with no luck so far. I've verified that we're using the same jQuery version, Kendo js/css, etc. I also re-verified that the names are the same as the field names.

When we click an existing row to edit it, the combobox or dropdown columns do not have the current values prefilled. The dropdowns are populated, just the input with name "fieldname_input" that gets added upon clicking edit has no text in it. 

[Mike]

Success!

I found the cause of the issue. Our problem was due to the inclusion of both kendo.all.min.js and kendo.dataviz.min.js. This hasn't caused any issues with any Kendo components before this, but removing kendo.dataviz.min.js solved the problem and now the Kendo ComboBox is properly displaying when editing inline in the Kendo Grid.

[Neil]

Hi,

I have a similar issue in my project that I am having trouble solving; I have a grid wrapper, which uses ajax binding in the DataSource and I'm using a custom edit template to display various editors for the properties on the model associated with the grid.

Now, when using JavaScript in the editor template it's not possible to evaluate the VIewModel data, that is to say all the ViewModel properties have their default values. The problem as I understand it from Daniel's post is that since the custom editor template is processed on the server, no data for the model is present because is added to the template on the client after server processing is complete.

The documentation for EditorTemplates says that you can use the Html.EditorFor() helper which will display an editor for each model property, and this does work, unfortunately this seems to be the only method (besides .DefaultValue()) of getting model data into the custom template.

My question then is, will this ever be changed? I really need access to the ViewModel data - the EditorFor() helpers are useless to me as I need hidden fields to hold values that I can use in the template processing itself (e.g to determine whether to enable/disable controls etc), using the .DefaultValue() property of the Model.Field() is also useless as I need it to be respective to the record.

I hope there is a way I can have my cake and eat it too but I'm guessing my only option is to avoid the MVC wrapper and use the Kendo UI Web Grid instead, but I'd rather not have to scrap all my wrappers just because they won't play nice :)

Thanks,

Neil.

[Daniel]

Hi Neil,

There is no way to changed the behavior for Ajax binding because as mentioned in my previous reply the editor is serialized on the server and the data is loaded on the client. You could get the model that is currently in edit mode from JavaScript by using the Grid editable options e.g.

var grid = $("#Grid").data("kendoGrid");
var model = grid.editable.options.model;

Depending on the needed functionality, you could also use the MVVM bindings in the editor template to achieve it.

 Kind regards,
Daniel
the Telerik team

[serge]

the link is invalid

[Eyup]

Here is the new link which should be redirected by default:
https://docs.telerik.com/kendo-ui/framework/mvvm/bindings/attr

[serge]

"should be" :)

[serge]

better is to update the OP ;)

[Eyup]

Updated.

[Abhishek]

I have a similar issue. I have a MVC grid with editor template for all fields. I have cascading comboboxes for 2 fields.

In Inline Edit mode all fields get populated with existing values except the 2nd combobox of the cascading comboboxes (the one which depends on other for value). Also, a calendar in this doesnt'get populated if the date is today's date. This might be happening because of timezone difference between server and client browser because the value gets populated on IISexpress, but once on IIS server it doesn't get populated only for today's date. Grid date editor has defaultdate set to today's date and this is the code for DateEditor:   PS user cannot enter any future date.

@(Html.Kendo().DatePicker()

              .Name("Date")           
               .Max(DateTime.Today.Date)
              .HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
              
)

 

 

 

[Alex Hajigeorgieva]

Hello, Abhishek,

We have a project repository with cascading functionality that you may check at:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-editing-cascading-dropdownlist

Have a look at the suggested approach and let me know how we can assist you further. It would be best if you could alter the project in such a way so that it better represents the exact scenario you have.

Also as far as the dates are concerned, you have a valid suspicion of the cause. We recommend keeping dates in UTC both on the client and the server to avoid issues with timezones:

https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/utc-time-on-both-server-and-client

Kind Regards,
Alex Hajigeorgieva
Progress Telerik