Issue with ComboBox MVVM

[Vladimir]

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.

[Vladimir]

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...

 

[Vladimir]

sorted it!)

it was just a mistake into declaration

have to use the following approach:

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

 

 

[Dimitar]

Hello Vladimir,

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

Regards,
Dimitar
Progress Telerik