TypeScript: Cascading ComboBox from two GridColumns

6 posts, 0 answers
  1. DevHM
    DevHM avatar
    6 posts
    Member since:
    Jul 2017

    Posted 24 Jul Link to this post

    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

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 26 Jul Link to this post

    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.
  3. DevHM
    DevHM avatar
    6 posts
    Member since:
    Jul 2017

    Posted 27 Jul in reply to Veselin Tsvetanov Link to this post

    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

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 28 Jul Link to this post

    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.
  5. DevHM
    DevHM avatar
    6 posts
    Member since:
    Jul 2017

    Posted 24 Aug Link to this post

    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

  6. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    558 posts

    Posted 28 Aug Link to this post

    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.
Back to Top