Getting a DropDownList Object

Posted by jts-law on 02-Apr-2018 16:53

I have a dropdown list setup in the topSection.html and constructor of my blank page.  The dropdown is working fine, but now I want to be able to call select() on it to set the currently selected record via code.

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>

Constructor code:

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

I've tried to use angular.element("#ddScenario").data("kendoDropDownList") and that doesn't work.  I also tried this with the drop-down-list element and a few other variations and nothing will return a valid object.  I also tried using this.$components.ddScenario.widget.select(0) which didn't work either.  How do get this object?

Louis

Posted by jts-law on 05-Apr-2018 17:32

In case anybody else uses something like this, I figured out how to get at the DropDownList object.

angular.element("select[id='ddScenario']").data("kendoDropDownList")

The directive for the drop-down-list generates a <select...> with the same id.

Louis

Posted by jts-law on 05-Apr-2018 17:36

In case anybody else uses this type of solution, I figured out how to get the DropDownList object.  The directive for the drop-down-list tag creates a <select...> with the same id as the drop-down-list element.  For this reason you have to use the following:

angular.element("select[id='ddScenario']").data("kendoDropDownList")

Louis

All Replies

Posted by jts-law on 05-Apr-2018 17:32

In case anybody else uses something like this, I figured out how to get at the DropDownList object.

angular.element("select[id='ddScenario']").data("kendoDropDownList")

The directive for the drop-down-list generates a <select...> with the same id.

Louis

Posted by jts-law on 05-Apr-2018 17:36

In case anybody else uses this type of solution, I figured out how to get the DropDownList object.  The directive for the drop-down-list tag creates a <select...> with the same id as the drop-down-list element.  For this reason you have to use the following:

angular.element("select[id='ddScenario']").data("kendoDropDownList")

Louis

Posted by GregHiggins on 05-Apr-2018 18:04

<rant>...</rant><docShaming>...</docShaming>Contact me offline, I can be reached at ABLsaurusRex@gmail.com

This thread is closed