This is a migrated thread and some comments may be shown as answers.

MVVM binding to controller method

1 Answer 66 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 20 Jan 2014, 04:06 AM
Hi,

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:

@(Html.Kendo().ComboBox()
                .Name("BusinessUnitComboBox")
                .Filter("contains")
                .Placeholder("Select Business Unit...")
                .DataSource(src =>
                {
                    src.Read(read =>
                    {
                        read.Action("GetBusinessUnits", "Home", new { CompanyId = ViewBag.CompanyId });
                    });
                })
                .DataTextField("Name")
                .DataValueField("BusinessUnitId")
                .Suggest(true)
                .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 kendo.data.DataSource({
                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.productsSource.sync();
                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.

1 Answer, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 22 Jan 2014, 08:16 AM
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:

http://demos.kendoui.com/web/dropdownlist/mvvm.html

Kind Regards,
Petur Subev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Jerry
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Share this question
or