[Solved] ComboBoxFor model binding

[Neil]

Hi, I'm using a Telerik ComboBoxFor (as well as DropDownFor and AutoComplete) control with MVC2. The problem that I'm having is that the data does not bind correctly to the selected model property. The correct value is set but when the model is passed back into the view these controls does not display the correct selected value. I'm using the controls in the following way:

<%=Html.Telerik().AutoCompleteFor(model => model.XXXX).Name("XXXX").Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.Contains)) %>

<%=Html.Telerik().ComboBoxFor(model => model.XXXX).BindTo(new SelectList(Model.SomeList, "Value", "Text")).Name("XXXX").Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.Contains)).ClientEvents(events => events.OnChange("IndexChanged")) %>

Am I doing something wrong? Any help would be appreciated.

[Alonzo]

Try using .ComboBox() instead .ComboBoxFor()

[Vlad Bulkin]

I am having the same problem. I assume this is a bug. Please confirm.

Thanks!

[Georgi Krustev]

Hello Vlad Bulkin,

If I am understanding you correctly, the selected value is not reapplied after post back (check Server Validation example for more specific explanation ). If this is the issue, I am glad to inform you that it was fixed for the official release of Telerik Components for ASP.NET MVC (version 2010.2.825).

Nevertheless Model.XXX passed in the Lambda expression is used only for setting Name of the ComboBox UI component, not for its binding.

Best wishes,
Georgi Krustev
the Telerik team

[Vlad Bulkin]

Georgi, thank you for your reply, I will get the latest release.

>Nevertheless Model.XXX passed in the Lambda expression is used only for setting Name of the ComboBox UI component, not for its binding.
Is that a feature or something that will be corrected?
I am currently using server-side .Bind to populate my combo box with a SelectList, as well as:
.SelectedIndex = Model.XXXX
Does that perform a binding of selected value to the Model.XXXX since Lambda expression doesn't? I'd like to understand what is a recommended way to bind selected value to a model.

Thanks!
V.B.

[Georgi Krustev]

Hello Vlad Bulkin,

This is the expected behavior. As the Html.DropDownList extension, comboBox UI components uses the body of the Lambda expression to set name of the component.

You can use SelectedIndex method to define selected item or use SelectList feature to select item depending on Value property. You can observe FirstLook example, which uses server-side binding.

All the best,
Georgi Krustev
the Telerik team

[Emmanuel]

Hi.

I am not sure I understand what you mean..
What I am understanding is that the ComboBoxFor(model => model.SelectItemId) does not actually bind to the property. It uses that property to generate the ComboBox control's name?

If so, how do I connect a Guid model property (called for example "SelectedEmployeeId") bond to a ComboBox ??

This is what I am doing:

VIEW:
----------------------------
<%= Html.Telerik().ComboBoxFor(model => model.SelectedEmployeeId)
    .Name("EmployeeIdComboBox")
    .AutoFill(true)
    .BindTo(ViewData["EmployeeIdSelectList"] as SelectList)
    .HighlightFirstMatch(true)
%>
----------------------------

CONTROLLER:
----------------------------
methodName()
{
    ViewData["EmployeeIdSelectList"] = GetEmployeeSelectList(selectedId);
}

GetEmployeeSelectList(Guid selectedId)
{
    var employeeList = /** CALL METHOD TO GET LIST OF EMPLYEES **/

    if(selectedId.HasValue)
        return new SelectList(employeeList, "Value", "Text", selectedId.Value.ToString());
    else
        return new SelectList(employeeList, "Value", "Text");
}
----------------------------

MODEL :: Employee
----------------------------
public Guid? SelectedEmployeeId{ get; set; }
----------------------------

My Combo Box gets populated with all the Employees as desired.

My problem is when I sumbit my form, I want to be able to have the Model property SelectedEmployeeId the same as what value is selected in the Combo Box, but right now it doesn't bind to the Model property.

That is what I need.

Any help will be appreciated.

[Emmanuel]

I got it working.

When using the ComboBoxFor(), you cannot set the Name attribute because it will overwrite the id  of the element, and will negate the binding effect.

I had to remove this line:
 .Name("EmployeeIdComboBox")

and now it works!

