x-kendo-template need data-source or data-bind to render?

4 posts, 0 answers
  1. Carlos
    Carlos avatar
    69 posts
    Member since:
    Jun 2011

    Posted 26 Jun 2015 Link to this post

    Does the x-kendo-template need a data-source or data-bind to render in the views?

    I have a view in which I am just doing a simple layout in the <script type="text/x-kendo-template"> and then eventually dynamic content will go in there later.
    The issue is that the content in the x-kendo-template is not showing in my <div> when I call the template. Does the div that calls the template need a data-source or data binding tied to it?

     

    My current code set up is like so.

     myview.html

         <div data-role="view" data-title="My Membership - Details" data-layout="internal" data-model="app.MyMembershipDetail" id="MemberInternalContent">
        <!--Details layout per item - Eventually Dynamically created-->
       <div data-template="memberDetailTemplate">
        
       </div>
    </div>
     
     
    <!--Kendo Template Script goes here in order to dynamically fill in the elements above.-->
    <script type="text/x-kendo-template" id="memberDetailTemplate">
         <!--Optional images-->
        <div id="myMembershipDetailImage">
            <!--Placeholer image for Member Detail page if any.-->
            <img src="Images/TestDetailImage.jpg" />     
        </div>
        <div id="myMembershipDetailInfo">
                <p>My Membership detail information filled out here depending on option selected</p>  
        </div>
    </script>

  2. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 01 Jul 2015 Link to this post

    Hello Carlos,

    You need to provide data to the template. You can check the examples in this tutorial. Let me know if that helps.

    Regards,
    Tina Stancheva
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
  3. Carlos
    Carlos avatar
    69 posts
    Member since:
    Jun 2011

    Posted 06 Jul 2015 in reply to Tina Stancheva Link to this post

    Hi Tina,

     We have a x-kendo-template set up in which we are passing data to.  We want to use a jQuery Barcode Plugin that requires data from the x-kento-template.  I can not figure out how to pass data to our jQuery plugin and then pass it back to the Kendo Template to render the Barcode.  We are using a jQuery Barcode plugin because our plan does not allow us to use the kendoBarcode generator.

     I have looked at the documentation for the Kendo template building but our instance does not really match what is provided in the documentation.

     We created a Model in our home.js in which we send in a number and generate in the x-kendo-template as #: MemId #.  I need to get that number, pass it into our jQuery Barcode plugin and then let the Kendo template render the barcode. How would I do this.

     

    The current code I have is below.

    Home.html

    <div data-role="view" data-layout="main" data-model="app.MemberInfo" data-title="Home" >
        <div id="MemberCardHeader">
            <div data-template="memberTemplate" data-bind="source: MyMemberInfo">
                 
                <!--Member card x-kendo-template id="memberTemplate" renders here-->
                 
            </div>
        </div>
         
     
    <script type="text/x-kendo-template" id="memberTemplate">
        <div id="memberCard">
            <!--<div id="Barcode" data-role="barcode" data-type="code128" data-value="9#:MemId #"></div>-->
             <div id="Barcode2">#: MemId #</div>
             <img src="Images/ASTCLogo.png"/>
        </div>
    </script>
     <script type="text/javascript">
          <!--THIS NEEDS TO GET "MemId" from our Model THEN pass it to the JQUERY BARCODE AND PASS IT BACK TO THE KENDO TEMPLATE TO RENDER THE BARCODE. HOW DO WE DO THIS???????????-->
          $("Barcode2").barcode("DynamicNumberFromModel", "code128")
        </script>

     

     

     

     

     

  4. Tina Stancheva
    Admin
    Tina Stancheva avatar
    3298 posts

    Posted 09 Jul 2015 Link to this post

    Hi Carlos,

    You would need an event that fires when the view loads. The Kendo UI View exposes 2 events which can work in this case:
    • init() - Fires once after the mobile View and its child widgets are initialized.
    • show() - Fires every time when the mobile View becomes visible.
    In this case, perhaps the init() event is the better choice as it will fire right after the content of the view loads, which means that the Barcode2 element is generated. Through the event data you can get the model behind the view and therefore you can access the MemId value:
    <div data-role="view" data-layout="main" data-model="APP.models" data-title="Home" data-init="initView">
        <div id="MemberCardHeader">
            <div data-template="memberTemplate" data-bind="source: MyMemberInfo">
                <!--Member card x-kendo-template id="memberTemplate" renders here-->
            </div>
        </div>
    </div>
     
    <script type="text/x-kendo-template" id="memberTemplate">
        <div id="memberCard">
            <span>#: MemId #</span>
            <div id="Barcode2"></div>
            <img src="Images/GreenIcon.png" />
        </div>
    </script>
    <script type="text/javascript">
        function initView(e) {
            var memID = e.view.model.MyMemberInfo.MemId;
            $("#Barcode2").barcode(memID, "code128")
        }
     
    </script>
    window.APP = {
        models: {
              MyMemberInfo: { MemId: "1234567890128" }
        }
    };

    Let me know if that helps.

    Regards,
    Tina Stancheva
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top