MVCxClientGridView.BeginCallback Event
Occurs when a callback for server-side processing is initiated.
Declaration
BeginCallback: ASPxClientEvent<MVCxClientBeginCallbackEventHandler<MVCxClientGridView>>
Event Data
| Property |
Description |
| command |
Gets a command name that identifies which client action initiated a callback.
|
| customArgs |
Gets an object containing specific information (if any, as name/value pairs) that should be passed as a request parameter from the client to the server side for further processing.
|
The BeginCallback and ASPxClientGridView.EndCallback events can be used to perform specific client-side actions (for example, to display and hide an explanatory text or picture) while a callback is being processed on the server side.
By handling the BeginCallback event, you can pass any required information from the client to the server via the MVCxClientBeginCallbackEventArgs.customArgs property.
Example
The example covers the following topics:
- the GridView extension is bound to a DataSet that is filtered by external editors;
- when a callback is performed, the grid’s ASPxClientGridView.BeginCallback event is handled. In the MVC GridView extension, it is possible to transmit client-side values as callback arguments to a Controller’s Action, returning a Partial View;
- jQuery asynchronous requests are not able to serialize the Date, and thus the serialization should be performed manually;
- a DateTime object is created from a serialized string using the DateTime.ParseExact method;
- custom resources (scripts and CSS files) are compressed using the HTTP Handler.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Example.Models;
using System.Web.Script.Serialization;
using System.Globalization;
namespace Example.Controllers {
public class HomeController : Controller {
public ActionResult Index() {
//default data
OrdersModel model = new OrdersModel {
StartDate = new DateTime(1996, 8, 1),
EndDate = new DateTime(1996, 8, 30)
};
return View(model);
}
[HttpPost]
public ActionResult GridViewPartial() {
OrdersModel model = new OrdersModel {
StartDate = DateTime.ParseExact(Request.Params["StartDate"], "d|M|yyyy", CultureInfo.InvariantCulture),
EndDate = DateTime.ParseExact(Request.Params["EndDate"], "d|M|yyyy", CultureInfo.InvariantCulture)
};
return PartialView("_GridView", model.Data);
}
}
}
//Index.cshtml
@model Example.Models.OrdersModel
<table summary="Personal Movie Rating" class="myTable">
<thead>
<tr>
<th scope="col" class="myHeader">
Start Date:
</th>
<th scope="col" class="myHeader">
End Date:
</th>
<th scope="col" class="myHeader">
Get Results:
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="myCell">
@(Html.DevExpress().DateEdit(settings => {
settings.Name = "StartDate";
settings.Properties.MinDate = Model.MinDate;
settings.Properties.MaxDate = Model.MaxDate;
settings.Properties.Width = Unit.Percentage(100);
})
.Bind(Model.StartDate)
.GetHtml())
</td>
<td class="myCell">
@(Html.DevExpress().DateEdit(settings => {
settings.Name = "EndDate";
settings.Properties.MinDate = Model.MinDate;
settings.Properties.MaxDate = Model.MaxDate;
settings.Properties.Width = Unit.Percentage(100);
settings.Properties.ValidationSettings.EnableCustomValidation = true;
settings.Properties.ValidationSettings.Display = Display.Dynamic;
settings.Properties.ClientSideEvents.Validation = "function (s, e) { e.isValid = e.value >= StartDate.GetValue(); e.errorText = 'The End Date value is less than the Start Date'; }";
})
.Bind(Model.EndDate)
.GetHtml())
</td>
<td class="myCell">
@(Html.DevExpress().Button(settings => {
settings.Name = "btn";
settings.Text = "Apply";
settings.Width = Unit.Percentage(100);
settings.CausesValidation = true;
settings.ClientSideEvents.Click = @"function (s, e) {
if (!ASPxClientEdit.ValidateGroup (''))
return;
startDate = StartDate.GetDate();
endDate = EndDate.GetDate();
gridView.Refresh();
}";
})
.GetHtml())
</td>
</tr>
<tr>
<td class="myGridCell" colspan="3">
@Html.Partial("_GridView", Model.Data)
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var startDate = StartDate.GetDate(),
endDate = EndDate.GetDate();
</script>
//_Layout.cshtml
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>How to bind GridView extension to a Model filtered by a range of dates in MVC 3 (Razor)</title>
@Html.DevExpress().GetStyleSheets(
new StyleSheet { ExtensionSuite = ExtensionSuite.Editors },
new StyleSheet { ExtensionSuite = ExtensionSuite.GridView }
)
<link href="DX.ashx?cssfile=~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="DX.ashx?jsfile=~/Scripts/jquery-3.5.1.min.js" type="text/javascript"></script>
@Html.DevExpress().GetScripts(
new Script { ExtensionSuite = ExtensionSuite.GridView },
new Script { ExtensionSuite = ExtensionSuite.Editors }
)
</head>
<body>
@RenderBody()
</body>
</html>
//_GridView.cshtml
@model Example.Models.Northwind.OrdersDataTable
@using System.Drawing
@Html.DevExpress().GridView(settings => {
settings.Name = "gridView";
settings.KeyFieldName = "OrderID";
settings.Columns.Add("OrderID", MVCxGridViewColumnType.TextBox);
settings.Columns.Add("OrderDate", MVCxGridViewColumnType.DateEdit).CellStyle.BackColor = Color.Yellow;
settings.Columns.Add("Freight", MVCxGridViewColumnType.TextBox);
settings.Columns.Add("ShipName", MVCxGridViewColumnType.TextBox);
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.Width = Unit.Percentage(100);
settings.ClientSideEvents.BeginCallback = @"function (s, e) {
e.customArgs['StartDate'] = startDate.getDate() + '|' + (startDate.getMonth() + 1) + '|' + startDate.getFullYear();
e.customArgs['EndDate'] = endDate.getDate() + '|' + (endDate.getMonth() + 1) + '|' + endDate.getFullYear();
}";
settings.SettingsPager.ShowEmptyDataRows = true;
}).Bind(Model).GetHtml()
See Also