Issue with ComboBox MVVM

4 posts, 0 answers
  1. Vladimir
    Vladimir avatar
    8 posts
    Member since:
    Feb 2017

    Posted 16 Mar Link to this post

    Hi all!

    I've an unexpected behavior with ComboBox in case MVVM usage

    The issue exists for the case when I have preselected data.SelectedFolder value - see below

    shtml code (template for 'Edit' popup window, I've deleted extra text fields from the template):

    <script id="editMessageDetailsTemplate" type="text/x-kendo-template">
        <form id="editMessageDetailsForm">
            <div class="wrapperClass">
     
                <div class="col-md-4" style="padding-top:15px;">
                    <label class="control-label" for="FolderID">@Global.Folder</label>
                </div>
                <div class="col-md-11">
                    <select id="FolderID" name="FolderID"
                            data-val-required="@Global.FieldFolderMustBeSet"
                            data-val-number="@Global.FolderDoesNotExist"
                            data-bind="value: data.SelectedFolder"
                            placeholder="@Global.PleaseSelect"
                            data-val="true"
                            data-value-update="keyup"></select>
                    <span class="k-invalid-msg" data-for="FolderID" style="width: 100%;"></span>
                </div>
            </div>
            <div class="dialogButtons">
                <button data-bind="click: onSave, disabled: data.isNotValid"
                        id="buttonOk" type="submit" data-role="button" class="k-button k-button-icontext" role="button" aria-disabled="false" tabindex="0">
                    <span class="k-icon k-i-save"></span>
                    @Global.Save
                </button>
                <button data-bind="click: onCancel" id="buttonCancel" type="button" data-role="button" class="k-button" role="button" aria-disabled="false" tabindex="0">@Global.Cancel</button>
            </div>
        </form>
    </script>

     

    js code - popup dialog

    var $editMessageDetailsDiv = $("<div>", { "id": self.uid });
    $("body").append($editMessageDetailsDiv);
     
    var dialog = $("#" + self.uid).kendoWindow(
    {
        "close": destroyDialog,
        "modal": true,
        "iframe": true,
        "draggable": true,
        "scrollable": true,
        "pinned": false,
        "title": "Edit",
        "appendTo": "body",
        "resizable": true,
        "width": 450,
        "height": 350,
        "minWidth": 450,
        "minHeight": 350,
        "actions": ["Maximize", "Close"],
        "content": {
            template: $("#" + self.contentTemplate).html()
        }
    }).data("kendoWindow");
     
    dialog.center();
    dialog.open();
     
    var formViewModel = new EditMessageDetailsFormViewModel({
        FolderID: 123, // !!! existing folder ID from data source !!!
         
        submitCallback: function (model) {
            //
        },
        submitUpdate: function (response) {
            //
        },
        submitError: function (model) {
            //
        }
    });
     
    kendo.bind($editMessageDetailsDiv, formViewModel);

     

    js code - model

     

    function EditMessageDetailsFormViewModel(options) {
        var self = this;
     
        self.data = kendo.observable({
            SelectedFolder: options.FolderID
        });
     
        self.onCancel = function (event) {
            options.closeCallback();
            kendo.destroy();
        };
     
        self.init = function () {
            self._initKendo();
     
            var allFoldersPromise = self._getAllFoldersPromise();
     
            allFoldersPromise.done(function (folders) {
                self.FolderID.data(folders);
            });
        };
     
        self._initKendo = function () {
            kendo.inputTrimEnabled();
            var validatable = self._getValidator();
     
            validatable.validate();
            validatable.hideMessages();
     
            $("#FolderID").kendoComboBox({
                dataTextField: "FolderName",
                dataValueField: "FolderID",
                filter: "Contains"
            });
     
            self.FolderID = self._getComboBox('FolderID').dataSource;
        };
     
        self.onSave = function (event) {
            event.preventDefault();
     
            if (self.validate()) {
                var params = {
                    FolderID: self.data.get('SelectedFolder'),
                };
     
                // save func
            }
        };
     
        self.validate = function () {
            return self._getValidator().validate();
        }
     
        self.resetValidator = function () {
            var validator = self._getValidator();
            validator.hideMessages();
        }
     
        self._getValidator = function () {
            return $("#editMessageDetailsForm").kendoValidator().data("kendoValidator");
        }
     
        self._getComboBox = function (id) {
            return $("#" + id).data("kendoComboBox");
        }
     
        self._getAllFoldersPromise = function () {
            var promise = $.get(UrlUtils.URL("Messages", "GetFolders")); // back end func to get folders
     
            promise.fail(function () {
                showError("err!");
            });
     
            return promise;
        }
     
        self.init();
    }

     

    When popup window opened -> Folder preselected -> this is expected, ok

    But a user can't clear this selection using embedded 'clear' cross into ComboBox area.

    Any thoughts or suggestions would be useful.

    Thanks.

  2. Vladimir
    Vladimir avatar
    8 posts
    Member since:
    Feb 2017

    Posted 19 Mar Link to this post

    Unbelievable but filter: "Contains" property is the reason in this case

    when I remove this property from combo initialisation -> everything is working as expected

    but I need this filter...

     

  3. Vladimir
    Vladimir avatar
    8 posts
    Member since:
    Feb 2017

    Posted 21 Mar Link to this post

    sorted it!)

    it was just a mistake into declaration

    have to use the following approach:

    <input data-role="combobox"
     ... ... ...
    />

     

     

  4. Dimitar
    Admin
    Dimitar avatar
    327 posts

    Posted 21 Mar Link to this post

    Hello Vladimir,

    I am glad to hear that you have resolved the issue. Thank you for sharing the solution.

    Regards,
    Dimitar
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top