How to add "" (blank) item on top?

[Nim]

I want to add a "" (blank) option on top of the item list, with the following codes:

        <%
            List<ListItem> list_items = new List<ListItem>();
            list_items.Add(new ListItem { Text = "", Value = "" });
            list_items.Add(new ListItem { Text = "a", Value = "1" });
            list_items.Add(new ListItem { Text = "b", Value = "2" });
        %>
        <% Html.Telerik().ComboBox().Name("ComboBox")
                                    .AutoFill(false)
                                    .SelectedIndex(0)
                                    .BindTo(new SelectList(list_items)).Render();
         %>

But then, the first option shows "[object Object]" instead of blank.  If I use "&nbsp;" instead of "" (blank), "&nbsp;" will actually show up in the combo box until I click on the "" (blank) option in the options-pop-down window.  Is there anyway I can insert a "blank" on top?  Thank you.

[Georgi Krustev]

Hello Nim,

 
You hit a limitation related with combobox binding. Currently it cannot be bound to the item with empty Text property. Nevertheless 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 the modified JavaScript files which include the fix. Just replace original with them. 

Best wishes,
Georgi Krustev
the Telerik team

[Nim]

I've just run a quick test.
The attached file solves the issue with "" (blank).  Thank you!

FYI, if I have "&nbsp;" instead of "" (blank), the "&nbsp;" will show up as a 6 characters string until I click the drop-down to select the space in the option-list.  It appears the combo box may not work with special character now.  Is there any plan to make it work with special character later?

Many thanks!

[MGrassman]

This works to remove the "" limit.  Thanks.

One thing I noticed was if there is an onchange event on the dropdown anywhere I click on the window off the dropdown, bottom right corner the onchange event fires.  This only happens when the item value and text are "".

I have to put the following code in my onchange event handler to prevent this.

if(e.value == "") return;

Html.Telerik().DropDownList().Name("ddlExistingDeals")
        .BindTo(new SelectList(Model.ExistingDeals, "DealId", "Name", Model.SelectedDeal.DealId))
        .ClientEvents(events => events.OnChange("ddlExistingDeals_OnChange"))
        .HtmlAttributes(new { style = "width:100% !important;"})

Have you noticed this?

[Georgi Krustev]

Hello,

#1:
Nim, I have answered you in this forum thread.

#2:
Michael, unfortunately I was not able to reproduce depicted issue. Could you send us a simple test project which replicates the problem. Thus I will be able to investigate it locally and advice you further.

Regards,
Georgi Krustev
the Telerik team

[al]

Hi mate,
What you could do is download the source code and modify that part and it will do the way you want it.
Go the the source project:
Telerik.Web.Mvc>UI>DropDownList>DropDownListHtmlBuilder.cs

Change this line from : input.Attribute("value", selectedItem.Value.HasValue() ? selectedItem.Value : selectedItem.Text);
to :input.Attribute("value", selectedItem.Value.HasValue() ? selectedItem.Value : "");
This is located at the end of the file.

Rebuild it and use the DLL.

[Michael]

Are there any plans to support inserting a "prompt" item at the beginning of a combo box similar to:

<%= Html.DropDownList( "DropDownValue", 
                       (IEnumerable<SelectListItem>)ViewData["Menu"], 
                        "-- Select One --" ) %> 
I do have a workaround by binding to a list similar to the following code snippet, but the previous approach seems much cleaner.
 


<% Html.Telerik().ComboBox().Name(
"ComboBox").DataBinding(binding => binding.Ajax().Select("_GetItems", "Name"))
 
...
and in my controller:
[
HttpPost]
 
 
public ActionResult _GetItems(string text)
 
