How to deal with conditional js statement in a kendo UI template generated from a show event ?

3 posts, 1 answers
  1. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 12 Feb 2014 Link to this post


    I have an asynchrone function that generate a scrollView depending on the data I'm pulling from the server, I want to be able to display different buttons in the Scroll View.

    So I am using an if statement in the scrollView template like so:

    <div data-role="view" data-layout="overview-layout" data-show="showEvent" data-title="Meet My Friends" id="event">
                <div data-role="content" class="content">

                    <div id="eventContent"></div>

                        <div id="friendsToInvite" data-role="scrollview" data-source="friendsToInvite" data-template="friendsToInvite-template" data-enable-pager="false"></div>

    <script id="friendsToInvite-template" type="text/x-kendo-template">
                <p class="friendName">#= name #</p>
                <div style="width: auto; height: 180px; background: url(' fbId #/picture?type=large')  no-repeat center;"></div>

                #if( invited ) {#
                    <p class="friendsButtons"><button class="button2 btn-green" onclick="uninviteFriend(this, #= fbId #, #= eventId #)">Already Invited : Un-invite</button></p>
                #} else {#
                    <p class="friendsButtons"><button class="button2 btn-orange" onclick="inviteFriend(this, #= fbId #, #= eventId #)">Invite</button><button class="button2 btn-grey">Dont show me again</button></p>

    And in my show function at some point I have

    $.when( Event.getFriendsList( ) ).done( function( friendsList )
            if ( friendsList.length > 0 )
                var friendsToInvite = [];

                for ( var i = 0; i < friendsList.length; i++ )
                    friendsToInvite.push( { name: friendsList[i]["name"], fbId: friendsList[i]["fbid"], invited: friendsList[i]["invited"], eventId: } );
                console.log( friendsToInvite );
                $( "#friendsToInvite" ).data( "kendoMobileScrollView" ).setDataSource( friendsToInvite );
                console.log("Got to be creative here ...")

    My problem is that I have a js error in my console saying that "Uncaught ReferenceError: invited is not defined " This is coming from the if statement.
    How can I fix this ? In the doc, it seems that when having if statements in your kendo ui, you need to generate it at the init of the page.


  2. Yohann
    Yohann avatar
    54 posts
    Member since:
    Jan 2014

    Posted 12 Feb 2014 in reply to Yohann Link to this post

    If I try to declare a global invite variable (which I would like to avoid), then what's in the if statement is never displayed, wether invited is true or false..
  3. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 14 Feb 2014 Link to this post

    Hello Yohann,

    Generally speaking the global variable should not be needed.
    My recommendation is to set the autoBind option of the widget to false. In this way the data should not be bound at the init event and respectively the template will not be executed. 

    Please test the suggested solution and let me know if it fits in your requirements.

    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