Cascade ComboBoxes with AngularJS model - not working ng-model

4 posts, 0 answers
  1. Janusz
    Janusz avatar
    18 posts
    Member since:
    Jan 2015

    Posted 28 Jan 2015 Link to this post

    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 ?
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 30 Jan 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Janusz
    Janusz avatar
    18 posts
    Member since:
    Jan 2015

    Posted 12 Feb 2015 in reply to Georgi Krustev Link to this post

    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 ...
  5. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 16 Feb 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready