Category / Section
How to Customize default WaitingPopUp in Grid?
1 min read
In this document grid waiting-popup customization has been explained.
Solution:
Grid waiting-popup can be customized by “template” property of ejWaitingPopup and “actionBegin” Grid event.
HTML
<div id="Grid"></div> <div id="content"> <div class="text"> <p style="text-align:center;"> loading ... </p> </div> </div>
JS
$(function () {
var dataManger = ej.DataManager({
url: "http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/", crossDomain: true
});
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: dataManger,
actionBegin: "actionBegin",
allowPaging: true,
columns: [
{ field: "OrderID", headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "CustomerID", headerText: 'Customer ID', width: 90 },
{ field: "EmployeeID", headerText: 'Employee ID', textAlign: ej.TextAlign.Right, width: 90 },
{ field: "Freight", headerText: 'Freight', textAlign: ej.TextAlign.Right, width: 90, format: "{0:C}" },
{ field: "ShipName", headerText: 'Ship Name', width: 90 },
],
});
});
Razor
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource("http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/")
// .Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(TextAlign.Right).Width(90).Add();
col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(90).Format("{0:C}").Add();
col.Field("ShipName").HeaderText("Ship Name").Width(90).Add();
})
.ClientSideEvents(eve => eve.ActionBegin("actionBegin"))
)
Aspx
<ej:Grid ID="Grid" runat="server" AllowPaging="true">
<DataManager URL="http://mvc.syncfusion.com/Services/Northwnd.svc/Orders/"></DataManager>
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="90"/>
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90"/>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="90" />
<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Format="{0:C}" Width="90" />
<ej:Column Field="ShipName" HeaderText="Ship Name" Width ="90"></ej:Column>
</Columns>
<ClientSideEvents ActionBegin="actionBegin" />
</ej:Grid>
ActionBegin
actionBegin is triggered on every grid action before its starts.
<script>
function actionBegin(args) {
this.element.ejWaitingPopup({ template: '#content' });
}
</script>
