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

[Carlos]

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>

[Tina Stancheva]

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

 

 

[Carlos]

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>

 

 

 

 

 

[Tina Stancheva]

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