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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

141183 Nov 28,2018 04:17 PM UTC Dec 3,2018 06:50 AM UTC ASP.NET Core 5
loading
Tags: PivotClient
Eduardo
Asked On November 28, 2018 04:17 PM UTC

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?

Sabaridass Ramamoorthy [Syncfusion]
Replied On 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. 


Eduardo
Replied On 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

Scintilla Arul Jothi Raj [Syncfusion]
Replied On 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 


Eduardo
Replied On 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

Scintilla Arul Jothi Raj [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;