2 related Combo Boxes

[Vince]

Hello. I'm using kendo with angularJs + C# MVC. I'm trying to crate 2 related combo boxes. I have a OData dataSouce with items {Id: number, Name: string, Number: string}. I need to display in 1-st comboBox Names and in 2-nd - Numbers. Also, when i'll select some Name, the same item (with this selected item's Id) should be selected in 2-nd comboBox. And vise-versa. The DataSource contains very big amount of data. So i have to use virtualization here. My decidion is to crate 2 different ComboBoxes with different Options, but with the same DataSource (i'll avoid of handling filtering in ComboBoxes). So, my code is following:

 <select id="Name" name="Name"
                kendo-combo-box
                upper-hint
                k-ng-model="MyCtrl.item.ItemByName"
                k-options="TimesheetNewCtrl.NamesOptions"
                k-data-source="MyCtrl.dsNames"></select>

 

  <select id="Number" name="Number"
                kendo-combo-box
                upper-hint
                k-ng-model="MyCtrl.item.ItemByNumber"             
                k-options="TimesheetNewCtrl.NumberOptions"
                k-data-source="MyCtrl.dsNames"></select>

 

and in the MyCtrl i have:

var CreateDS = (url: string, _pageSize?: number, _model?: any, _sort?: any, _filter?: any, parameterMap?: any) => {
            var ps = _pageSize || 5;

            return new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read:
                    {
                        url: url,
                        dataType: "json"
                    },
                    parameterMap: parameterMap || Ui.GridBase.ODataParameterMap
                },
                schema: {
                    data: data => data["value"],
                    total: data => data['@odata.count'],
                    model: _model
                },
                serverPaging: true,
                serverSorting: true,
                sort: _sort,
                serverFiltering: true,
                pageSize: ps,
                filter: _filter

            });
        }

this.dsNames = CreateDS(dsBookingsNamesUrl, 0, null, null, null);

 

this.NumberOptions = {
                autoBind: false,
                placeholder: "Number...",
                dataValueField: "Id",
                dataTextField: "Number",
                filter: "contains",
                ignoreCase: true,
                change: (e) => {
                    if (e.sender.dataItem() == null) {
                        e.sender.value(null);
                        e.sender.text(null);
                        return;
                    }
                   
                    this.item.ItemByName = this.item.ItemByNumber;
                    this.dsNames.filter(null); 

                    $scope.$apply();
                },

               height: 260,
                virtual: {
                    itemHeight: 26,
                    valueMapper: (options) => {
                        options.success([]);
                    }
                }
            }

            this.NamesOptions = {
                autoBind: false,
                placeholder: "Name...",
                dataValueField: "Id",
                dataTextField: "Name",
                filter: "contains",
                ignoreCase: true,
                change: (e) => {
                    if (e.sender.dataItem() == null) {
                        e.sender.value(null);
                        e.sender.text(null);
                        return;
                    }

                    this.item.ItemByNumber = this.item.ItemByName;
                    this.dsNames.filter(null);

                    $scope.$apply();
                },

                height: 260,
                virtual: {
                    itemHeight: 26,
                    valueMapper: (options) => {
                        options.success([]);
                    }
                }
            }

It works almost fine. However, when i scroll down any of this ComboBoxes and select some value from it, this value is changing to some different value.

 

May be i'm doing something wrong? Also i've tried to change ValueMapper to return exact number of the selected element, but if i'm adding this value mapper to each of Options, it's constantly firing.

May be i heed to use 2 different dataSources? Could you provide any example of related comboBoxes (as i've described earlier)?

 

[Georgi Krustev]

Hello Vince,

Several general principals that I would like to cover:

1. The valueMapper should return the selected index based on the selected value of the widget. If the function returns an empty array, then the widget will clear the current selected item.

2. Although using a shared data source is possible it is much more predictable, from implementation point of view, to use separate data source instances. The reason for this statement is the internal usage of the datasource in the widgets. When source is changed, then the widget should react on this change and will re-render the source. This could break the virtualization.

3. If you would like to filter the source manually outside of the widgets, then you will need to perform the actions demonstrates in this how-to demo:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/how-to/filter-datasource-manually

With those details in mind, I would suggest you at least try with separate data sources, as this will exclude one variable from the equation.

Please note that the supported cascading functionality of the ComboBox is demonstrated in this help topic:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/cascading

If the developer wants to relate the widgets in different way, then he/she will need to handle that custom implementation manually.

Regards,
Georgi Krustev
Telerik

 

 

[Vince]

Thank you. I've used 2 different dataSources. Seems like it works now.