Binding with ajax on grid details template

[Manolo]

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

[Jayaprakash Kamaraj]

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> 

Sample: https://www.syncfusion.com/downloads/support/forum/126374/ze/RowDetails1485478695 

 

Regards, 

 

Jayaprakash K. 

[Manolo]

Thanks a lot

[Jayaprakash Kamaraj]

Hi Manolo,  

 

Thank for the update. 

 

Please get back to us if you need any further assistance.   

 

Regards,  

 

Jayaprakash K.