Function for data-after-show with Model

4 posts, 0 answers
  1. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 29 Sep 2014 Link to this post

    Hi, how do I set the function for a View's data-after-show if I use a model?

    I have a model as below:
    var foodMS = kendo.observable({
        description: "Description",
        isDescriptionShown: false,
        showDescription: function (e) {
            // show the span by setting isDescriptionShown to true
            this.set("isDescriptionShown", true);
        },
        showMessage: function (e) {
            alert(this.get("isDescriptionShown"));
        }
         
    });

    A view with data-model set to foodMS and data-after-show="showMessage".  However the showMessage does not fire when the view come into place.
    The span id="showMessage" can fire the function if clicked.

    <div data-role="view" data-title="Add Nice Food" data-layout="main" id="foodMS_add" data-model="foodMS" data-after-show="showMessage">
     
      <span id="showsomething" data-bind="events: { click: showMessage }">
                            <button data-role="button">Show</button>
                        </span>
     
    </div>

    Is this the correct way to set the function for the data-after-show?

    Thanks.

  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 30 Sep 2014 Link to this post

    Hello,

    the correct syntax of that would be something like this:

    data-bind="events: { afterShow: showMessage }"


    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. XiMnet Malaysia
    XiMnet Malaysia avatar
    46 posts
    Member since:
    Jan 2006

    Posted 22 Oct 2014 in reply to Petyo Link to this post

    Thanks, Petyo.

    In what situation should we be using data-after-show="showMessage" compared to data-bind="events: { afterShow: showMessage }"
     ?

  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 24 Oct 2014 Link to this post

    Hi,

    the first syntax is a declarative event assigning, while the second one performs MVVM binding to the given model. You may refer to the following documentation article (and the linked help topics) for more details. 

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready