This is a migrated thread and some comments may be shown as answers.

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

3 Answers 977 Views
Templates
This is a migrated thread and some comments may be shown as answers.
mo2011ti
Top achievements
Rank 1
mo2011ti asked on 30 Aug 2012, 08:54 AM
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


3 Answers, 1 is accepted

Sort by
0
Accepted
Nohinn
Top achievements
Rank 1
answered on 30 Aug 2012, 11:39 AM
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
0
mo2011ti
Top achievements
Rank 1
answered on 30 Aug 2012, 01:47 PM
Nohinn

Thanks for replying to my questions :-)

this is good idea

Thanks

moti


0
beauXjames
Top achievements
Rank 2
answered on 05 Jun 2015, 02:09 PM

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);
}

Tags
Templates
Asked by
mo2011ti
Top achievements
Rank 1
Answers by
Nohinn
Top achievements
Rank 1
mo2011ti
Top achievements
Rank 1
beauXjames
Top achievements
Rank 2
Share this question
or