how to return a value (from async call) to a grid's cell template?

[Clint]

Trying to pass a value from an async call back to a grid column cell template.  Obviously returning a value from an async call can be difficult.  How do I get a result back into the kendo grid cell?

....
 field: "PTORecorded",  
           title: "PTO Recorded",
           template:  function (data){
getData(data).done(handleData);
}

},

----

function getData(data) {
 var person = data.Person;
    return $.ajax({
        url : url + person,
        type: 'GET',
        headers: {
         "Accept": "application/json; odata=verbose"
     },
    });
}
function handleData(data) {
    var ptoArray = [];
     $.each(data.d.results, function (index, item) {
             if (item.PTOValue != null) {
                 var _item = item.PTOValue;
                 ptoArray.push(_item);
             }
         });
         var ptoRecorded = 0;
         for (var i = 0; i < ptoArray.length; i++) {
             ptoRecorded += ptoArray[i] << 0;

   return ptoRecorded;
    }
  }

I'm basically trying to call a remote datasource, filtering it via a value in the grid row (data.Person), calculating a returned value, and passing it back to a grid cell template.  How do I get that async call to pass a value back to the grid?  I know the async call presents a problem.  Suggestions?

[Vladimir Iliev]

Hi Clint,

 
Basically current behavior is expected as the "ajax" method of jQuery releases current thread and the execution of the function continues. In current scenario you can return div element with "id" attribute based on current model ID. Then when the ajax call is completed you can find that div element and insert the calculated result as it's content. For convenience I created small example:

• Define column template:  

  template: "#=createAsync(data)#"

• Define the "createAsync" function:  

  function createAsync(data) {
  
      $.ajax({
          url: "/Home/GetCustomData",
          type: "POST",
          data: { id: data.OrderID },
          success: function (response) {
              //find the returned element and insert the response
              $("#async_" + data.OrderID).html(response.text);
          }
      });
  
      //return container with id generated from current model ID field
      return "<div id='async_" + data.OrderID + "'> </div>"
  }

       

Kind Regards,
Vladimir Iliev
Telerik

[Clint]

That approach works great.  Thank you!  I actually was just implementing a similar idea and your sample code helped me out. Much appreciated!

[Josh]

I have a Kendo Grid where I'd like to call an ajax method to populate this cell. The call is made and it does indeed return a value for each row. However it looks like it can't find the cell in order to update the cell. When I use the browsers debugger I do see the div in the gridcell. Any ideas?

in grid:

columns.Bound(a => a.Destination).Title("Assigned To").Width("180px").ClientTemplate ("#=createDispNameAsync(Destination)#");

js call:

function createDispNameAsync(Destination) { ++rowID;

$.ajax({
url: "/report/GetUserName",
type: "POST",
data: { userName: Destination },
success: function (response) {
$("#async_" + rowID).replaceWith(response);
}
});

return "<div id='async_" + rowID + "'>" + Destination + "</div>";
}

[Vladimir Iliev]

Hi Josh,

My colleague Alex already answered to this query in duplicated support ticket created by you - #810240. Please keep in mind that it is highly recommended that you keep related questions in one support thread or a forum post, so that we can easily keep track of your support history and provide better answers in a shorter time.

Regards,
Vladimir Iliev
Telerik

 

 

[Scott Waye]

Thanks for the question and answers.  If you're using Angular you may need a bit more to get the template out of the controller.  Here's what I've got working:

 

    $scope.lookUpEventNameAsync = function(data) {

        refData.events().fetch(function() {
            var eData = refData.events().data();
            var refEvent = eData.find(function(re, i, a) {
                return re.code === data.eventCode;
            });
            $("#async_tse_" + data.key).html(refEvent.name);
        });

        return $sce.trustAsHtml("<div id='async_tse_" + data.key + "'> </div>");
    };

    $scope.gridTimesheetColumns = [
        {
            field: "eventCode", title: "Event", width: "100px", editor: eventDropDownEditor, template: "<span ng-bind-html='lookUpEventNameAsync(dataItem)'> </span>"
        },
....

 

refData.events() is the kendoDataSource and $scope.gridTimesheetColumns is attached through the k-columns directive.

[Mauricio Alexander]

I need the answer to this question...

[Stefan]

Hi,

This is the answer the ticket:

"
This happens because the request is asynchronous, meaning that the template is rendered before the response is received. Basically, there are two approaches:
Make the request synchronous by setting the async option to false
Use the item's uid to find the row and the cell once the response arrives. For example: 

ClientTemplate("#=createDispNameAsync(data.uid)#");



function createName(uid) {

    var item = $("#MyGridID").data("kendoGrid").dataSource.getByUid(uid);

    $.ajax({

        url : "/report/GetUserName",

        type : "POST",

        data : {

            userName : item.Destination

        },

        success : function (response) {

            $("#grid tr[data-uid='" + uid + "'] td:eq(0)").text(response.myResponseField)

        }

    });

    return ""



}

"

I hope this is helpful.

Regards,
Stefan
Progress Telerik