[Chris]

Georgi

"Nevertheless Model.XXX passed in the Lambda expression is used only for setting Name of the ComboBox UI component, not for its binding."

This is true.  From the System.Web.Mvc.Html.SelectExtensions

public static MvcHtmlString DropDownListFor<TModel, TProperty>(this HtmlHelper<TModel> htmlHelper, Expression<Func<TModel, TProperty>> expression, IEnumerable<SelectListItem> selectList, string optionLabel, IDictionary<string, object> htmlAttributes) {
            if (expression == null) {
                throw new ArgumentNullException("expression");
            }

            return DropDownListHelper(htmlHelper, ExpressionHelper.GetExpressionText(expression), selectList, optionLabel, htmlAttributes);
        }

You can see that the GetExpressionText method called upon the expression.

HOWEVER, the DropDownListHelper method calls the SelectInternal, and within the SelectInternal this is where the Html.DropDownListFor sets the default selected value.  THis is something that Html.Telerik.ComboBoxFor and Telerik.DropDownListFor do NOT do.

You can test this very simply...

public class TestModel
{
public Model() { ID = 5; }
public int ID { get; set; }
}

<%@ Page Title="" Language="C#" Inherits="System.Web.Mvc.ViewPage<TestModel>" %>

<%= Html.Telerik().ComboBoxFor(model => model.ID).BindTo(<selection for 1:Hi, 2:Bye, 3:Tree, 4: Bark, 5: Dog, 6: Cat>)%>
<%= Html.DropDownListFor(model => model.ID, <selection for 1:Hi, 2:Bye, 3:Tree, 4: Bark, 5: Dog, 6: Cat>) %>

And what you will get is a two dropdowns. 

 

• The first is the Telerik dropdown that does not have anything selected.
• The second is the standard html dropdown that has "Dog" selected.

This indicates that the Telerik.DropDownListFor/ComboBoxFor extensions do not support the same features as the default Html.DropDownListFor extension. 

This does need to get resolved. Or the documentation updated to make a note that this is not supported and examples of other ways, other than SelectedIndex which is not useful in this situation, of setting it such as setting the Selected property of a SelectListItem, etc.

[Georgi Krustev]

Hello Chris,

Thank you for drawing our attention to this issue.

I am glad to inform you that this problem has been fixed and the fix will be included in the next official release of the Telerik Components for ASP.NET MVC.

I have updated your Telerik points.

Regards,
Georgi Krustev
the Telerik team

[Chris]

Ok, great. Is there a rough timeline for the next official release?

[Georgi Krustev]

Hello Chris,

I believe that the Q3 release of Telerik Components for ASP.NET MVC is scheduled for the middle of November.

Regards,
Georgi Krustev
the Telerik team

[Jan]

Hello,

Q3 is out now and binding of model property to a dropdown concerning the setting of the selected value is working now.
But binding a model property to a AutoComplete with the function AutoCompleteFor is not working as expected: The model property value is not displayed in the textbox.

Can you confirm this as an error?

Kind regards,

Jan

[Hristo Germanov]

Hi Jan,

Unfortunately I cannot reproduce this issue. Could you please send me a sample project reproducing this issue, so I will be able to better assist you?

Kind regards,
Hristo Germanov
the Telerik team

[Jan]

Hello Hristo,

i have investigated a little bit and came to the conclusion, that the autocomplete isn't working for properties inside a collection.
I have prepared a simple project to show the problem.
The model is like this:

public class TestModel
{
    public string TextProperty { get; set; }
    public IEnumerable<string> AutoCompleteList { get; set; }
    public IEnumerable<SubModel> ListProperty { get; set; }
}

public class SubModel
{
    public string TextProperty { get; set; }
    public IEnumerable<string> AutoCompleteList { get; set; }
}

I generated a template for the TestModel class with an autocomplete for the TextProperty property which works fine.
I generated another template for the Submodel with an autocomplete for the TextProperty which is not showing the initial value:

Template for the TestModel:

<p>
    <%: Html.Telerik().AutoCompleteFor(model => model.TextProperty).BindTo(Model.AutoCompleteList) %>
