1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. How do your refresh / reload a pivot grid with partial view

How do your refresh / reload a pivot grid with partial view

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");
        }

3 Replies
AA Arulraj A Syncfusion Team March 4, 2019 06:56 AM UTC

Hi Kenneth, 

Thanks for using Syncfusion product. 

We have created pivotview sample using DateRangePicker. Please find the sample in below link. 

In the sample, we get the data from data manager while changing the DateRangePicker value. So, here you can get data from database and refresh the pivot table. 

For more details kindly refer the below KB documents. 

If still the problem exists, kindly send your sample to us which would be very helpful for us to investigate the problem at our end and provide the solution at earliest. 

Regards,   
Arulraj A 


KT Kenneth Tang March 5, 2019 03:06 AM UTC

Dear Arulraj,

Thank for info. 

Could you please also provide a sample for MVC with ajax return from c# rather than javascript for us?

Thank a lot!

KennethT

AA Arulraj A Syncfusion Team March 5, 2019 09:46 AM UTC

Hi Kenneth, 

Thanks for the reply. 

We have prepared sample as per your requirement. 


Let us know if you need further assistance on this. 
 
Regards, 
Arulraj A 


Loader.
Up arrow icon