[Solved] ComboBox not posting its data on ajax update

[Joan Vilariño]

Hi..

I have an ajaxbound grid with a template for one of the fields of the row using a combobox (Telerik combobox). I set a new Value and click on Update, but this field is not posted back to the update action... (I check Request.Form and the rest of textboxes in the row appear but not the combobox value)

Any suggestion?

[Georgi Krustev]

Hello Joan Vilariño,

I have used one of our online demos as a base for my test. In the edit template I have used ComboBox instead of DropDownList component used there (ClientEmployee.ascx). Everything works as expected no my end. Please give a try and let me know if I am missing something.

Sincerely yours,
Georgi Krustev
the Telerik team

[Joan Vilariño]

I've been checking the DOM just before the post of the row... and I see some strange things like this:

<DIV id="Empresa_Id" class="t-widget t-combobox t-header" jQuery1284104389594="25">
<DIV class="t-dropdown-wrap t-state-default">
<INPUT id="Empresa_Id-input" class="t-input" title="Empresa_Id" name="Empresa.Id-input" autocomplete="off" jQuery1284104389594="23" value="ULPRI FUTUR, S.L." /></INPUT><//INPUT><SPAN class="t-select t-header" jQuery1284104389594="24"><SPAN class="t-icon t-arrow-down">select</SPAN></SPAN>
</DIV>
<INPUT style="DISPLAY: none" id="Empresa_Id-value" name="Empresa.Id" value="470" /></INPUT><//INPUT>
</DIV>

What are those strange <//INPUT> tags?? can this be the cause?

BTW, I didn't say it in my first post because I didn't think it was important, but maybe it is... the row is inside a nested (master/detail) grid... like this:

<%= Html.Telerik().Grid<GrupoEmpresaViewModel.GrupoEmpresaVM>()
       .Name("GridGruposEmpresas")
       .Pageable(page => page.PageSize(15)
       .Position(GridPagerPosition.Both))
       .ClientEvents(events => events.OnRowDataBound("grupoEmpresaRowDataBound").OnError("onError").OnDataBound("grupoEmpresaDataBound"))
       .Sortable(order => order.OrderBy(o=>o.Add(e=>e.Nombre)).SortMode(GridSortMode.MultipleColumn))
       .Scrollable(scroll => scroll.Height(300))
       .DataKeys(datakeys => datakeys.Add(o => o.Id))
       .ToolBar(tools => tools.Custom().Action("Nuevo","GrupoEmpresa").Text("Nuevo Grupo"))
       .Editable(conf => conf.Enabled(true))
       .DataBinding(databinding => databinding.Ajax()
           .Select("_Index","GrupoEmpresa")
           .Update("_Editar","GrupoEmpresa")
           .Insert("_Nuevo", "GrupoEmpresa"))
       .Columns(columns =>
                    {
                        columns.Command(o => o.Edit()).Width(180);
                        columns.Bound(o => o.Nombre).Width(250);
                        columns.Bound(o => o.Descripcion);
                    })
        .DetailView(dt => dt.ClientTemplate(
            // Grid de Detalle
           Html.Telerik().Grid<GrupoEmpresaViewModel.EmpresaGrupoVM>()
               .Name("GridEmpresas_<#= Id #>")
               .DataKeys(keys => keys.Add(o=>o.Id))
               .DataBinding(databind => databind.Ajax()
                   .Select("_ObtenerGridEmpresas", "GrupoEmpresa", new { idGrupo = "<#= Id #>"})
                               .Update("_EditarGridEmpresas", "GrupoEmpresa", new { idGrupo = "<#= Id #>" })
                               .Delete("_QuitarEmpresa", "GrupoEmpresa", new { idGrupo = "<#= Id #>" })
                               .Insert("_AñadirEmpresa", "GrupoEmpresa", new { idGrupo = "<#= Id #>" }))
               .ToolBar(tools => tools.Insert())
               .Columns(columns =>
                                    {
                                        columns.Command(commands =>
                                                            {
                                                                commands.Edit();
                                                                commands.Delete();
                                                            }).Title("Acciones").Width(180);
                                        columns.Bound(o => o.Empresa).Title("Empresa").ClientTemplate("<#= Empresa.Nombre #>");
                                        columns.Bound(o => o.Empresa.Codigo).Title("Código").Width(250);
                                    })
               .Sortable()
               .Editable(conf => conf.Enabled(true))
               .Pageable(action => action.PageSize(5))
               .Filterable().ToHtmlString()
               ))%>

Can you try something with this? I'm checking the Request.Form object and only the 2 column's field appears ..

Thanks!!

[Joan Vilariño]

