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
  1. Home
  2. Forum
  3. ASP.NET Core
  4. Why to populate the pivot client control via AJAX, the call must be sync?

Why to populate the pivot client control via AJAX, the call must be sync?

With the pivot grid control is possible to make an asynchronous call  but with the pivot client is not possible. Appears the following error: Uncaught SyntaxError: Unexpected end of JSON input.

When I change the call to sync it works:

function onLoad(args) {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetList", "Default")',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function (val) {
                args.model.dataSource.data = val;
            },
        });
    }

I don't want to make the call sync because the page stop to render until the call is finished, and appears the following message at the console:
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience.

Is there any way to load the control via ajax asynchronously?

5 Replies
SR Sabaridass Ramamoorthy Syncfusion Team November 29, 2018 10:09 AM UTC

Hi Eduardo, 

Thanks for contacting Syncfusion support. 

You can call the PivotClient asynchronously in the “render-success” event instead of “load” event. Please refer the code snippet below. 

Code Snippet: [cshtml] 
<ej-pivot-client id="PivotClient1" render-success="successEvent"> 
// dataSource 
</ej-pivot-client> 
 

Code Snippet: [JavaScript] 
function successEvent(args) { 
   if (args.model.dataSource.data== null) { 
       $.ajax({ 
         //… 
        async: false, 
         success: function (data, status, xhr) { 
             pivotClient = $("#PivotClient1").data("ejPivotClient"); 
             pivotClient.model.dataSource.data = val; 
             pivotClient._pivotSchemaDesigner.model.enableWrapper = true; 
             pivotClient._pivotSchemaDesigner._load(); 
             pivotClient.refreshControl(); 
       }, 
       error: function (request, error) {                               
   } 
}); 
} 
} 
 
Meanwhile, we have prepared a sample for your convenience. Please find the sample from the below link. 


Please let us know if you have any concerns. 
 
Regards, 
Scintilla A. 


ED Eduardo November 29, 2018 04:36 PM UTC

Thanks for your respose!

First: According to your code snippet, the call still is synchronous. (set the property async to false make the call synchronous)
Two: After reviewing your sample I verified that. And if I change or remove the property async, the error Uncaught SyntaxError: Unexpected end of JSON input. appears again.
Three: If I make the load of data in render-success event, the page freezes until the call ends. (i.e. the scroll bars are not responsive)
Four: The video has an encoding error.

I have attached some images...



Attachment: asyncfalse_99be3fec.zip

SA Scintilla Arul Jothi Raj Syncfusion Team November 30, 2018 09:41 AM UTC

Hi Eduardo, 

The reported problem occurs due to “null” value of dataSource. So, please set the empty array initially in the “load” event. Please refer the code snippet below. 

Code Snippet: [cshtml]: 
<ej-pivot-client id="PivotClient1" render-success="successEvent" load="onLoad"> 
// dataSource 
</ej-pivot-client> 
 
Code Snippet: [JavaScript] 
function onLoad(args) { 
  args.model.dataSource.data = []; 
} 
 
function renderSuccess(args) { 
if (!ej.isNullOrUndefined(args.model.dataSource.data)) { 
   $.ajax({ 
     type: "POST", 
     url: '@Url.Action("GetList", "Home")', 
     contentType: 'text/xml', 
     dataType: 'text', 
     data: "s", 
     async: true, 
     success: function (data, status, xhr) { 
     pivotClient = $("#PivotClient1").data("ejPivotClient"); 
     pivotClient.model.dataSource.data = val; 
     pivotClient._pivotSchemaDesigner.model.enableWrapper = true; 
     pivotClient._pivotSchemaDesigner._load(); 
     pivotClient.refreshControl(); 
   }, 
    error: function (request, error) {   } 
   }); 
} 
} 
 
Meanwhile, we have prepared a sample for your convenience. Please find the sample below. 

Screenshot: 

 

Please let us know, if you have any concerns. 

Regards, 
Scintilla A 


ED Eduardo November 30, 2018 05:45 PM UTC

Thanks for your response Scintilla!

It works, but I think it's not a good solution from a user-experience point of view. Because the control is initialized empty and it takes a few seconds for the data to appear. If you have a lot of data, more time the user will see an empty control and perhaps he/she could think something went wrong.

I decide to use the waiting popup control  and initialize it with the page, then create and initialize the pivotclient control until the ajax call has finished. I thinks it's a better solution from the user-experience point of view.

First: I add a waiting popup helper tag and the div that will include the pivotclient control:

<div class="row">
     <div class="col-md-12">
          <div id="target">
               <ej-waiting-popup id="target" show-on-init="true" show-image="true" text="Loading... Please wait..." />
          </div>
          <div id="PivotClient1"></div>              
     </div>
</div>

Second: the ajax call once all the DOM elements of the page are ready.

<script type="text/javascript">
$(function () {
        $.ajax({
            type: "POST",
            url: '@Url.Action("GetList", "Default")',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: true, //this is optional because it's the default setting of the ajax call.
            success: function (val, status, xhr) {
                $("#target")
                    .ejWaitingPopup("hide")
                    .remove(); //Hide the waiting popup and remove the div that contains it.
                $("#PivotClient1").ejPivotClient({ //Creating the pivotclient and setting the ajax response to the dataSource data.
                    dataSource: {
                        data: val,
                        rows: [
                            {
                                fieldName: "Country",
                                fieldCaption: "Country"
                            }
                        ],
                        columns: [
                            {
                                fieldName: "Product",
                                fieldCaption: "Product"
                            }
                        ],
                        values: [
                            {
                                fieldName: "Date",
                                fieldCaption: "Date"
                            }
                        ]
                    }
                    });
               },
     });
});
</script>

I have attached two videos. One with your option and the other with my own.

What do you think about my solution?

Thanks again for your patient, and dedication to resolve the problems/issues of the community!

Regards,
Eduardo Viñuela

Attachment: videos_a58b141d.zip

SA Scintilla Arul Jothi Raj Syncfusion Team December 3, 2018 06:50 AM UTC

Hi Eduardo, 

We have analyzed your query, and the better solution is that the initialization of waiting popup and loading the PivotClient once the document is ready (as per the video: ajaxSuccess-Javascript.mp4). Please refer the code snippet below. 

Code Snippet: [cshtml] 
<div> 
    <div id="target"> 
 
     <ej-waiting-popup id="target" show-on-init="true" /> 
 
    </div> 
    <div id="PivotClient1"></div> 
</div>   
 
Code Snippet: [JavaScript] 
$(function () { 
 
   $.ajax({ 
    type: "POST", 
   //… 
 
 
    success: function (data, status, xhr) { 
      $("#target").ejWaitingPopup("hide").remove(); 
      $("#PivotClient1").ejPivotClient({ 
        dataSource: { 
        //Datasource bound to PivotGrid control. 
        data: val, 
        //Required fields in row, column, value and filter areas of PivotGrid control. 
        rows: [ 
          { 
           fieldName: "Country", 
           fieldCaption: "Country" 
          } 
        ], 
        columns: [ 
          { 
           fieldName: "Product", 
           fieldCaption: "Product" 
         } 
       ], 
        values: [ 
          { 
           fieldName: "Amount", 
           fieldCaption: "Amount" 
        } 
      ] 
   } 
  }) 
                
}, 
error: function (request, error) { } 
}); 
}); 
 
Please let us know if you have any concerns. 

Regards, 
Scintilla A. 


Loader.
Up arrow icon