{
 
using (var db = new MyDataContext())
 
{
 
IQueryable<Linq2SqlTable> result = null;
 
 
 
if (text.HasValue())
 
{
result = db.MyItems.Where(c => c.Name.StartsWith(text).Distinct().OrderBy(g => g.Name);
}
 
else 
 
{
result = db.MyItems.Distinct().OrderBy(g => g.Name);
}
 
List<SelectListItem> sl = new SelectList(result.ToList(), "ID", "Name").ToList();
 
sl.Insert(0, (
new SelectListItem { Text = "-- All Items --", Value = string.Empty })); 
 
 
return new JsonResult 
 
{
Data = 
new SelectList(result.ToList(), "ID", "Name")
 
};
}
}

[Georgi Krustev]

Hello Michael,

 
Currently we have provided this code library devoted on the same issue. Nevertheless I will log your request to our product backlog and for further investigation and consideration. Depending on the users interest we will decide whether to include it in our future road map.

Regards,

Georgi Krustev
the Telerik team

[Travis]

Does the current version have support yet for the "(Select One)" option like Html.DropDownList?  If so, how do you do this using @Html.Telerik().DropDownList()?

@Html.DropDownList( "DropDownValue",(IEnumerable<SelectListItem>)ViewData["Menu"],"-- Select One --" )

[Georgi Krustev]

Hello Travis,

 
Unfortunately, this functionality is currently is not supported. Nevertheless you can easily achieve it with adding "(Select One)" item in the begging of the collection. Check this code snippet:

@{
List<SelectListItem> list = (List<SelectListItem>)ViewData["Menu"];
list.Insert(0, (new SelectListItem { Text = "-- All Items --", Value = string.Empty }));

Html.Telerik().DropDownList()
         .Name("DropDownList")
         .BindTo(list)
         .Render();
}

Best regards,
Georgi Krustev
the Telerik team

[Poqwe]

Adding empty item like

list.Insert(0, (new SelectListItem { Text = "-- All Items --", Value = string.Empty }));

does NOT work. When you post the form you will get the string "-- All Items --" in your model instead of the empty string!

After struggling for some time with this, I finally sorted out what causes the Text value to appear in your model's property.
You CANNOT use a string that starts with '-'  in your Text property of the SelectItem.

Instead, using

list.Insert(0, (new SelectListItem { Text = "All Items", Value = string.Empty }));

should work just fine.

I'm using the Telerik version of 2011.2.914. I haven't had a chance to try the latest versions yet, but at least the release notes did not mention any fix for this.

regards,
Tommi

[Poqwe]

Ugh, unfortunately it seems I wasn't exactly right.
According to multiple tests it did work when I changed the Text value as mentioned.
But now for some reason it is doing the same thing again even when the text does not start with '-'.

UPDATE & WORKAROUND:
For some reason it did work every now and then which really made me think it had something to do with the Text property as described earlier. But now I found out how to reproduce this:

Let's say you have a form that has dropdownlist with and "optionlabel" item as first item. This item has Text="Choose..." , Value=string.Empty

If you submit this form without touching the dropdown in anyway, the value of the property in your model wil be "Choose..." instead of empty string or null! This I found very odd?!

But, if you open the dropdown (even if you don't select the Choose.... -item), then it works as expected and the value in your model will be null.

The possible workarounds are either to select the first item of every dropdown on your form by script after page has been loaded or to write custom modelbinder which replaces the Choose... to null before the model is passed to your controller's method.



And yes, the same behaviour can be seen when using the .Placeholder("Choose..") in your view's markup and with the latest Telerik MVC version 2011.3.1306


regards,
Tommi

[Paul]

The issue is with the value.  When you use an empty string, the text value will be used.  I believe this is a bug and should be fixed.  Here is the source code in question (Thanks Telerik for providing).

In DropDownListHtmlBuilder.cs file method HiddenInputTag() around line 83 

public IHtmlNode HiddenInputTag()
{
    ...
    if (Component.Items.Any())
    {
        DropDownItem selectedItem = Component.Items[Component.SelectedIndex];
        input.Attribute("value", selectedItem.Value.HasValue() ? selectedItem.Value : selectedItem.Text);
    }
    ...
}

Here we see that selectedItem.Text is used when HasValue is false.  Lets look at HasValue() ...

public static bool HasValue(this string value)
{
    return !string.IsNullOrEmpty(value);
}

We can see that it is checking if it is null or empty.  I believe this is in error.  An empty string is a valid value! In fact, an argument could be made that if the value is null, String.Empty should be used.  The DropDownItem class has a specific value for Text and Value.  If the developer wants to use the Text as the Value, it should be up to them to set Value property to that.  We don't want the component to magically use that value.

Here is my proposed fix ...

public IHtmlNode HiddenInputTag()
{
    ...
    if (Component.Items.Any())
    {
        DropDownItem selectedItem = Component.Items[Component.SelectedIndex];
        input.Attribute("value", selectedItem.Value ?? string.Empty);
    }
    ...
}

[Som]

This is from the code behind and it works:

Add this code after data bind.

dropDownList.Items.Insert(0, New Telerik.Web.UI.RadComboBoxItem([String].Empty, [String].Empty))
dropDownList .SelectedIndex = 0