Managing Data Without a Grid - Forum - Kendo UI Builder - Progress Community

Managing Data Without a Grid

 Forum

Managing Data Without a Grid

This question is answered

Hello,

I have a blank view with a data source on it.  I created a popup/modal window with a dropdown list attached to the data source.  I also have a text box field and set it (via KUIB) to the model for the data source, and a field within the model.  I was thinking that when I select a record using the dropdown list, the text box field would automatically populate, but it doesn't.

What do I need to do to select a record in the data source and have the model get set?

Louis

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

    Louis

All Replies
  • 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