Managing Data Without a Grid

Never mind.  I changed the way the dropdown list is created and it's working now.

Louis

I have 4DDLs and when I make the last selection, my fields fill in, I didn't think they would, but they do. (I created a fillForm function, but all it does right now is log my primary key to the console.)

I'm thinking maybe having the popup complicates things.

I'm interested in what you had to do to create a modal popup window.

Greg,

I'm pretty sure the way I'm doing this may not be the recommended way, but it works.  Hopefully this is everything (I'm skipping a bunch of custom logic not related to the popup).

I put the following in my topSection.html:

<form id="popupOpenScenario" kendo-window="popupOpenScenario" k-visible="false" k-modal="true">
    <div class="k-popup-edit-form k-window-content k-content ng-scope" data-role="window" tabindex="0" style="width: -20px; height:100%">
        <div class="k-edit-form-container" style="width:100%; height:100%; overflow:hidden">
            <div id="ddScenario">
                <drop-down-list data-id="ddScenario" data-widget="vm.$components.ddScenario.widget" data-title="" data-model="vm.$viewModels.dsScenarioModel" data-options="vm.$components.ddScenario.options" data-events="vm.$components.ddScenario.events" data-validation="vm.$components.ddScenario.validation">
                </drop-down-list>
            </div>
            <div class="k-edit-buttons k-state-default" style="height: 42px">
                <a role="button" class="k-button k-button-icontext k-primary" ng-click='this.okOpenScenario()'><span class="k-icon k-i-check"></span>OK</a>
            </div>
        </div>
    </div>
</form>

The following is in my constructor (controller.public.js):

    this.$components['ddScenario'] = {
        widget: null,
        options: {
            dataSource: this.$ds['dsScenario'],
            dataTextField: "name",
            dataValueField: "sid",
            optionLabel: "",
            valuePrimitive: false
        },
        events: { onChange: (e) => { }, onSelect: (e) => { } },
        validation: { required: false }
    };

    # Can't figure another way to hook things to my custom html objects
    let topScope = scope;
    do {
        if (topScope.$parent !== null) {
            topScope = topScope.$parent;
        }
    } while(topScope.$parent !== null);

    topScope.okOpenScenario = () => {
        this.setCurrentScenario();
    }

Additional methods:

    // Call this method from a button/link to open popup dialog
    openPopupOpenScenario() {
        let winOpenScenario = angular.element("#popupOpenScenario").data("kendoWindow");
        this.winOpenScenarioOptions = {
               width: 600,
               visible: false,
               resizable: false,
               title: "Open Scenario",
               modal: true,
               actions: ["Close"]
        };
        winOpenScenario.setOptions(this.winOpenScenarioOptions);
        winOpenScenario.center();
        winOpenScenario.open();
    }  // openPopupOpenScenario

    setCurrentScenario(e) {
        // Close/hide popup window
        let popupOpenScenario = angular.element("#popupOpenScenario").data("kendoWindow");
        popupOpenScenario.close();
        // Remaining logic to run when Ok button clicked
    }

If anyone knows of a better way to expose/link methods/data to custom html other than traversing up to the top level scope, please let me know as I really hate doing this but haven't figured out a better way yet.

Louis

rootScope is probably what you're looking for.  docs.angularjs.org/.../$rootScope