[Solved] Problem with grid in popup edit

[Eduardo]

Hi,

I have a grid set in Popup mode for edit and the model EntregaTalonario have a member Talonarios of type IEnumerable<Talonario>

@{
    Html.Telerik().Grid<EntregaTalonario>().Name("entrega_talonario").Columns(cols => {
        cols.Bound(r => r.ID_CONTRIBUYENTE_RETENEDOR).Hidden();
        cols.Bound(r => r.FECHA_ENTREGA).Title("Fecha");
        cols.Bound(r => r.NOMBRE_ENTREGA).Title("Nombre entrega");
        cols.Bound(r => r.NOMBRE_RECIBE).Title("Nombre recibe");
        cols.Bound(r => r.SERIE).Title("Serie");
    })
        .DetailView(det => det.ClientTemplate(Html.Telerik().Grid<Talonario>().Name("talonario_<#=ID#>")
            .DataKeys(key => key.Add(t => t.ID))
            .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Talonario", new { ID_ENTREGA_TALONARIO = "<#=ID#>" }))
            .Columns(cols => {
                cols.Bound(t => t.NUMERO_INICIAL).Title("Número inicial");
                cols.Bound(t => t.NUMERO_FINAL).Title("Número final");
            })
            .ToHtmlString()))
        .DataKeys(k => k.Add(r => r.ID))
        .Editable(e => e.Mode(GridEditMode.PopUp).DefaultDataItem(new EntregaTalonario {
            FECHA_ENTREGA = DateTime.Now,
            NOMBRE_ENTREGA = User.Identity.Name
        }))
        .ToolBar(t => t.Insert().ButtonType(GridButtonType.ImageAndText))
        .DataBinding(dataBinding => {
            dataBinding.Ajax().Select("Select", "EntregaTalonario");
            dataBinding.Ajax().Insert("SaveChanges", "EntregaTalonario");
        })
        .ClientEvents(ev => {
            ev.OnSave("onTalonarioSave");
            ev.OnDataBinding("onDataBinding");
        })
        .Filterable()
        .Pageable()
        .Sortable()
        .Render();
}

For EntregaTalonario I have an Editor Template, where I define a grid for Talonarios and then in javascript method onTalonarioSave I pick the values the user put on the grid and set that array of objects to property Talonarios

function onTalonarioSave(e) {
    var id = $('#id_contribuyente').data("tTextBox").value();
    if (!CheckContribuyente(id, e))
        return;
    e.values.ID_CONTRIBUYENTE_RETENEDOR = id;
    var data = new Array($('#talonario tr.t-grid-new-row').length);
    for (var i = 0; i < $('#talonario tr.t-grid-new-row').length; i++) {
        data[i] = {
            NUMERO_INICIAL: parseInt($($('#talonario tr.t-grid-new-row')[i].cells[0]).text()),
            NUMERO_FINAL: parseInt($($('#talonario tr.t-grid-new-row')[i].cells[1]).text())
        };
    }
    e.values.Talonarios = data;
}

The problem is that in the controller, I receive an array whose objects' properties NUMERO_INICIAL and NUMERO_FINAL are 0. I check Request.Form and see this 'Talonarios[0][NUMERO_FINAL]', where I think I should expect 'Talonarios[0].[NUMERO_FINAL]'

[Atanas Korchev]

Hi Eduardo,

By default jQuery does not serialize JavaScript arrays in a format which the ASP.NET MVC model binder understands. The only known workaround is explained here.

To make it work for the Telerik grid though you need to use the ajaxSetup jQuery function from the OnLoad event of the grid.

function onLoad() {
$.ajaxSetup( { 
      traditional: true
  });
}

Regards,

Atanas Korchev
the Telerik team

[Eduardo]

Hi Atanas, thanks for your answer but still it doesn`t work. I put "$.ajaxSetup( { traditional: true });" in the OnLoad event of the grid, but now I receive "Talonarios" in Request.Form.Keys whith value "[object Object]". By the way, I'm using version 2011.2.812.

[Atanas Korchev]

Hi Eduardo,

 Indeed using traditional : true misbehaved as well.

 I created a sample project which shows how to send an array of objects during the onSave event. Here is the relevant code:

function onSave(e) {
    
    e.values["Members[0].FirstName"] = "John";
    e.values["Members[0].LastName"] = "Doe";
    e.values["Members[1].FirstName"] = "Jane";
    e.values["Members[1].LastName"] = "Doe";
}

This seems to be the only format which is accepted by the ASP.NET MVC model binder. The default format used by jQuery   Members[0][FirstName] is not supported.

Find attached the working project. Open the edit form and click update - then you can break with the debugger and see that the Members collection is successfully populated with values provided from the OnSave event.

Regards,
Atanas Korchev
the Telerik team