[Solved] Force item match in combobox

[Joan Vilariño]

Hi.

I have a combobox with an attached selectlist that's got "id" and "name" items ... the combobox loads content ajax databound. When you select an item, at post time, the element id is posted as expected.

The problem comes when the user types anything that doesn't match with any result, giving an empty list.. when this is posted, the form value for that component, instead of having "null" or "string.empty" or even "0" for that non-existent item, sends me the content of the textbox typed by the user. Let's say I have a "long" id in my project, and you type "John smith", if there is no "John smith" in the item list, "John smith" is the posted value I get...

I don't think this is a correct behavior, and it even could lead to a security hole letting the user to type a row id instead of an item of the searchbox, and that would be posted without problems.

Is there any way to "force" the user to select one item from the list? or send null o string.empty for the id if no item was selected or the typed text doesn't match with any list item?

I hope I made myself clear, my english is not as good as I'd like.

Thanks!!

[Joan Vilariño]

No "official" response on this?

[Georgi Krustev]

Hello Joan,

The described behavior of the ComboBox UI component is expected. The main difference between DropDownList and ComboBox is that the user can type what ever he wants in the combobox. If you need
to restrict the User from typing arbitrary values, then you need to use a DropDownList. That was the reason why we decided to introduce three UI components from one family (ComboBox). The DropDownList itself allows the users to type in it and selects the first value, much like HTML <select> boxes.

As far as security holes, I do not believe that the ComboBox should restrict such data internally, because it does not know what is dangerous for the server anyway.

Best wishes,
Georgi Krustev
the Telerik team

[Joan Vilariño]

Dropdownlist is not an option since I need to search items in a table that's got like 80000 records... I don't think any navigator (or user) in the world can take that. So, what's the solution in this case?

[Georgi Krustev]

Hello Joan,

You can wire OnChange event and on particular condition to clear ComboBox value. Thus you will control what value will be posted:

function onComboBoxChange(e) {

    if (isNaN(e.value))
        $(this).data('tComboBox').value('');
}

Sincerely yours,
Georgi Krustev
the Telerik team

[Joan Vilariño]

That is the solution I'm doing at this moment... but I find it a little weird while it would be much easiest to have a "ForceSelect(true)" or whawtever you call it already implemented at the control.

Another thing I find is that in my current scenario, the combobox value should be required, so, if the user types any strange value and directly clicks on update, the onChange event will empty the combobox, but it can't prevent the row from being posted... and "Required" is not working for me..

Cheers

[Georgi Krustev]

Hello Joan Vilariño,

Currently we do not consider such behavior. Actually we do not have the concrete idea how to implement this feature. Could you share with us what approach of implementing this feature you will choose and how you will implement it ? If there is no correct match, what should be the behavior of the combobo UI component?

Regards,
Georgi Krustev
the Telerik team

[Joan Vilariño]

Hi Gregori.

The basic idea is, and this is how I've implemented it, not allowing the user to place any value in the textbox that's not present in the list.

In my code, I'm solving this hooking the onChange event of the combo, and if the internal dropdownlist doesn't have any item, it means that the user typed something that wasn't present in the list. When this happens, I reset the combobox to string.empty.

This is the template:

<%=Html.Telerik().ComboBox().Name("myCombo")
       .Filterable(ft => ft.FilterMode(AutoCompleteFilterMode.Contains).MinimumChars(3))
       .DataBinding(db => db.Ajax().Select("_getComboItems", "GrupoTitular").Delay(500))
       .ClientEvents(ev => ev.OnChange("checkComboBox"))
%>

And here's the javascript function that gets fired at OnChange event:

function checkComboBox(e) {
    e.preventDefault();
    // remove any previous error
    $(e.target).find('t-input').removeClass('input-validation-error');
    // handler to the combo object
    var combo = $(e.target).data('tComboBox');
    // if the dropdownlist is empty, the user typed something not allowed
    if (combo.dropDown.$items.length == 0) {
        // reset the combo
        combo.value('');
        combo.text('');
        // mark the input error
        $(e.target).find('.t-input').addClass('input-validation-error');
    }
}

My petition is that you create a builder function to allow this behavior, ie, ".AllowOnlySelection(true)" or whatever you want to call it, that places a validation on the combo that wouldn't permit the user typing anything that's not in the dropdownlist...

If you need a clearer example, I can send you a little project implementing it...

Thanks!

PS: Please, do you have any news on my other open post (http://www.telerik.com/community/forums/aspnet-mvc/grid/combobox-not-posting-its-data-on-ajax-update.aspx) about posting dropdownlists on ajax grids not working anymore since last update ?

[Jeff]

Hi - Just wondering if there's a good way to do this yet?  We would also love to be able to use a combination of the auto-complete/ajax functionality of combobox while requiring that the user select a valid value like dropdown list.  

Ex: say we have dropdown/combobox for US State with auto-complete keying off "starts with", just throwing out a couple ideas on how it could work...

- User types "ma" and tabs out, or hits enter:  Select the first matching value in the list ("Maine").
- User types "mab":  list clears (no matching states) as it does now.  If user tabs out or hits enter before correcting, add an instant validation error like "Invalid value selected" and don't let them submit the form until either a valid value is selected, or the value is cleared. 

Thanks!

[Phil]

Check out my solution posted 19th May 2012 on this thread:
http://www.telerik.com/community/forums/aspnet-mvc/combobox/mandatory-value-in-combobox.aspx#2115718

Phil