Looking for the right widget

[David]

Hi,

I'm just so confused why you decided to have three widgets for something that - in my believe - could just be one widget with some configuration options...

I'm talking about combobox, dropdownlist and autocomplete.

I'm guessing I need the dropdownlist because:

• The label shown to the user should be different from the value submitted in the form (yes, the value should be an object if where the label should obviously be a user-readable object description, so I'm having my server return data such as [{id:"1", label:"Belgium"}, {id:"2", label:"United Kingdom"}, {id:"3", label:"France"}] which I believe should allow me to display country names, but when the form is submitted, I should get the ID's. (I'm using the dataTextField and dataValueField)

However, we sometimes have THOUSANDS of objects to choose from, so we want to use the autocomplete because:

• it allows me to do serverside filtering based on characters entered by the user

So I'm a bit stuck here.  Basically I believe we want an autocomplete, but with the ability to have value differ from text/label.  The jQueryUI autocomplete (which we use up to now) does just that.  It allows me to return any data from the server, and using an event listener on the object, I can update a hidden field with the value for a selected element.

I'm just a little confused why you decided to make three widgets, while actually I believe a lot of people need a combination of them.  Why for instance does autocomplete not support either an event for item selection or the dataValueField option, and why does the dropdownlist not allow me serverside filtering, yet just loads everything from the server in one call?

Very confused now...  I believe you should try and make this ONE widget supporting all functionalities using configuration options.  One thing I also don't understand is why the autocomplete doesn't have a loading indicator when ajax is being retrieved, where the dropdownlist DOES show a loading icon.  Never believed picking out a widget would be so confusing to be honest :o)


David.

[Georgi Krustev]

Hello David,

In short we decided to have three different widgets, because they have some semantic differences:
 
1. The DropDownList widget, similar to the select element, allows the user to choose one value from a list.
2. The ComboBox widget allows the end user to choose one value from a list or to enter custom value. As it has input element, the end user can type and so to filter the values.
3. The AutoComplete is a widget, which provides suggestions to the end user. 

Depending on the given requirements I believe that you need to use the ComboBox widget, as it provides filtering and the it persist the selected object.

We will try to add select event for the next official release of Kendo UI. Filtering in DropDownList widget is still under consideration.

I will log your requirement for the loading icon in AutoComplete in our internal system. If other users need such functionality we will schedule it for further investigation.

Regards,
Georgi Krustev
the Telerik team

[David]

I just checked the combobox again, but it still doesn't suit my requirements, I believe...
Please correct me if I'm wrong, but these are the issues I see with using combobox:

• It seems that on initialisation, combobox will load all items from the server, without any filter.  PLease remember we may have thousands of objects in our database; we require the ajax call to happen if at least 2 characters are entered, so that we can do serverside filtering based on x first characters that are entered by the user
• It also seems that filtering is done within the combobox widget, and does not use the filtering options of the datasource; this would mean y first point of concern is even strengthened by this behaviour.

Basically, the use case we are looking for would be as follows:

• On initialise, the widget initialises with no data (unless a default value from for instance a modify-form where we need to set the current value programatically)
• When user enters 2 character minimum, an ajax call should be called to retrieve all items containing those two characters; server will return label for display and an id to be used asvalue for form submission

What widget would support this?

[Georgi Krustev]

Hello David, 

Straight upto your requirements:

It seems that on initialisation, combobox will load all items from the server, without any
- By default the combobox works as the dropdownlist. Nevertheless it suppots the required functionalities:

• delayed data binding - autoBind option
• Filtering - filter option
• Minimum characters - minLength option

It also seems that filtering is done within the combobox widget, ...
- The combobox uses the DataSource filtering functionailty when the filter option is set. Check this help topic for more information about the available filters

You can check the First Look demo of the combobox, which shows the filter functionality.


 Regards,
Georgi Krustev
the Telerik team

[David]

Thanks for the feedback.

However - as compbobox allows to enter ANY value, I'm still a bit confused.
Let's say I enter "Paper", in the T-shirt fabric combobox, what value will be submitted to the server?  As it is no value which is available, I'm just not sure what you'll be sending to the server.

I follow you that this might get close to what we actually need, but we still need to make sure that we don't have a non-existing value submitted (I for instance would like to add a "required" validator to this widget which would return false when there is no valid value selected...

Thanks again for the help!  Much appreciated.

[Georgi Krustev]

Hello David,

 
As you pointed the combobox allows custom values. That said, the value which will be posted to the server will be the custom value. In other words the "Paper" value will be submitted. One possible solution to prevent entering of a custom value is to clear value of the combobox when change event fires:

//change event handler of the combobox
function onChange() {
      if (this.selectedIndex == -1) {
           this.value("");
      }
}

Please note that selectedIndex is supported in the next official release of Kendo UI.

Kind regards,
Georgi Krustev
the Telerik team

[David]

but we don't want custom values?!?

We need a widget which selects an "existing" object from the database, remotely...

There is still no widget matching this use case :(

[Maxim Khlupnov]

Hello, David!



I'm pretty sure you can use AutoComplete to achieve your requirements.

You may need to use templates to store values or any other data you would get.

Please find some code examples from my project bellow:

1. Define template in your HTML/ASPX file

 <script id="tmplAutocompleat" type="text/x-kendo-tmpl">     

      <span 1С-Code="${ data.Code}" 1C-ContactName="${data.ContactName}" 1C-Address="${data.Address}">${ data.Title }</span>     

    </script>

2. Bind AutoComplete control to the template



       $("#selectedData").kendoAutoComplete({

           dataTextField: "Title", 

           filter: "startswith",

           dataSource: dataSource,

           select: onAutoCompleateChange,

           template: kendo.template($("#tmplAutocompleat").html())

       });



3. Get selected values and any other properties in event handler

function onAutoCompleateChange(e) {

    var templItem = $(e.item.context).children('span');

    $("table #1C-Title").text(templItem.text());

    $("table #1C-Address").text(templItem.attr("1C-Address"));

    $("table #1C-ContactName").text(templItem.attr("1C-ContactName"));  

    $("table").css("display","block");

    }