How can I asynchronously render the PivotClient using an AJAX post?
This KB showcases the example to render PivotClient asynchronously with AJAX post.
Solution: Currently, PivotClient rendering synchronously. You can change this behavior by doing the following customization.
Step: 1
Render the PivotClient with “load” and “renderSuccess” event as per your platform.
JavaScript
<div><div id="target"></div>
<div id="PivotClient1"></div></div>
<script type="text/javascript">
$(function () {
$("#target").ejWaitingPopup({ showOnInit: true });
$("#PivotClient1).ejPivotClient({ renderSuccess: "successEvent", load: "onLoad" }); });
</script>
ASP
<div id="target"></div> <ej:WaitingPopup ID="target" Target="#target" runat="server" ShowOnInit="True"></ej:WaitingPopup> <ej:PivotClient ID="PivotClient1" runat="server" Title="Relational Browser" ClientIDMode="Static"> <clientsideevents load="onLoad" renderSuccess="successEvent" /> </ej:PivotClient>
MVC
<div>
<div id="target">
@Html.EJ().WaitingPopup("target").ShowOnInit(true)
</div>
@Html.EJ().Pivot().PivotClient("PivotClient1").ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad").RenderSuccess("successEvent"))
</div>
ASP.NET Core
<div> <div id="target"> <ej-waiting-popup id="target" show-on-init="true" /> </div> <ej-pivot-client id="PivotClient1" title="Relational Browser" render-uccess="successEvent" load="onLoad"></ej-pivot-client> </div>
Step: 2
The dataSource should be initialized as empty array in the “load” event.
function onLoad(args) {
args.model.dataSource.data = [];
}
Step 1:
The PivotClient can be called in AJAX success method which is in “renderSuccess” event.
function successEvent(args) {
if (!ej.isNullOrUndefined(args.model.dataSource.data)) {
$.ajax({
type: "POST",
//…
async: true,
success: function (data, status, xhr) {
$("#target").ejWaitingPopup("hide").remove();// Waiting popup can be removed here
$("#PivotClient1").ejPivotClient({
dataSource: {
//Datasource bound to PivotClient control.
data: val,
//Required fields in row, column, value and filter areas of PivotClient control.
rows: [{ fieldName: "Country", fieldCaption: "Country" }],
columns: [{ fieldName: "Product", fieldCaption: "Product" }],
values: [{ fieldName: "Amount", fieldCaption: "Amount" }] }
});
},
error: function (request, error) {
}
});
}
