2 related Combo Boxes

3 posts, 0 answers
  1. Vince
    Vince avatar
    2 posts
    Member since:
    Feb 2016

    Posted 01 Jul Link to this post

    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)?

     

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 05 Jul Link to this post

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Vince
    Vince avatar
    2 posts
    Member since:
    Feb 2016

    Posted 05 Jul in reply to Georgi Krustev Link to this post

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