Binding buttongroup select event to a viewModel function

2 posts, 0 answers
  1. Robert
    Robert avatar
    39 posts
    Member since:
    Oct 2012

    Posted 26 Jun 2013 Link to this post

    I'm having trouble binding the select event of a buttongroup to a method of the viewModel.

    Typically, this would look something like this:

            <ul class="location-type-buttons" data-role="buttongroup" data-index="0" data-bind="...">
                <li>Option 1</li>
                <li>Option 2</li>
                <li>Option 3</li>
                <li>Option 4</li>

        <div style="position: relative;-webkit-box-flex: 1;border: 1px solid black">
            <div data-role="view" style="position: absolute;">Option 1 Title</div>
            <div data-role="view" style="position: absolute;">Option 2 Title</div>
            <div data-role="view" style="position: absolute;">Option 3 Title</div>
            <div data-role="view" style="position: absolute;">Option 4 Title</div>

    When I use data-bind="click: doSelect", the views appear correctly but nothing happens (the buttongroup has a select event instead of a click event).

    When I use data-bind:"select: doSelect", the titles of the four views appear simultaneously, and the event handler is still not called.

    What am I missing here?  Thanks!
  2. Alexander Valchev
    Alexander Valchev avatar
    2890 posts

    Posted 28 Jun 2013 Link to this post

    Hi Robert,

    I am afraid that your scenario is a bit unclear. If I understood correctly you would like to navigate between Views through a button group. If that is correct, please check this sample as it demonstrates one possible implementation of such scenario:

    Please note that the right binding syntax is: data-bind="events: { select: onSelect }"

    I hope the information will help.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top