Field value empty on edit when use grid in EditorTemplates

[Sébastien]

I use a Grid in a view to show this structure (EntityFramework):
Class1 {
     Name;
     ContactProperty: Contact {
          Name;
          Property2: List<DMConEmail> {
               Type
               Email
          }
     }
}

I first use a flat view to show and edit data and use a Grid with ajax to show the Property2 list:
        @(Html.Kendo().Grid<Lorem.Core.DataModels.Contacts.DMConEmail>()
    .Name("Contact_Emails")
    .Columns(columns =>
    {
        columns.Bound(p => p.Type);
        columns.Bound(p => p.Email);
        columns.Command(command => { command.Edit(); command.Destroy(); });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(datasource => datasource.Ajax()
        .Model(model => model.Id(p => p.IdEmail))
        .Create(update => update.Action("EmailInsert", "Contact", new { idContact = Model.IdContact }))
        .Read(read => read.Action("EmailGetList", "Contact", new { idContact = Model.IdContact }))
        .Update(update => update.Action("EmailUpdate", "Contact"))
        .Destroy(update => update.Action("EmailDelete", "Contact"))
        ))

All is working fine for this.

For re-usability, I put the contact model class in an EditorTemplates and when I click the edit button in a grid row, I lost all the field content.
    @Html.EditorFor(m => m.ContactProperty, "DMConEmail")

Summary:
When I use a flat view, the editing line in the grid keep values in texbox. When I use the grid in an EditorTemplate, the editing line textbox was empty.

Thanks for the help.

[Petur Subev]

Hello Sébastien,

It sounds like the name attribute for the input is not generated properly in the problematic case. Could you use your browser developer tools and share with us what exactly is the generated markup for the input?

Or if possible demonstrate your case somehow so we we can investigate on the issue.

Regards,
Petur Subev
Telerik

 

 

[Sébastien]

I use winmerge to check the diff between the two initialization line and it seem to come from some variable name:

This is the line in the flat file, the working one:
    jQuery(function(){jQuery("#ContactEmails").kendoGrid({"columns":[{"title":"Type","field":"Type","filterable":{"messages":{"info":"Afficher les lignes avec la valeur qui","isTrue":"est vrai","isFalse":"est fausse","filter":"Filtrer","clear":"Effacer filtre","and":"Et","or":"Ou","selectValue":"-Sélectionner-","operator":"Opérateur","value":"Valeur","cancel":"Annuler"},"operators":{"string":{"eq":"Est égal à","neq":"N’est pas égal à","startswith":"Commence par","endswith":"Se termine par","contains":"Contient","doesnotcontain":"Ne contient pas"},"number":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est supérieur ou égal à","gt":"Est supérieur à","lte":"Est inférieur ou égal à","lt":"Est inférieur à"},"date":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est postérieur ou égal à","gt":"Est postérieur","lte":"Est antérieur ou égal à","lt":"Est antérieur"},"enums":{"eq":"Est égal à","neq":"N’est pas égal à"}}},"encoded":true,"editor":"\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"Le champ Type est requis.\" id=\"Type\" name=\"Type\" type=\"text\" value=\"Other\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Type\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","values":[{"value":0,"text":"Autre"},{"value":1,"text":"Maison"},{"value":2,"text":"Bureau"}]},{"title":"Courriel","field":"Email","filterable":{"messages":{"info":"Afficher les lignes avec la valeur qui","isTrue":"est vrai","isFalse":"est fausse","filter":"Filtrer","clear":"Effacer filtre","and":"Et","or":"Ou","selectValue":"-Sélectionner-","operator":"Opérateur","value":"Valeur","cancel":"Annuler"},"operators":{"string":{"eq":"Est égal à","neq":"N’est pas égal à","startswith":"Commence par","endswith":"Se termine par","contains":"Contient","doesnotcontain":"Ne contient pas"},"number":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est supérieur ou égal à","gt":"Est supérieur à","lte":"Est inférieur ou égal à","lt":"Est inférieur à"},"date":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est postérieur ou égal à","gt":"Est postérieur","lte":"Est antérieur ou égal à","lt":"Est antérieur"},"enums":{"eq":"Est égal à","neq":"N’est pas égal à"}}},"encoded":true,"editor":"\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-email=\"Le champ Courriel n\u0026#39;est pas une adresse électronique valide.\" data-val-length=\"Le champ Courriel doit être une chaîne d\u0026#39;une longueur minimale de 6 et d\u0026#39;une longueur maximale de 193.\" data-val-length-max=\"193\" data-val-length-min=\"6\" data-val-required=\"Le champ Courriel est requis.\" id=\"Email\" name=\"Email\" type=\"email\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Email\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":"Annuler","update":"Mettre à jour","edit":"Éditer"}},{"name":"destroy","buttonType":"ImageAndText","text":"Effacer"}]}],"scrollable":false,"editable":{"confirmation":"Êtes-vous sûr de vouloir supprimer cet enregistrement?","confirmDelete":"Effacer","cancelDelete":"Annuler","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Insérer"}]},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Contact/EmailGetList?idContact=2"},"prefix":"","update":{"url":"/Contact/EmailUpdate"},"create":{"url":"/Contact/EmailInsert?idContact=2"},"destroy":{"url":"/Contact/EmailDelete"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"IdEmail","fields":{"IdEmail":{"type":"number"},"IdContact":{"type":"number"},"Contact":{"type":"object"},"Type":{"type":"number"},"Email":{"type":"string"},"Id":{"editable":false,"type":"number"}}}}}});});

