MVVM binding to controller method

2 posts, 0 answers
  1. Jerry
    Jerry avatar
    70 posts
    Member since:
    Jan 2011

    Posted 19 Jan 2014 Link to this post


    I'm trying out MVVM binding on HTML for the first time and have come across a scenario which i cant find any examples of.

    What i'm trying to do is bind a lot of controls on my view to the viewmodel so (like silverlight) if a control changes value, i can check the viewmodel has changed and raise a haschanges or a similar event. - and i think this is possible using the MVVM model.

    I currently had the drop down control bind to the controller like so:

                    .Placeholder("Select Business Unit...")
                    .DataSource(src =>
                        src.Read(read =>
                            read.Action("GetBusinessUnits", "Home", new { CompanyId = ViewBag.CompanyId });
                    .HtmlAttributes(new { style = "width: 250px" })
                    .Events(e => e.Change("BusinessUnitChanged"))

    How would i be able to call this method using the MVVM way?

    Currently i have:

    <select data-role="combobox" data-text-field="Name" data-value-field="BusinessUnitId" data-bind="source: buSource, value: BusinessUnitComboBox"></select>

    as the html and after reading a guide, i have the following as my script:

    var viewModel = kendo.observable({
                buSource: new{
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                            return options;
                    batch: true,
                BusinessUnitComboBox: null,
                hasChanges: false,
                save: function () {
                    this.set("hasChanges", false);

    Would someone be able to guide me or point me in the right direction on  how to bind to the controller as i've done using the kendo control itself and also how to use the parameterMap?

    Thanks in advance.
  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 22 Jan 2014 Link to this post

    Hello Jerry,

    The datasource configuration remains the same as in all the demos that we shared, the difference is that its declaration is inside the viewmodel.

    We also have a demo that demonstrates how to initialize the DropDownList via MVVM. The demos is available here:

    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top