This is a migrated thread and some comments may be shown as answers.

TypeScript: Cascading ComboBox from two GridColumns

5 Answers 149 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Moshe Hayun
Top achievements
Rank 1
Moshe Hayun asked on 24 Jul 2017, 08:14 AM

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

5 Answers, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 26 Jul 2017, 07:26 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Moshe Hayun
Top achievements
Rank 1
answered on 27 Jul 2017, 06:22 AM

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

0
Veselin Tsvetanov
Telerik team
answered on 28 Jul 2017, 12:21 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Moshe Hayun
Top achievements
Rank 1
answered on 24 Aug 2017, 07:11 AM

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

0
Veselin Tsvetanov
Telerik team
answered on 28 Aug 2017, 07:17 AM
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 typesstartswith, 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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ComboBox
Asked by
Moshe Hayun
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Moshe Hayun
Top achievements
Rank 1
Share this question
or