Bootstrap Switch with custom MVVM binding

2 posts, 0 answers
  1. Erik
    Erik avatar
    50 posts
    Member since:
    Jan 2011

    Posted 11 Jan Link to this post

    I'm trying to include a Bootstrap-Switch control (or anything similar).  I've got a regular ASP.NET MVC site, with a TypeScript MVVM view model.

     

    I've included the bootstrap switch from here:

    https://github.com/nostalgiaz/bootstrap-switch

    If you know of an easier way to accomplish the same thing, I'm definitely open to that.

    <input type="checkbox" data-bind="bootstrapSwitch: billingSettings.capsIncludeFees, events: {change: cpChanged}"/>

    Here's my markup in the view:

    And then I have the following custom binding:

    kendo.data.binders.bootstrapSwitch = kendo.data.Binder.extend({
        init: function (element, bindings, options) {
            var x = this;
            kendo.data.Binder.fn.init.call(this, element, bindings, options);
            var that = this;
            $(that.element).bootstrapSwitch();
            $(that.element).on('switchChange.bootstrapSwitch',
                function(event, state) {
                    that.change();
                });
        },
        refresh: function() {
            var that = this;
            var value = that.bindings["bootstrapSwitch"].get();
            $(that.element).bootstrapSwitch("state", value);
        },
        change: function () {
            if (this.bindings.events && this.bindings.events.change && this.bindings.events.change.parents) {
                var changeBinding = this.bindings.events.change;
                for (var i = 0; i < changeBinding.parents.length; i++) {
                    var parentObservable = changeBinding.parents[i];
                    var method = changeBinding.path;               
                    //parentObservable[method]();
                }
            }
     
            var value = this.element.value === "on";
            this.bindings["bootstrapSwitch"].set(value);                  
        }
    });

    But the custom binding doesn't actually change the property on my viewModel itself -- or fire the change event.  I hit the breakpoints in my custom binding and can see that the "parents" within the bindings have the stuff I need, but not the "this" object itself. 

    If you have a better way to do what I'm after, let me know.  Otherwise, can you help me figure out what is wrong with my custom binding?

    Thanks in advance -

    Erik

    ps I tried setting up a snippet in the dojo for this, but couldn't figure out how to properly include bootstrap and the bootstrap switch.  I can create a sample project on github if it becomes required.

     

     

     

     

     

     

     

     

     

     

     

  2. Stefan
    Admin
    Stefan avatar
    1147 posts

    Posted 13 Jan Link to this post

    Hello Erik,

    After inspecting the example I noticed that if the same logic is used on a regular input, not the Bootstrap Switch the value in the model should be updated:

    http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom#two-way-custom-bindings

    As the application is using a third-party tool and a custom binding, the issue may be coming from the Switch.

    If you need additional assistance with the custom implementation, I can suggest our Progress Professional Services team. They can provide assistance and expert solutions for different custom implementations:

    https://www.progress.com/services/outsourcing/feature-customization

    Regards,
    Stefan
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 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