How to Pass the whole ${ data } object in a Template to a javascript function

[mo2011ti]

hi

I have listView that bind to service that returns array of Product
Product Is { ProductId : 1 , ProductName : 'laptop' , Size : 1 , Quantity : 1000 }

i'm using the template like this:

<script type="text/x-kendo-tmpl" id="MyTemplate">

      <div class="ProdNameClass">

             ${ProductName}

      </div>

       <div class="ProdClass"  onclick="EditProduct(${ProductId});">

              click  to run  EditProduct function

                   //  this works

       </div>

      <div class="ProdClass" onclick="EditProductDataObject(${data});">

               click to run EditProductDataObject function

               // this is not working, i'm getting nothing when i'm click

       </div>

 < /script>

function EditProduct(id){

    // do something....

   // this works fine.....

 }

  

function EditProductDataObject(dataObject){

    // this function need to get the Whole Object

    //  so i can do:

    var id = dataObject.ProductId;

   // do something...

  

}

Is it possible to pass the data to a function ?
i also try this:
     <div class="ProdNameClass" onclick="EditProductDataObject( # data #);">
         click to run EditProductDataObject function
     </div>
but this calls the function with undefined

Thanks for any help

moti

[Nohinn]

Just like that is not possible.
You could try to stringify the dataItem but then if anyone is using a debugger like firebug, he could see all the info of the object, and for me at least it is not recommended.

You could instead wrap all your divs in the template in another div:

<script type="text/x-kendo-tmpl" id="MyTemplate">

    <div class="item">

      <div class="ProdNameClass">

             ${ProductName}

      </div>

       <div class="ProdClass"  onclick="EditProduct(${ProductId});">

              click  to run  EditProduct function

                   //  this works

       </div>

      <div class="ProdClass" onclick="EditProductDataObject(this);">

               click to run EditProductDataObject function

               // this is not working, i'm getting nothing when i'm click

       </div>

    </div>

 </script>

And note that to the EditProductDataObject function i'm passing this.

Then in your js function you can retrieve the data like this:

function EditProductDataObject(item) {

    var lv = $('#listview').data('kendoListView');

    // in case you have enabled paging you will have to

    // calculate the real index => skip + itemIndex

   var index = lv.dataSource._skip + $(item).parents('.item:first').index();

     

    //var index = $(item).parents('.item:first').index();

    var dt = lv.dataSource._data[index];

}

In this dt variable you will have the data of the item, note that #listview should be the id of your listview control

[mo2011ti]

Nohinn

Thanks for replying to my questions :-)

this is good idea

Thanks

moti

[beauXjames]

As an update to this topic, in v2015.1.429 I have successfully acquired the full data item within a kendo grid row template with the implementation of an angular directive in the following attribute

<td class="icon action" ng-click="TakeAction(this.dataItem)"><i></i></td>

In the controller the function is passed the full data entity

$scope.TakeAction = function(data){
    alert("Going to resolve Alert :: " + data.AlertTitle + " for " + data.EmployeeName);
}