This is the line used in the EditorTemplates, not working one:
    jQuery(function(){jQuery("#ContactEmails").kendoGrid({"columns":[{"title":"Type","field":"Type","filterable":{"messages":{"info":"Afficher les lignes avec la valeur qui","isTrue":"est vrai","isFalse":"est fausse","filter":"Filtrer","clear":"Effacer filtre","and":"Et","or":"Ou","selectValue":"-Sélectionner-","operator":"Opérateur","value":"Valeur","cancel":"Annuler"},"operators":{"string":{"eq":"Est égal à","neq":"N’est pas égal à","startswith":"Commence par","endswith":"Se termine par","contains":"Contient","doesnotcontain":"Ne contient pas"},"number":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est supérieur ou égal à","gt":"Est supérieur à","lte":"Est inférieur ou égal à","lt":"Est inférieur à"},"date":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est postérieur ou égal à","gt":"Est postérieur","lte":"Est antérieur ou égal à","lt":"Est antérieur"},"enums":{"eq":"Est égal à","neq":"N’est pas égal à"}}},"encoded":true,"editor":"\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"Le champ Type est requis.\" id=\"User_Contact_Type\" name=\"User.Contact.Type\" type=\"text\" value=\"Other\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"User.Contact.Type\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e","values":[{"value":0,"text":"Autre"},{"value":1,"text":"Maison"},{"value":2,"text":"Bureau"}]},{"title":"Courriel","field":"Email","filterable":{"messages":{"info":"Afficher les lignes avec la valeur qui","isTrue":"est vrai","isFalse":"est fausse","filter":"Filtrer","clear":"Effacer filtre","and":"Et","or":"Ou","selectValue":"-Sélectionner-","operator":"Opérateur","value":"Valeur","cancel":"Annuler"},"operators":{"string":{"eq":"Est égal à","neq":"N’est pas égal à","startswith":"Commence par","endswith":"Se termine par","contains":"Contient","doesnotcontain":"Ne contient pas"},"number":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est supérieur ou égal à","gt":"Est supérieur à","lte":"Est inférieur ou égal à","lt":"Est inférieur à"},"date":{"eq":"Est égal à","neq":"N’est pas égal à","gte":"Est postérieur ou égal à","gt":"Est postérieur","lte":"Est antérieur ou égal à","lt":"Est antérieur"},"enums":{"eq":"Est égal à","neq":"N’est pas égal à"}}},"encoded":true,"editor":"\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-email=\"Le champ Courriel n\u0026#39;est pas une adresse électronique valide.\" data-val-length=\"Le champ Courriel doit être une chaîne d\u0026#39;une longueur minimale de 6 et d\u0026#39;une longueur maximale de 193.\" data-val-length-max=\"193\" data-val-length-min=\"6\" data-val-required=\"Le champ Courriel est requis.\" id=\"User_Contact_Email\" name=\"User.Contact.Email\" type=\"email\" value=\"\" /\u003e\u003cspan class=\"field-validation-valid\" data-valmsg-for=\"User.Contact.Email\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e"},{"command":[{"name":"edit","buttonType":"ImageAndText","text":{"cancel":"Annuler","update":"Mettre à jour","edit":"Éditer"}},{"name":"destroy","buttonType":"ImageAndText","text":"Effacer"}]}],"scrollable":false,"editable":{"confirmation":"Êtes-vous sûr de vouloir supprimer cet enregistrement?","confirmDelete":"Effacer","cancelDelete":"Annuler","mode":"inline","create":true,"update":true,"destroy":true},"toolbar":{"command":[{"name":null,"buttonType":"ImageAndText","text":"Insérer"}]},"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":"/Contact/EmailGetList?idContact=2"},"prefix":"","update":{"url":"/Contact/EmailUpdate"},"create":{"url":"/Contact/EmailInsert?idContact=2"},"destroy":{"url":"/Contact/EmailDelete"}},"serverPaging":true,"serverSorting":true,"serverFiltering":true,"serverGrouping":true,"serverAggregates":true,"filter":[],"schema":{"data":"Data","total":"Total","errors":"Errors","model":{"id":"IdEmail","fields":{"IdEmail":{"type":"number"},"IdContact":{"type":"number"},"Contact":{"type":"object"},"Type":{"type":"number"},"Email":{"type":"string"},"Id":{"editable":false,"type":"number"}}}}}});});

