Dear all,
We want to refresh a pivot grid after selected with date range picker. The following is out coding but can't refresh. Please advance & thank!
KennethT
main chtml
<div class="row">
<div class="col-md-offset-8 col-md-4">
@Html.EJS().DateRangePicker("dateHourly").Format("yyyy-MM-dd").Presets(PresetItem =>
{
PresetItem.Label("This Week").Start(ViewBag.weekStart).End(ViewBag.weekEnd).Add();
PresetItem.Label("This Month").Start(ViewBag.monthStart).End(ViewBag.monthEnd).Add();
PresetItem.Label("Last Month").Start(ViewBag.lastMonthStart).End(ViewBag.lastMonthEnd).Add();
PresetItem.Label("Last Year").Start(ViewBag.lastYearStart).End(ViewBag.lastYearEnd).Add();
}
).Placeholder("Select a Range").Width("300px").StartDate(ViewBag.frmDate).EndDate(ViewBag.toDate).Change("pickerChange").Render()
</div>
</div>
<div id="pivotMonthly" class="row">
@{
Html.RenderAction("_PivotMonthly", "Report", new { frmDate = ViewBag.frmDate, toDate = ViewBag.toDate });
}
</div>
<br />
<script>
var pickerChange = function (args) {
if (args.value.length == 2) {
var pivotGridObj = document.getElementById("PivotGrid").ej2_instances[0];
var startDate = new Date(args.startDate.getTime() - (args.startDate.getTimezoneOffset() * 60000)).toISOString().split("T")[0];
var endDate = new Date(args.endDate.getTime() - (args.endDate.getTimezoneOffset() * 60000)).toISOString().split("T")[0];
var ajax = new ej.base.Ajax("/Report/_PivotMonthly?frmDate=" + startDate + "&toDate=" + endDate, "POST", true);
ajax.onSuccess = function (value) {
pivotGridObj.dataSource.data = JSON.parse(value); // you can set the JSON data here
pivotGridObj.refreshPivotGrid(); // method call to refresh the PivotGrid
};
ajax.send();
}
}
</script>
parital view chtml
@Html.EJS().PivotView("PivotGrid").Width("100%").Height("100%").DataSource(dataSource => dataSource.Data((IEnumerable<object>)ViewBag.Data)
.Rows(rows =>
{
rows.Name("recDate").Add();
}
).Columns(columns =>
{
columns.Name("Level").Caption("Level").Add();
}
).Values(values =>
{
values.Name("INCount").Caption("In").Add(); values.Name("OutCount").Caption("Out").Add(); values.Name("TtlCount").Caption("Total").Add();
}
)
).Render()
controllor
public ActionResult rptMonthly()
{
ViewBag.frmDate = _frmDate;
ViewBag.toDate = _toDate;
setDateRangePickerButton();
List<LevelInOutData> ld = pd.getLevelData(_frmDate, _toDate);
ViewBag.data = ld;
return View();
}
public ActionResult _PivotMonthly(string frmDate, string toDate)
{
List<LevelInOutData> ld = pd.getLevelData(frmDate, toDate);
ViewBag.data = ld;
return PartialView("_PivotMonthly");
}