More info.

It doesn't matter if it's a nested grid or not, and it doesn't event matter if you use combobox or a regular MVC Html.DropDownListFor .. at post time, Request.Form doesn't have values for the select items of the Grid Row.

Did I mention you the issue is when using Ajax bound grids and inline editing?

This happens since our last update of the components (v 2010.2.825) two or three days ago, and it's happening in forms that were already working with previous versions... any clue?

Thanks!

[Georgi Krustev]

Hello Joan Vilariño,

Unfortunately I still cannot reproduce the depicted issue. It will be very helpful if you can prepare a simple test project and upload it in some of the free upload servers (like RapidShare). Thus I will be able to observe the problem locally and advice you further.

Best wishes,
Georgi Krustev
the Telerik team

[Joan Vilariño]

Hello.

I've created a simple project with a Telerik ajax grid that has 2 fields, 1 standard MVC2 dropdownlist and a textbox.

I can't upload to rapidshare/megaupload and the like from work so I've setup a ftp account so you can download it. The filename is Solution1.zip

         server:  ftp://ftp.nortia.com
         user: cc.net
         pass: competencia2010

If you run it and place a breakpoint in the _Update method, you can check that "Item.Id" is not coming in Request.Form while "Comment" (the 2nd column's field) does.

If you look at the DOM contents you will see there is a <SELECT ..... name="Item.Id"> item inside the row (look at the dom when you have the row in edit mode) and it's inside a <FORM> tag (your grid creates that when entering in edit mode>.

Test it out locally and tell me if it happens the same to you... it should.. XD

Thanks!

[Joan Vilariño]

Any update on this?

[Georgi Krustev]

Hello Joan,

After further investigation, I noticed that you are binding second column to complex object in order to use ClientTemplates. Hence the grid will use edit template which contains DropDownList component.
The problem is that the grid looks for input or checkbox HTML element with name "Item". The name of the DropDownList is "Item.Id". Thus the value of the DropDownList will never be retrieved and send to the server. I have modified your test project in order to achieve your goal. Unfortunately you cannot use UpdateModel in order to updated model, because of the complex object bound to the column.

Regards,
Georgi Krustev
the Telerik team

[Joan Vilariño]

The question then is... how comes this worked perfectly until last Grid update?

You must have changed something in your code that breaks this way of binding the fields.

[Georgi Krustev]

Hi Joan,

Which version did you use, before update to Q2 2010? It is strange that this was working, because ASP.NET MVC will not update correctly Model if the name of the input is different than the property of the model.
Let me know the version in order to test locally.

All the best,
Georgi Krustev
the Telerik team

[Joan Vilariño]

Hello again, and forbid me for being too persistent, but this issue if not reverted to original can cause me lots of trouble and refactoring the huge application I'm currently developing.

The version I was using before was 2010.1.518, and to be sure of it, I just took the original solution I sent you before, removed the Q2 version and replaced it with 2010.1.518 (dll files, Content and Script folders) ...

By just making this, the solution works flawlessly. No changes were made to my original code.

You tell me MVC won't update model because it won't match the name of the input, but if you look at it closer, you'll see that the model really matches the input fields... let's have a look:

My template is built with a Generic for the HomeItem class like this:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<HomeItem>" %>

So this markup:

<%= Html.DropDownListFor(o => Model.Id, new SelectList((IEnumerable)ViewData["combolist"],"Id","Name")) %>

would render this HTML:

<SELECT id="Item_Id" name="Item.Id"><OPTION value="1">Item1</OPTION> <OPTION value="2">Item2</OPTION> <OPTION value="3">Item3</OPTION></SELECT><SPAN id="Item_validationMessage" class="field-validation-valid"></SPAN>

If you look at it closer, you'll see name is "Item.Id", that fits perfectly with my ViewModel where HomeViewModel has a Item property of type HomeItem, which is bound to the column, and the "Item" property owns a long property inside it called "Id". MVC won't ignore this fields cause it matches my entity.

Please, give it a go, and tell me if it works for you with version 2010.1.518, and if it does, tell me if it can/will be reverted to make it work again with Q2. As I told you before, this bug/whatever you call it, is very important for me, and makes things a lot cleaner when working with templates in grids.

Waiting for your news as soon as possible.

Thank you!!

[Joan Vilariño]

Hi Georgi, any update? Did you test my project with previous version as I told you?

[Georgi Krustev]

Hello Joan,

This appears to a known issue, which is already fixed. I have attached the latest internal build in one of your forum threads. You can download it from there and try it locally.

All the best,
Georgi Krustev
the Telerik team

[Joan Vilariño]

Thanks! Will try asap