Cascade ComboBoxes with AngularJS model - not working ng-model

[Janusz]

Hi,

I have application in KendoUI and AngularJS, and I have problem with cascade comboboxe's.
i have defined popup window with some controls, where 4 of them are comboboxes (with cascade).
Options generated by service looks:

symfonyTaxRegisterDropDown: function(){
                return {
                    index: -1,
                    optionLabel: " ",
                    valuePrimitive: true,
                    autoBind: true,
                    filter: "contains",
                    dataTextField: "name",
                    dataValueField: "id",
                    dataSource: {
                        type: "json",
                        serverFiltering: true,
                        transport: {
                            read: {
                                url: "unisono/symfony/vat/register"
                            }
                        },
                        schema: {
                            data: "data",
                            total: function (result) {
                                return result.total;
                            }
                        }
                    }
                }
            },

In controller I defined options:

$scope.customerOptions = optionsGenerator.companyDropDown(); //combobox with customer id
                $scope.supplierOptions = optionsGenerator.contractorDropDown(); //combobox with supplier id
                $scope.supplierOptions.cascadeFrom = "customer";
                $scope.supplierOptions.cascadeFromField = "id";

                $scope.paymentOptions = optionsGenerator.enumerationDropDown("paymentMethod", $scope.documentType);
                $scope.currencyOptions = optionsGenerator.enumerationDropDown("currency", $scope.documentType);

                $scope.typeOptions = optionsGenerator.symfonyDocumentTypeDropDown(); //combobox with documentTypeSymfony id
                $scope.typeOptions.cascadeFrom = "customer";
                $scope.typeOptions.cascadeFromField = "id";

                $scope.categoryOptions = optionsGenerator.symfonyCategoryDropDown(); //combobox with category id
                $scope.categoryOptions.cascadeFrom = "documentTypeSymfony";
                $scope.categoryOptions.cascadeFromField = "id";

                $scope.vatRegisterOptions = optionsGenerator.symfonyTaxRegisterDropDown(); //combobox with taxRegister id
                $scope.vatRegisterOptions.cascadeFrom = "customer";
                $scope.vatRegisterOptions.cascadeFromField = "id";

                $scope.descriptionOptions = optionsGenerator.symfonyDescriptionDropDown(); //combobox with description id
                $scope.descriptionOptions.cascadeFrom = "customer";
                $scope.descriptionOptions.cascadeFromField = "id";

and directive template:

