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

4 posts, 1 answers
  1. moti
    moti avatar
    27 posts
    Member since:
    May 2011

    Posted 30 Aug 2012 Link to this post

    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


  2. Answer
    Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 30 Aug 2012 Link to this post

    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
  3. Kendo UI is VS 2017 Ready
  4. moti
    moti avatar
    27 posts
    Member since:
    May 2011

    Posted 30 Aug 2012 Link to this post

    Nohinn

    Thanks for replying to my questions :-)

    this is good idea

    Thanks

    moti


  5. beauXjames
    beauXjames avatar
    20 posts
    Member since:
    Aug 2012

    Posted 05 Jun 2015 Link to this post

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

Back to Top
Kendo UI is VS 2017 Ready