We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143068 Mar 4,2019 02:31 AM UTC Mar 5,2019 09:46 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: PivotGrid
Kenneth Tang
Asked On March 4, 2019 02:31 AM UTC

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

Arulraj A [Syncfusion]
Replied On 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 


Kenneth Tang
Replied On 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

Arulraj A [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon