[Solved] AutoComplete issue

[Mikael]

Hi!

I am using a Telerik ComboBox for selecting some ID-values. I am using  AutoCompleteFilterMode.Contains as FilterMode.
Here is a part of the view:

@Html.HiddenFor(model => model.ExistingID)
@Html.Label(Model.ExistingID+"")

<div>
      @{Html.Telerik()
            .ComboBox()
            .Name("ID")
            .Encode(false)
            .BindTo(Model.TestList)
            .AutoFill(false)
            .HighlightFirstMatch(true)
            .ClientEvents(events => events.OnChange("IDChange"))
            .Filterable(filter => filter.FilterMode(AutoCompleteFilterMode.Contains))
            .Value(Model.ID.ToString())
            .Render();}

In certain situations I want the user to confirm that he/she realy wants to change the value of the ComboBox. This is handled by the OnChange event:

function IDChange(e) {
    var existingIDvalue = $("#ExistingID").val();
    var currentIDvalue = $("#ID").val();
    var currentIDctrl = $("#ID").data("tComboBox");

    if (existingIDvalue == currentIDvalue)
        return;
    if (existingIDvalue > 0) {
        if (!confirm("Do you want to change the value?")) {
            currentIDctrl.value(existingIDvalue);
        }
    }
    return;
}

If the user press cancel in the confirmbox the ComboBox should go back and show the existing (previus) value.
This work fine most of the times.

The problem is when the user type in some letter in the ComboBox and use the AutoComplete feature. Then the ComboBox (as it should) will display only a subset of the available options.
If the user now choose not  to change the value (by pressing cancel in the confirmbox),  the ComBox should revert to the existing (previus) value. However, beacuse of the AutoComplete feature, this value is not in the current displaylist of the ComboBox.

Then this line:

currentIDctrl.value(existingIDvalue);

will generate an error: The objectet is null or undefined.

It seem that the Telerik ComboBox is using the ComboBox.select(index) function to set this value. The index of existingIDvalue is perhaps 6 (unfiltered). But now, beacuse of the AutoComplete filtering, the ComboBox is only displaying 2 items, there will bee an "index out of range error".

Is there a way to handle this?
I just want the user to bee able to cancel the new value, even when using the AutoComplete feature.

Here is the model and controller used for this example:

namespace ComboBoxTest.Models
{
    public class HomeModel
    {
        public HomeModel()
        {
            SelectListItem li1 = new SelectListItem();
            li1.Value = "1";
            li1.Text = "One";
            SelectListItem li2 = new SelectListItem();
            li2.Value = "2";
            li2.Text = "Two";
            SelectListItem li3 = new SelectListItem();
            li3.Value = "3";
            li3.Text = "Three";
            SelectListItem li4 = new SelectListItem();
            li4.Value = "4";
            li4.Text = "Four";
            SelectListItem li5 = new SelectListItem();
            li5.Value = "5";
            li5.Text = "Five";
            SelectListItem li6 = new SelectListItem();
            li6.Value = "6";
            li6.Text = "Six";

            IList<SelectListItem> nrlist = new List<SelectListItem>();
            nrlist.Add(li1);
            nrlist.Add(li2);
            nrlist.Add(li3);
            nrlist.Add(li4);
            nrlist.Add(li5);
            nrlist.Add(li6);
            TestList = new SelectList(nrlist, "Value", "Text");
        }
        public int ID { get; set; }
        public int ExistingID { get; set; }

        public SelectList TestList { get; set; }
    }
}

namespace ComboBoxTest.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult ExistingSupplier(int i)
        {
            HomeModel m = new HomeModel();
            m.ID = i;
            m.ExistingID = i;
            return View("Combo",m);
        }
        public ActionResult NewSupplier()
        {
            HomeModel m = new HomeModel();


            return View("Combo", m);
        }

        public ActionResult About()
        {
            return View();
        }
    }
}

