Jquery-Chosen-Knockout in a Dialog or Window Not Working?

If you are loading a Chosen element in a pop-up dialog box or window, you may find that the "multiple" types or "multiselect" type of element does NOT display the selectedOptions that you specified on the data-bind. You need to trigger an update by passing a reference of window to the open function.

This was the template that was loaded into the dialog window (located in a .cshtml file):

pop-uptext

<script type="text/html" id="junk-template">    
    <div>
        <!--set tabindex of dropdown to prevent from auto opening when editing-->
        <select id="myItems" tabindex="-1" data-placeholder=" " data-bind="chosen: MyOptions, optionsText: 'Text', optionsValue: 'Value', selectedOptions: MySelectedOptions" multiple="multiple"></select>        
    </div>
</script>

<script type="text/html" id="junk-template">    
    <div>
        <!--set tabindex of dropdown to prevent from auto opening when editing-->
        <select id="myItems" tabindex="-1" data-placeholder=" " data-bind="chosen: MyOptions, optionsText: 'Text', optionsValue: 'Value', selectedOptions: MySelectedOptions" multiple="multiple"></select>        
    </div>
</script>

This is the code in the Javascript file to load, data-bind and open the window. NOTICE 2 things, you must use the z-index and pass the window by reference to the open function. In order to resolve issues with chosen in a popup window the z-index must be set.

pop-uptext

function _openMyWindow(myOptions) {
        var selectedOptions = _getOptions();
        $window = $("<div/>");
        $window.append($('#junk-template').html());
         if (!myVM) {
            myVM = {
            
                MyOptions: ko.observableArray(myOptions),
                MySelectedOptions: ko.observableArray(selectedOptions != undefined ? selectedOptions : [])
            }
        }
        
        ko.applyBindings(myVM, $window[0]);
        
        $window.Window({
            width: '450px', height: 'auto', modal: true, zIndex: 998, maximizable: false, open: _openWindow($window), title: "Junk Title"
        });
    }

function _openMyWindow(myOptions) {
        var selectedOptions = _getOptions();

        $window = $("<div/>");
        $window.append($('#junk-template').html());

         if (!myVM) {
            myVM = {
            
                MyOptions: ko.observableArray(myOptions),
                MySelectedOptions: ko.observableArray(selectedOptions != undefined ? selectedOptions : [])
            }
        }
        
        ko.applyBindings(myVM, $window[0]);
        
        $window.Window({
            width: '450px', height: 'auto', modal: true, zIndex: 998, maximizable: false, open: _openWindow($window), title: "Junk Title"
        });
    }

Now, pay attention here, see I am using the window reference to trigger the chosen element update!

pop-uptext

function _openWindow(container) {
               
        var element = $(container).find('#myItems');
        
        if (element != null) {
            element.trigger("chosen:updated");
        }
}    

function _openWindow(container) {
               
        var element = $(container).find('#myItems');
        

        if (element != null) {
            element.trigger("chosen:updated");
        }

}    

Hope you could follow that and I hope it helps!