Maybe this come from that: id=\"User_Contact_Type\" name=\"User.Contact.Type\", this is not the same in the tow file, but MVC use the same name convention like that in the two file:
        <label class="control-label col-md-2" for="User_Contact_Name">Nom</label>
        <div class="col-md-10">
            <input class="k-textbox" data-val="true" data-val-length="Le champ Nom doit être une chaîne d&#39;une longueur minimale de 4 et d&#39;une longueur maximale de 200." data-val-length-max="200" data-val-length-min="4" data-val-required="Le champ Nom est requis." id="User_Contact_Name" name="User.Contact.Name" type="text" value="Tester" />
            <span class="field-validation-valid" data-valmsg-for="User.Contact.Name" data-valmsg-replace="true"></span>
        </div>

It sem that the field name come from ViewModel hierarchy and not from the View/EditorTemplates hierarchy. There we can see the User class, Contact class and Name field.

I think I find a good start to find where to look.

Thanks for your help and have a nice weekend.

[Sébastien]

Do you need more information?

[Sébastien]

The exception don't seem to come from EditorTemplates, but come from a
model property containing another model class used by the child
EditorTemplate. The model class hierarchy don't seem to work like another Microsoft MVC Controls.

[Petur Subev]

Hello again Sébastien,

My apologies for the late reply, the case was considered as resolved.

The problem is indeed the value of the name attribute is generated in a wrong way because of the MVC convention that uses a prefix:

name=\"User.Contact.Type\"

In your case the name should be simply the name of the property. You can change this by using Custom editor template inside of which you can try to clear the prefix to empty string like this:

@{

    ViewData.TemplateInfo.HtmlFieldPrefix = string.Empty;

}

I hope this helps.

Regards,
Petur Subev
Telerik

 

 

[Sébastien]

This don't work. When I do it, the grid is working but all other form input don't work. All class in property received by the post controller function was null and the received model is lost. And if the property name is the same of an other property name of an other class in the model, how the system can make the difference between them? If Microsoft need the prefix to rebuild the model for the controller, why should I scrap it to use your control? At this time, if I keep prefix, form work, but not your grid. If I remove prefix, form don't work but the grid work. I don't want to make that choice, I want form and grid to work...

[Petur Subev]

Hello again Sébastien,

Then you should manually set the name of each widget instead of using their SomeWidgetFor() equivalent. For example if you use a DropDownListFor you can change it to a regular DropDownList and set its Name() to be the same as the property name:

@(Html.Kendo().DropDownList().Name("Position"))

Kind Regards,
Petur Subev
Telerik

 

 

[Sébastien]

You can see on first post that I already use a name... And the sample you use is a DropDownList and my error is about the grid, so... Did you read the post?

[Petur Subev]

Hello again Sébastien,

The Grid uses regular inputs such as textboxes, dropdownlists, datepickers and so on (I gave a simple example using our DropDownList widget). What I am trying to explain is that you have to manually set the name attributes of such widgets instead of letting them generate automatically with the prefix we discussed.

Using the Kendo widgets this could be overriden through the Name() method.

This whole behavior is caused by the MVC approach to generate name attributes. Same discussion goes here:

http://stackoverflow.com/questions/1488890/asp-net-mvc-partial-views-input-name-prefixes
http://stackoverflow.com/a/4807655/332124

If still struggling please send small demo that replicates your scenario so I can see if something else is not actually going wrong.

Kind Regards,
Petur Subev
Telerik