<div id="{{ windowIdentifier }}" kendo-window="dialogWindow" k-modal="true" k-resizable="false"
     k-draggable="false"
     k-width="width"
     k-height="height"
     k-title="false"
     k-visible="false"
     k-on-open="dialogVisibility = true; openWindowEvent(); test();"
     k-on-close="dialogVisibility = false;"
     style="font: 0.75em 'Noto Sans', Ubuntu, Arial, Helvetica, sans-serif; overflow: hidden !important;">
    <div kendo-toolbar k-options="toolbarOptions">
    </div>
    <div id="correctionContent" kendo-splitter k-panes="[ null, {collapsible: true, size: positionSize, resizable: false, collapsed: true}]" k-on-collapse="stageResizePositionCollapseEvent(kendoEvent)"
        k-on-expand="stageResizePositionExpandEvent(kendoEvent)" k-orientation="'vertical'" style="height: {{height - 50}}px; width: {{width - 14}}px; overflow: hidden !important;" ng-controller="draw">
        <div kendo-splitter k-panes="[ {collapsible: true, size: leftSideSize, resizable: false}, null]"  k-on-collapse="stageResizeLeftSideCollapseEvent(kendoEvent)"
             k-on-expand="stageResizeLeftSideExpandEvent(kendoEvent)" k-orientation="'horizontal'" style="overflow: hidden !important;" ng-controller="symfonyCorrection">
            <div style="margin-left: 10px;">
                <table style="width: 360px">
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.COMPANY' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <select id="customer" ng-model="documentDoc.customer" name="customer" kendo-drop-down-list
                                    k-options="customerOptions" style="width: 238px; padding-top: 10px;" tabindex="0" ng-change="companyChange();">
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.CONTRACTOR' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <div style="display: inline-block; padding-top: 10px;">
                                <div style="float:left;" id="contractorInfoTip" name="contractorInfoTip">
                                    <kendo-button style="float:left; height: 26px; width: 26px;" sprite-css-class="'arrowDown'"
                                              id="showContractorInfo" ng-click="contractorInfo()" ></kendo-button>
                                </div>
                                <select style="float:left; width: 155px;" id="supplier" name="supplier" k-suggest="true"
                                        k-on-data-bound="supplierDataBound(kendoEvent)"
                                        ng-model="documentDoc.supplier" name="supplier" kendo-combo-box
                                        k-options="supplierOptions" ng-focus="drawFocus($event)"
                                        ng-blur="lostFocus($event)" tabindex="1" ng-mouseup="handlingDrop($event, 'SUPPLIER');"
                                        ng-change="changeValid('SELECT','supplier')"></select>
                                <kendo-button style="float:left; height: 26px;" sprite-css-class="'editMark'"
                                              id="editContractor" ng-click="contractorEdit()"></kendo-button>
                                <kendo-button style="float:left; height: 26px;" sprite-css-class="'addMark'"
                                              id="addContractor" ng-click="contractorAdd()"></kendo-button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.TYPE' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <div style="padding-top: 10px;">
                                <select id="documentTypeSymfony" name="documentTypeSymfony" ng-model="documentDoc.documentType" kendo-combo-box
                                        k-options="typeOptions" style="width: 238px;" tabindex="2" k-on-data-bound="documentTypeDataBound(kendoEvent)"
                                        k-suggest="true"></select>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.INVOICE_NUMBER' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <div style="padding-top: 10px;">
                                <input id="invoiceNumber" name="invoiceNumber" ng-model='documentDoc.invoiceNumber'
                                       style='width: 234px;' ng-focus="drawFocus($event)" ng-blur="lostFocus($event)" tabindex="3"
                                       ng-mouseup="handlingDrop($event, 'TEXT_ONE_LINE');" ng-change="changeValid('TEXT','invoiceNumber')"/>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.CORRECT_INVOICE_NUMBER' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <div style="padding-top: 10px;">
                                <input id="correctInvoiceNumber" name="correctInvoiceNumber" ng-blur="lostFocus($event)"
                                       ng-model='documentDoc.correctInvoiceNumber' style='width: 234px;' ng-focus="drawFocus($event)"
                                       tabindex="4" ng-mouseup="handlingDrop($event, 'TEXT_ONE_LINE');" />
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.ISSUE_DATE' | translate}}</label>
                        </td>
                        <td style="width: 120px;">
                            <input id="creationDate" name="creationDate" kendo-date-picker ng-model="documentDoc.creationDate"
                                   style='width: 118px; ' ng-focus="drawFocus($event)"ng-blur="lostFocus($event)" tabindex="5" k-options="datePickersOptions"
                                   ng-mouseup="handlingDrop($event, 'DATE');" ng-change="changeValid('DATE','creationDate')"/>
                        </td>
                        <td style="width: 120px;">
                            <input id="receiptDate" name="receiptDate" kendo-date-picker ng-model="documentDoc.receiptDate"
                                   style='width: 118px; ' ng-focus="drawFocus($event)" ng-blur="lostFocus($event)" tabindex="6" k-options="datePickersOptions"
                                   ng-mouseup="handlingDrop($event, 'DATE');" ng-change="changeValid('DATE','receiptDate')"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.SALES_DATE' | translate}}</label>
                        </td>
                        <td colspan="2">
                            <input id="salesDate" name="salesDate" kendo-date-picker ng-model="documentDoc.salesDate"
                                   style='width: 118px;' ng-focus="drawFocus($event)" ng-blur="lostFocus($event)" tabindex="7" k-options="datePickersOptions"
                                   ng-mouseup="handlingDrop($event, 'DATE');" ng-change="changeValid('DATE','salesDate')"/>
                        </td>
                    </tr>
                    <!--<tr style="width: 10px;"><td colspan="3" style="width: 10px;"></td></tr>-->
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.PAYMENT_DATE' | translate}}</label>
                        </td>
                        <td style="width: 120px;">
                            <select id="paymentMethod" name="paymentMethod" ng-model="documentDoc.paymentMethod"  tabindex="8"
                                    kendo-drop-down-list k-options="paymentOptions" style="width: 118px;"
                                    ng-focus="drawFocus($event)" ng-blur="lostFocus($event)"></select>
                        </td>
                        <td style="width: 120px;">
                            <input id="paymentDate" name="paymentDate" kendo-date-picker ng-model="documentDoc.paymentDate"
                                   style='width: 118px; ' ng-focus="drawFocus($event)" ng-blur="lostFocus($event)" tabindex="9" k-options="datePickersOptions"
                                   ng-mouseup="handlingDrop($event, 'DATE');" ng-change="changeValid('DATE','paymentDate')"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.DECLARATION' | translate}}</label>
                        </td>
                        <td style="width: 120px;">
                            <select id="declarationMonth" name="declarationMonth" ng-model="documentDoc.declarationMonth"
                                    kendo-drop-down-list k-options="declarationMonths" style="width: 118px;" tabindex="10"></select>
                        </td>
                        <td style="width: 120px;">
                            <input id="declarationYear" name="declarationYear" kendo-date-picker
                                   ng-model="documentDoc.declarationYear" k-options="declarationYearOptions"
                                   k-format="'yyyy'" style='width: 118px; ' tabindex="11"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.BANK_ACCOUNT' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <input id="bankAccountNumber" name="bankAccountNumber" ng-model='documentDoc.bankAccountNumber' style='width: 234px; margin-top: 10px;'
                                   ng-focus="drawFocus($event)" ng-blur="lostFocus($event)" tabindex="12"
                                   ng-mouseup="handlingDrop($event, 'BANK_ACCOUNT');" ng-change="changeValid('TEXT','bankAccountNumber')"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.SWIFT' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <input id="swift" name="swift" ng-model='documentDoc.swift' style='width: 234px; margin-top: 10px;' ng-focus="drawFocus($event)"
                                   ng-blur="lostFocus($event)" tabindex="13" ng-mouseup="handlingDrop($event, 'TEXT_ONE_LINE');"
                                   ng-change="changeValid('TEXT','swift')"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.REGISTRATION_PLATE' | translate}}</label>
                        </td>
                        <td style="width: 240px;" colspan="2">
                            <input id="registrationPage" name="registrationPage" ng-model='documentDoc.registrationPage' style='width: 234px; margin-top: 10px;'
                                   ng-blur="lostFocus($event)" ng-focus="drawFocus($event)" ng-change="changeValid('TEXT','registrationPage')"
                                   tabindex="14"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.CATEGORY' | translate}}</label>
                        </td>
                        <td colspan="2">
                            <select id="category" style="float:left; width: 183px;" name="category" k-on-cascade="categoryCascade(kendoEvent)"
                                    ng-model="documentDoc.category" kendo-combo-box="widgetCategory" k-suggest="true"
                                    k-options="categoryOptions" tabindex="15" k-on-data-bound="categoryDataBound(kendoEvent)"
                                    ng-change="changeValid('SELECT','category'); categoryChange();"></select>
                            <kendo-button style="float:left; height: 26px;" sprite-css-class="'editMark'" ng-click="categoryEdit()"
                                          id="categoryEditButton"></kendo-button>
                            <kendo-button style="float:left; height: 26px;" sprite-css-class="'addMark'" ng-click="categoryAdd()"
                                          id="categoryAddButton"></kendo-button>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.VAT_REGISTER' | translate}}</label>
                        </td>
                        <td colspan="2">
                            <select id="vatRegister" name="vatRegister" ng-model="documentDoc.vatRegister"
                                    k-on-data-bound="vatRegisterDataBound(kendoEvent)" kendo-combo-box="widgetVatRegister"
                                    k-options="vatRegisterOptions" ng-readonly="true"
                                    style="width: 238px;"></select>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <table style="margin-left: 37px !important;">
                                <tr>
                                    <td>
                                        <input id="netAmount" name="netAmount" ng-model='documentDoc.netAmount'  tabindex="17" ng-blur="lostFocus($event)"
                                               style='width: {{amountWidth - 4}}px !important; height: 20px;'  required="required" ng-focus="drawFocus($event)"
                                               ng-mouseup="handlingDrop($event, 'NUMBER');" ng-change="changeValid('NUMBER','netAmount')" />
                                               <!--kendo-numeric-text-box k-spinners="false" k-step="0.01" class="k-rtl"/>-->
                                    </td>
                                    <td>
                                        <input id="vatAmount" name="vatAmount" ng-model='documentDoc.vatAmount'  tabindex="18" ng-blur="lostFocus($event)"
                                               style='width: {{amountWidth - 4}}px !important; height: 20px;'  required="required" ng-focus="drawFocus($event)"
                                               ng-mouseup="handlingDrop($event, 'NUMBER');" ng-change="changeValid('NUMBER','vatAmount')" />
                                               <!--kendo-numeric-text-box k-spinners="false" k-step="0.01" class="k-rtl"/>-->
                                    </td>
                                    <td>
                                        <input id="grossAmount" name="grossAmount" ng-model='documentDoc.grossAmount' tabindex="19" ng-blur="lostFocus($event)"
                                               style='width: {{amountWidth - 4}}px !important; height: 20px;'  required="required" ng-focus="drawFocus($event)"
                                               ng-mouseup="handlingDrop($event, 'NUMBER');" ng-change="changeValid('NUMBER','grossAmount')" />
                                               <!--kendo-numeric-text-box k-spinners="false" k-step="0.01" class="k-rtl"/>-->
                                    </td>
                                    <td style="vertical-align: bottom;">
                                        <select id="currency" name="type" ng-model="documentDoc.currency" ng-blur="lostFocus($event)"
                                                kendo-drop-down-list k-options="currencyOptions" tabindex="20"  ng-change="changeValid('NUMBER', 'currency')"
                                                style="width: {{amountWidth }}px !important;" ng-focus="drawFocus($event)"></select>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <kendo-grid id="taxRates" options="taxRateGridOptions" k-data-source="taxRatesDataSource" k-width="300" k-height="150" k-editable="'incell'"
                                        k-selectable="'cell'" style="margin-top: 5px !important;" k-on-click="taxRateClick(kendoEvent)">
                                <ul id="taxRatesGridMenu" kendo-context-menu k-target="'#taxRates'" k-filter="'tr'" k-on-select="taxRateMenuEvent(kendoEvent)">
                                    <li k-on-select="addTaxRatePositionUpper(kendoEvent)" value="0">Dodaj pozycje nad</li>
                                    <li k-on-select="addTaxRatePositionBottom(kendoEvent)" value="1">Dodaj pozycje pod</li>
                                    <li k-on-select="removeTaxRatePosition(kendoEvent)" value="2">Usuń pozycję</li>
                                    <li k-on-select="splitTaxRatePosition(kendoEvent)" value="3">Rozbij</li>
                                </ul>
                            </kendo-grid>

                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.DESCRIPTION' | translate}}</label>
                        </td>
                        <td colspan="2">
                            <select id="description" style="float:left; width: 183px;" name="description"
                                    k-on-data-bound="descriptionDataBound(kendoEvent)"
                                    ng-model="documentDoc.description" kendo-combo-box
                                    k-options="descriptionOptions"></select>
                            <kendo-button style="float:left; height: 26px;" sprite-css-class="'editMark'" ng-click="descriptionEdit()"
                                          id="descriptionEditButton"></kendo-button>
                            <kendo-button style="float:left; height: 26px;" sprite-css-class="'addMark'"  ng-click="descriptionAdd()"
                                          id="descriptionAddButton"></kendo-button>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 120px;">
                            <label style="padding-top: 10px;">{{'ALL.CORRECT.NOTE' | translate}}</label>
                        </td>
                        <td colspan="2">
                            <textarea id="note" name="note" ng-model="documentDoc.note"
                                      style="width: 234px !important; max-width: 234px !important;"></textarea>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="stage" style="background-color: rgba(101, 100, 103, 0.92); overflow: hidden;">
            </div>
        </div>
        <div>
            <kendo-grid id="invoicePositions" options="invoicePositionsGridOptions" k-editable="'incell'" k-height="130"
                        k-selectable="'cell'" ></kendo-grid>
            <ul id="invoicePositionsGridMenu"></ul>
        </div>
    </div>
    <div id="cloud" style="display: none; min-width: 70px; min-height: 34px;z-index: 99999; position: absolute !important; left: 0px; top: 0px; background-color: white; border-width: 1px; border-color: #000000; border-style: solid;">
        <div id="cloudHeader" style="height: 14px; background-color: #ff5b2e; border-top-width: 0px; border-left-width: 0px; border-right-width: 0px; border-bottom-width: 1px; border-color: #000000; border-style: solid;"></div>
        <div id="cloudContent" style="margin: 3px;"></div>
    </div>
    <contractor-window-form mode="contractorModeWindow"></contractor-window-form>
    <description-window-form mode="descriptionModeWindow"></description-window-form>
    <category-window-form mode="categoryModeWindow" company="companyToCategory" companyOptions="customerOptions" companyEdit="false"></category-window-form>
    <mail-window-form diasbledMail="false" to=""></mail-window-form>
    <question-yes-no
            window-identifier="removeDocumentQuestionWindow"
            title-window="{{'SPECIALIZED.CORRECTION.REMOVE.TITLE' | translate }}"
            title="'{{'SPECIALIZED.CORRECTION.REMOVE.TITLE_MESSAGE' | translate }}'"
            message="{{'SPECIALIZED.CORRECTION.REMOVE.MESSAGE' | translate }}"
            yes-event="corr:remove::question::yes"
            no-event="corr:remove::question::no"
            icon="images/nimages/bin.png"
            icon-height="70px"
            icon-width="70px">
    </question-yes-no>
</div>

After open window, I'm updating data in controller.
Every widget on this view/window has ng-model attribute, but when I update binded data in ng-model only widget with no cascade option works fine, and set data correctly.
How can I set data correctly in no-model or widget ?

[Georgi Krustev]

Hello Janusz,

I would suggest you use k-ng-model directive as it is designed to use widget API and thus to ensure its correct behavior. I would suggest you check this help topic for more details.

If the problem still persists, I will need a repro (a Dojo demo for instance) that will help to review the problem locally and advice you further.

Regards,
Georgi Krustev
Telerik

 

 

[Janusz]

Hi,

WellIi don't have another example (well I cant find json rest ws) but I noticed that when I show this form on popup window first time, there are no values seted in combobox. But when i opend this same window second, evrythink works great (there are values in CB).
I think that is e problem that ng-model on first time seted value of CB bere data came to CB, ant that is a problem ...

[Georgi Krustev]

Hello Janusz,

I would suggest you use the "k-ng-model" directive as it works directly with the widget's API.
If the problem still persists, then a repro demo is needed in order to continue with our investigation. I am afraid that we cannot do much without a runnable test demo.

Regards,
Georgi Krustev
Telerik