Posting Array from Grid Editor Template

[Chad]

I have a grid of Contact data. I am using a custom editor template. The user can edit more data in the editor template than is displayed in the grid. One of the properties on the Contact object is an Array of Phones. In the UI the user can enter as many phone numbers as they want. I have additional fields dynamically added using jquery. Currently, I am running into three issues:

1) Inputs that I dynamically add are not included in the post of the form. Here's an example of a dynamically added input:

<select name="Phones[0].PhoneTypeId">

    <option value="2">Mobile</option>

    <option value="3">Home</option>

    <option value="4">Work</option>

    <option value="5">Main</option>

    <option value="6">Fax</option>

</select>

<input name="Phones[0].Number" type="text">

As mentioned, these values aren't included in the data posted to the server at all.

2) I have created an EditorTemplate for the phone. When I use Html.EditorFor(m => m.Phones) it appears to be completely ignored. I have also tried iterating through the Phone array like this:

@foreach(var phone in Model.Phones)

{

    Html.EditorFor(m => phone)

}

That also gets completely ignored and doesn't produce anything when the data provided should cause phone numbers to show.

3) Due to issue number two mentioned above when editing an existing Contact I have resorted to adding code to just display the first phone number: Html.EditorFor(m => m.Phones[0]) When I do that, the phone number shows up as expected, but if I make a change to the number and submit the form, the data gets submitted like this: Phones[0][Number] instead of like this Phones[0].Number. The default ModelBinder doesn't seem to be able to handle the value being submitted like that, so the values don't get bound to my model.

Any help would be greatly appreciated.

[Petur Subev]

Hello Chad,

To send additional values to the server you should use the data function of the dataSource read/update/create/delete operations (it is also available in the Wrappers dataSource read/update/create/delete configurator). 
If you add input elements to the Popup they wont be taken into account and submitted automatically to the server (please notice there is no form element at all).

When the data function is called you need to manually extract the values from additional inputs and append them like this:

function extraDataOnUpdate(){
        return {
          "persons[0].foo":23,
          "persons[0].bar":323
        }
}

 

Kind regards,
Petur Subev
the Telerik team