Specific ComboBox requirements

[Andreas]

Hi

 

I need to create a very specific set of functionalities for a ComboBox, and from browsing the demos/apis/overview, I havn't been able to determine if it is possible. Therefore; this post, since I'm hoping someone with more experience using Kendo UI and the ComboBox widget, could answer the question.

The ComboBox has the following requirements:

• UI-wise it will be two input field, where the user can write numbers in one, and letters in the other. Each of these input fields will be a separate ComboBox but they will share the Datasource.
• When no inputs have been provided, the options in the ComboBox should be empty.
• Whenever something is typed in one of the input fields, the Datasource should perform a fetch for new data, using the input as parameters (send via the url and used as filters on the server).
• The Datasource should not fetch data if the input characters are less than 3.
• Upon selecting an option in one of the ComboBox's the other should be updated with the selected value as well (One showing the options number, the other, the options name)

 

Is this possible? Basically I'm hoping to not download all of the options available on the server, and limit the fetching for when useful filtering values are available.

Any hints/examples would be helpful.

Would another widget be more suitable for this task?

 

(I'm guessing I have to setup a Datasource with Virtualization, but I havn't been able to get that going yet, so don't want to spend any more time on it, if it is the wrong direction I'm heading).

[Alexander Valchev]

Hi Andreas,

Straight to points that you listed:

UI-wise it will be two input field, where the user can write numbers in one, and letters in the other. Each of these input fields will be a separate ComboBox but they will share the Datasource.

It is possible to bind two ComboBox widgets to the same DataSource instance, however you should keep in mind that when one of the widgets reads the DataSource, both widgets will rebind.

var dataSource = new kendo.data.DataSource(/* config */);

$("#combo1").kendoComboBox({ dataSource: dataSource /* etc.. */ });
$("#combo2").kendoComboBox({ dataSource: dataSource, autoBind: false /* etc.. */ });

When no inputs have been provided, the options in the ComboBox should be empty.

By default when no text is entered the ComboBox list will be empty. When the user click on the drop down arrow however the widget will issue read request to the server to retrieve and display the data.

At this point the server side implementation may detect that there is no filter and return empty data set instead of the fill data set. In this way the widget will display no options at all. Displaying empty options is not supported.

Whenever something is typed in one of the input fields, the Datasource should perform a fetch for new data, using the input as parameters (send via the url and used as filters on the server).

This is the default behaviour for ComboBox with server filtering.

http://demos.telerik.com/kendo-ui/combobox/serverfiltering

http://docs.telerik.com/kendo-ui/controls/editors/combobox/serverfiltering#advantages

The Datasource should not fetch data if the input characters are less than 3.

Check the minLength configuration option.

Upon selecting an option in one of the ComboBox's the other should be updated with the selected value as well (One showing the options number, the other, the options name)

This is a custom behaviour. You may implement it using the value method and change event of the widget.

I hope the information will help.

Regards,
Alexander Valchev
Telerik