TypeScript: Cascading ComboBox from two GridColumns

[Moshe Hayun]

Hello,

I'm totally newbie in TypeScript and in KendoUI :) So I do not know how to explode my problem in the best way. There may be a better approach.

Here, I have a grid with several columns, including two "Result" and "ResultReason" that I would like to make dependent. That is, when a value is selected in the first, the second is automatically (if possible) filtered. My two grids are in two different GridColumn objects.

The ideal would be to filter the columns automatically (cascadeFrom), but is this possible?

If not, how do I read the selected value in the first column, in the second class? Should I call a function on the hand?

-----------Parent grid column-----------------------

export const ResultColumn: kendo.ui.GridColumn = {
    field: "ResultId",
    title: "Result",
    width: 120,

    editor: (container, options) => {
        debugger;
        $("<input id=\"ResultColumn\" data-text-field=\"ResultName\" data-value-field=\"ResultName\" data-value-field=\"ResultId\" data-bind=\"value:" + options.field + "\"/>")
            .appendTo(container).kendoComboBox({
                dataSource: new kendo.data.DataSource({
                    serverPaging: false,
                    transport: {
                        read: {
                            url: `${WCFBaseUrl}CustomActivities/ResultsList`,
                            dataType: "jsonp",
                            type: "webapi"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        errors: "Errors",
                    }
                }),
                dataValueField: "ResultId",
                dataTextField: "ResultName",
                valuePrimitive: true
            }).data("kendoComboBox");
    },

};

 

-----------------Child grid column----------------------

import { ResultColumn } from "./result-column";

export const ResultReasonColumn: kendo.ui.GridColumn = {
    field: "ResultReasonId",
    title: "Result Reason",
    width: 120,
    editor: (container, options) => {
        debugger;
        $("<input id=\"ResultReasonColumn\" data-text-field=\"ResultReasonName\" data-value-field=\"ResultReasonName\" data-value-field=\"ResultReasonId\" data-bind=\"value:" + options.field + "\"/>")
            .appendTo(container).kendoComboBox({
                cascadeFrom: "ResultColumn", //doesn't work
                dataSource: new kendo.data.DataSource({
                    serverFiltering: true, //doesn't work
                    serverPaging: false,
                    transport: {
                        read: {
                            url: `${WCFBaseUrl}CustomActivities/ResultReasonsList`,
                            dataType: "jsonp",
                            type: "webapi"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: "Total",
                        errors: "Errors",
                    }
                }),
                dataValueField: "ResultReasonId",
                dataTextField: "ResultReasonName",
                valuePrimitive: true
            }).data("kendoComboBox");
    }
}

 

Thank you

[Veselin Tsvetanov]

Hi Moshe,

The reason for the observed issue is the fact that both Combos are bound to a remote DataSource. This means, that at the time the second (the child combo) initializes its binding, the first Combo has not finished yet its remote call.

What I could suggest you to workaround this issue is to filter the child combo DataSource immediately after it has been initialized, based on the selected ResultsId in the Model:

var currentResultId = options.model.ResultId;

var combo = $("<input id=\"ResultReasonColumn\" data-bind=\"value:" + options.field + "\"/>")
            .appendTo(container).kendoComboBox({
................................

combo.dataSource.filter({ field: "ResultId", operator: "eq", value: currentResultId });

In order to synchronize the above Combo to any changes made in the first one, a change event handler for the master Combo needs to be implemented:

$("<input id=\"ResultColumn\" data-bind=\"value:" + options.field + "\"/>")
    .appendTo(container).kendoComboBox({
        change: function (e) {
            var childCombo = <kendo.ui.ComboBox>$('#ResultReasonColumn').data('kendoComboBox');
            childCombo.dataSource.filter({ field: "ResultId", operator: "eq", value: e.sender.value() });
            childCombo.value(null);
        },
....................

Attached you will find simple HTML and ts files, implementing the suggested change. You will notice, that I have timeouted the initialization of the master ComboBox in order to mimic the remote binding delay.

Regards,
Veselin Tsvetanov
Progress Telerik

[Moshe Hayun]

Hello Veselin,

 

Thank you for your answer. Sadly, it doesn't work for me. On debugging, I notice that the comboBox (both) does not have id attribute. It seems that this attribute has been removed. Do you know why?

 

var childCombo = <kendo.ui.ComboBox>$('#ResultReasonColumn').data('kendoComboBox'); // Gives me 'undefined'

 

Thank you

[Veselin Tsvetanov]

Hello Moshe,

May I ask you to prepare and send us a small isolated runnable sample, that reproduces the issue observed? This way we will be able to troubleshoot the problem locally and to provide you with the most appropriate assistance for this case.

Also, if that would help, you could use as a starting point for the sample the attached to my previous reply ts and html files.

Regards,
Veselin Tsvetanov
Progress Telerik

[Moshe Hayun]

Hello Veselin,

 

Sorry for the late answer, I was off last weeks (I like August :) )

In fact, I'd like to ask you a question: I hesitate between two components. My model returns objects composed of two strings (an Id and a Name).
But it might returns hundreds of values. The ideal would be to filter the returned values from what the user writes. So I thought of an AutoComplete component, but I understand that this component does not support complex objects. On the other hand, it does not seem possible either to filter the values of a ComboBox (serverFiltereing) according to the first letters entered by the user.
Do you confirm these two points? And would you know how to solve the problem?

Thank you

[Veselin Tsvetanov]

Hi Moshe,

You are correct, that the Kendo AutoComplete can be bound only to a list of string values and complex objects are not supported for that widget.

The ComboBox, on the other hand, supports complex object binding. It also supports filtering (both server side and client side). The filtering could be of three types: startswith, endswith and contains. Note, that when server filtering is used, you will have to implement the filtering logic on the server, based on the text, that has been sent from the widget. Here you could find some more information on that topic.

Regards,
Veselin Tsvetanov
Progress Telerik