Binding to computed property

[Sam]

Hi,

i have something like this

var data = kendo.data.DataSource.create({ data: result.Products })
var viewModel = kendo.observable({dataSource: data});             
kendo.bind($("#listview-templates"), viewModel, kendo.mobile.ui);

where result is the result of a service call, which has a list of Products , if i want to bind a property in my list view template , to say Price * Qty which are two properties in the product object , what is the best way to do it ? Whenever the qty or price changes the total should update

Thanks
.

[Alexander Valchev]

Hello Sam,

Kendo templates allow JavaScript execution. To display the total price you can use the following syntax:

template: '<span class="total">#= Price*Qty #</span>'

I hope this will help.

Kind regards,
Alexander Valchev
the Telerik team

[Sam]

Thanks, i tried that it works the first time, but like i mentioned in my previous post, it needs to update when quantity or price changes, which is not happening

[Alexander Valchev]

Hello Sam,

I am not sure how do you change the Qty or Price fields. The right approach is via the set method - in this way the framework will track the change and re-render the template automatically. Using the "=" operator will not work.

Could you please share your View code as well as the code which is used to edit fields so I can get a better idea of your exact scenario? Thank you in advance for the cooperation.

Regards,
Alexander Valchev
the Telerik team

[Sam]

HI,

I have a datasource, which comes from a service call ( result.OrderDetail is the json collection i get from my service)

var data = kendo.data.DataSource.create({ data: result.OrderDetail, autoSync: true })
                viewModel = kendo.observable({
                    dataSource: data, headerTemplate: "<h2>${value}</h2>"
                });
                kendo.bind($("#listview-templates"), viewModel, kendo.mobile.ui);

and i have this list view which is bound to the datasaource property of the view model

<ul id="custom-listview" data-bind="source:dataSource" data-role="listview"
            data-style="inset" data-template="customListViewTemplate">
        </ul>


and as template for the list view

<script type="text/x-kendo-template" id="customListViewTemplate">
     <div class="style2">
     ${ProductName}
    </div>

     <table style="width:100%;">
          
           <tr>
               <td>
                   <input data-bind="value:Quantity" min="0" />
               </td>
           </tr>
           <tr>
               <td class="style1" data-bind="visible:IsPriceVisible">
                   Price: </td>
               <td class="td-value-style" data-bind="visible:IsPriceVisible">${kendo.toString(Price, "c")}</td>
           </tr>
           <tr>
                <td class="style1" data-bind="visible:IsTotalVisible">
                   Total:</td>
               <td class="td-value-style" data-bind="visible:IsTotalVisible" >#=Price*Quantity#</td>
           </tr>
       </table>
    </script>

there is an input where u can enter the quantity, so as and when the quantity changes the total shud update to price*quantity

[Alexander Valchev]

Hello Sam,

Thank you for sharing the code snippets.

I noticed the following issues:

• field types are not defined in the DataSource's model. As a result when the user changes the Quantity through the textbox the corresponding field receives a string value. To avoid this it is required to define at least the type of the bound field - in this way the DataSource will automatically parse the string into number.
  

  schema: {
      model: {
          fields: {
              Quantity: { type: "number" }
          }
      }
  },

• Mobile View should be bound via data-model attribute.
• Instead of dataSource.create please use new kendo.data.DataSource. Create method of the DataSource is intended for internal usage.

I hope this will help. For convenience I prepared a jsBin demo: http://jsbin.com/ekoquv/2/edit

Kind regards,
Alexander Valchev
the Telerik team

[Sam]

that worked. Tnx