I attached a complete demo-project.
Just run the project and type in "6" in the input-field next to the Existing button. Click on the Existing button.
Type in "o" in the ComboBox and then select "one" in the selectlist.
Press cancel in the confirmbox and you should get the error.

Hope you can help mee with some suggestions here.
Best Regards 
Mikael


 

[Georgi Krustev]

Hello Mikael,

 
What I can suggest you rebind the component before set the value:

function IDChange(e) {
        var existingIDvalue = $("#ExistingID").val();
        var currentIDvalue = $("#ID").val();
        var currentIDctrl = $("#ID").data("tComboBox");

        if (existingIDvalue == currentIDvalue)
            return;
        if (existingIDvalue > 0) {
            if (!confirm("Do you want to change the value?")) {
                currentIDctrl.dataBind(currentIDctrl.data, true)
                currentIDctrl.value(existingIDvalue);
            }
        }
        return;
    }

Regards,
Georgi Krustev
the Telerik team

[Mikael]

Thanks for Your answer!

I tried that, but I still get the same error. The ComboBox is still filtered. It still contains only the values that the AutoComplete feature givs me.

Best Regards
Mikael

[Georgi Krustev]

Hello Mikael,

 
In order to progress with the investigation, I will need test project which replicates the problem.

Regards,
Georgi Krustev
the Telerik team

[Mikael]

Hello!

Have You looked at the demoproject I included in my first post?

Best Regards
Mikael

[Georgi Krustev]

Hello,

 
Please excuse me for missing the test project. After some modifications in the IDChange event handler, because the confirm was never called, I was not able to replicate the problem. Check this screencast, which shows my tests. The modified test project is attached.

Kind regards,
Georgi Krustev
the Telerik team

[Mikael]

Thanks for your answer. I tried your modifications but the problem still remains.

Try this:

* start the modified demo project.
* Type "6" in the textbox
* Press the Existing button
* Open up the DropDownList by just clicking on the "DownArrow"

Now you get a list of six chooises:
 
  One
  Two
  Three
  Four
  Five
  Six   * The old value is included in the list - OK

  from the Telerik DropDown.

Continue:

* Choose any one you like.
* Press cancel in the "Do you want to change the value" popup.

Now the combobox revert to "Six" - This time everything is OK beacuse the old value six is include in the select-list.

 

Here is how to replicate the problem:
* start the modified demo project.
* Type "6" in the textbox
* Press the Existing button
*********************************************************************************************
* Open up the DrowDownList by typing "o" (like in "one") in the ComboBox-field
*********************************************************************************************

Now the Autocomplete-filter is in action, you get a list of only 3 chooises:

  One
  Two
  Four

from the Telerik DropDown.

Notice that the old value (six)  is NOT in the list beacuse of the Autocomplete-filter is only showing items with the letter "o" inside.

Continue:
* Choose one of the three items (lines).
* Press cancel in the "Do you want to change the value" popup.

Now the combobox - cant revert to  six beacuse it is not in the Autocomplet-filtered list -  You get the error.

We want the user to bee able to change his mind even if he use the Autocomplete-feature.
Best Regards
Mikael

 

[Georgi Krustev]

Hello,

Thank you for the clarification. I was able to observe the depicted issue. As a workaround for the issue, I will suggest you rebind the combobox before set the value:

function IDChange(e) {
        var existingIDvalue = $("#ExistingID").val();
        var currentIDvalue = $("#ID").val();
        var currentIDctrl = $("#ID").data("tComboBox");

        if (existingIDvalue == currentIDvalue)
            return;
        if (currentIDvalue > 0) {
            if (!confirm("Do you want to change the value?")) {
                currentIDctrl.dataBind(currentIDctrl.data);
                currentIDctrl.value(existingIDvalue == "0" ? "" : existingIDvalue);
            }
        }
        return;
    }

I have logged this limitation in our internal system. We will further investigate this issue and will try to improve this behavior. 

Regards,
Georgi Krustev
the Telerik team