We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Binding with ajax on grid details template

Hi,

I need some similar at you example:

http://mvc.syncfusion.com/demos/web/grid/detailtemplate

But, i need bind the details template with an ajax request, but I can't load the data.

My javascript code:

<script type="text/javascript">
      function detailGridData(e) {
          var user = e.data["ID"];
          var data = getDetails(user);
          e.detailsElement.find("#detailGrid").ejGrid({
          dataSource: data,
          columns: [
                        { field: "ID" },
                        { field: "IdPerson" },
                        { field: "Order" },
                        {field: "Count"}
                   ]
         });
          e.detailsElement.find(".tabcontrol").ejTab();


          function getDetails(idUser) {
              $.ajax({
                  type: "POST",
                  url: "/Grid/GetDetailsUser",
                  data: { 'user': idUser },
                  datatype: "JSON",
                  success: function (result) {
                      return result;
                  },
                  error: function (jqXHR, textStatus, errorThrown) {
                      console.log(textStatus + ' ' + errorThrown);
                  }
              });
          }
}
</script>

I attach an example.

Thanks

Attachment: RowDetails_392281cb.zip

3 Replies

JK Jayaprakash Kamaraj Syncfusion Team October 12, 2016 06:37 AM UTC

Hi Manolo, 
 
Thank you for contacting Syncfusion support. 
 
The cause of the issue is, an ajax success is called after the grid is rendered. To overcome this problem, bind grid in ajax success. Please refer to the below code example and modified sample.   

<script type="text/javascript"> 
      function detailGridData(e) { 
          var user = e.data["ID"]; 
          var x = e; 
          $.ajax({ 
              type: "POST", 
              url: "/Grid/GetDetailsUser", 
              data: { 'user': user }, 
              datatype: "JSON", 
              success: function (result) { 
                  var e = x; 
                  e.detailsElement.find("#detailGrid").ejGrid({ 
                      dataSource: result, 
                      columns: [ 
                                    { field: "ID" }, 
                                    { field: "IdPerson" }, 
                                    { field: "Order" }, 
                                    { field: "Count" } 
                      ] 
                  }); 
              }, 
              error: function (jqXHR, textStatus, errorThrown) { 
                  console.log(textStatus + ' ' + errorThrown); 
              } 
          }); 
 
          e.detailsElement.find(".tabcontrol").ejTab(); 
} 
</script> 


 
Regards, 
 
Jayaprakash K. 



MA Manolo October 14, 2016 12:06 PM UTC

Thanks a lot


JK Jayaprakash Kamaraj Syncfusion Team October 17, 2016 08:52 AM UTC

Hi Manolo,  
 
Thank for the update. 
 
Please get back to us if you need any further assistance.   
 
Regards,  
 
Jayaprakash K. 


Loader.
Live Chat Icon For mobile
Up arrow icon