</p>
<p>
    <% foreach (var item in Model.ListProperty)
       { %>
    <%: Html.EditorFor(_ => item) %>
    <% } %>
</p>

Template for the SubModel:

<p>
    <%: Html.Telerik().AutoCompleteFor(model => model.TextProperty).BindTo(Model.AutoCompleteList) %>
</p>

I have attached the whole solution for reproducing this.
Maybe i',m doing something wrong with the iterating over the submodel-items?
But a standard mvc TextBoxFor is working in my SubModel template.-

Regards,

Jan 

[Hristo Germanov]

Hi Jan,

I think that you have sent me is wrong attachment. Could you send me the whole solution?

Greetings,
Hristo Germanov
the Telerik team

[Jan]

Hi Hristo,

yes you are right - now i have attached the hole solution.

Jan

[Hristo Germanov]

Hello Jan,

I was able to reproduce the issue. I am glad to inform you that this issue is already fixed and the fix will be included in the next official release of the Telerik Components for ASP.NET MVC.

For your convenience I have attached hotfix version which includes the fix.

I have updated your Telerik points.

Greetings,
Hristo Germanov
the Telerik team

[Jan]

Hello Hristo,

thank you for the Hotfix, but unfortunately it is not working for me.
I have copied the contents of the zip file to the folder c:\Program Files\Telerik\Extensions for ASP.NET MVC Q3 2010 and i have included the new folders in my vs2010 project. I have verified that the new Version of the dll is used.

But the behavior is exactly the same: Autocomplete is working in main- and subview, but the initial value is not displayed inmy subview.

Am i missing something?

Jan

[Hristo Germanov]

Hi Jan,

Please accept my apologize for the wrong attachment.

Attached is hotfix version if you have any problem please tell me.

I want to note that this peace of code generate AutoComplete components with same ID and this is not valid.

<% foreach (var item in Model.ListProperty)
  { %>
     <%: Html.EditorFor(_ => item) %>
<% } %>

Regards,
Hristo Germanov
the Telerik team

[Jan]

Hi Hristo,

thank you for the hotfix - the AutoComplete shows now the initial value in my submodel.
Yes, you are right, i have to set distinct ids for the controls in the loop.

But now i have another problem: When i pass in an string-property with the value null, i get a nullrefrenceexception.
Here is the callstack:

[NullReferenceException: Object reference not set to an instance of an object.]
   Telerik.Web.Mvc.UI.ViewComponentFactory`1.AutoCompleteFor(Expression`1 expression) +215
   ASP.views_shared_editortemplates_testmodel_ascx.__Render__control1(HtmlTextWriter __w, Control parameterContainer) in g:\My Dropbox\TelerikMvcApplication1\Views\Shared\EditorTemplates\TestModel.ascx:6
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +109
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +8
   System.Web.UI.Control.Render(HtmlTextWriter writer) +10
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Control.RenderChildrenInternal(HtmlTextWriter writer, ICollection children) +208
   System.Web.UI.Control.RenderChildren(HtmlTextWriter writer) +8
   System.Web.UI.Page.Render(HtmlTextWriter writer) +29
   System.Web.Mvc.ViewPage.Render(HtmlTextWriter writer) +56
   System.Web.UI.Control.RenderControlInternal(HtmlTextWriter writer, ControlAdapter adapter) +27
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer, ControlAdapter adapter) +100
   System.Web.UI.Control.RenderControl(HtmlTextWriter writer) +25
   System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +3060

Jan

[Hristo Germanov]

Hi Jan,

Thank you for the feedback.

I am glad to inform you that this issue is already fixed.

Attached is the hotfix version which includes the fix.

All the best,
Hristo Germanov
the Telerik team

[Jan]

Hi Hristo,

tanks a lot. Its working now as expected.

Jan

[ori]

I am facing the same issues with version 2011.3.1115.
this one works for me:

 @(Html.Telerik().DropDownListFor(model => model.Obj.DataClassification)
                 .Name("DataClassification")
                 .BindTo(new SelectList(ViewBag.DataClassifications, "Id", "Name", Model.Obj.DataClassification.Id))
               )

for some reason only the .SelectedIndex(Model.Obj.DataClassification.Id) doesnt work.

Ori