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.
Unfortunately, activation email could not send to your email. Please try again.

How to refresh/reload a pivotClient data using jquery

Thread ID:

Created:

Updated:

Platform:

Replies:

133022 Oct 4,2017 08:45 AM Oct 10,2017 08:59 AM ASP.NET MVC 9
loading
Tags: PivotClient
Anis
Asked On October 4, 2017 08:45 AM

Hi,
My PivotClient works fine on initial load (JSON data), but I'm having trouble finding a way to reload/update the data and pass date to filter the data. I'm using MVC, not the JavaScript version. 
My code:

function btnClick(args) {
        var pivotClientObj= $('#PivotClient1').data("ejPivotClient");
        $.ajax({
            type: "POST",
            url: "../MyPivotClient/filterDate",
            data: { statsFrom: $("#StatsFrom").ejDatePicker().value(), statsTo: $("#StatsTo").ejDatePicker().value() },
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (val) {
                pivotGridObj.model.dataSource.data = JSON.parse(val);
                pivotClientObj.refreshPivotClient(); 
            },
            error: function (val) {
                alert("error  " + val);
            }
        });
    }

_______________________________________________________________________________________________________________
       [ActionName("filterDate")]
        [HttpPost]
        public JsonResult filterDate(DateTime statsFrom, DateTime statsTo)
        {
            var result = db.dataTab.Where(o => o.DateTab >= statsFrom && o.DateTab <= statsTo);
            return new JsonNetResult() { Data = result };
        }

Manikandan Murugesan [Syncfusion]
Replied On October 5, 2017 07:36 AM

Hi Anis, 

Thanks for contacting Syncfusion Support. 

We have prepared prototype sample to refresh PivotClient with new data as per your requirement. Please find the sample in below link. 


Ø  In the btnClick() method, you need to get date picker value and set it to the variable and you can pass it through AJAX. In the “url”, you need to specify controller method name. In the “success”, set returned value from controller to PivotClient object. And, you can refresh PivotClient using refreshControl() method.  Please refer below code snippet. 
 
Code Snippet: [javascript] 
   
function btnClick(args) { 
        var data = '{ startDate : "4/9/2017" , endDate : "17/9/2017" }'; // Get value from date picker and set it to the variable 
        var pivotClientObj = $('#PivotClient1').data("ejPivotClient"); 
        $.ajax({ 
            type: "POST", 
            url: "filterDate", 
            data: data, 
            contentType: 'application/json; charset=utf-8', 
            dataType: 'json', 
            async: false, 
            success: function (val) { 
                pivotClientObj.model.dataSource.data = val; //Assign datasource to the pivotClientObj 
                pivotClientObj.refreshControl();  
            }, 
            error: function (val) { 
                alert("error  " + val); 
            } 
        }); 
    } 
 
 
Ø  In the controller, we have returned list of data to the client side. But in your case, you need to fetch the data from SQL and form it as a list and return to the client side. Please refer below code snippet. 
 
Code Snippet: [cs] 
[ActionName("filterDate")] 
        [HttpPost] 
 
        public JsonResult filterDate(string startDate, string endDate) 
        { 
 
            //here you need to get data from SQL using date parameter. 
            //You need to form your datasource as like in the below structure. 
 
            List<ProductDetails> list = new List<ProductDetails>(); 
            ProductDetails product1 = new ProductDetails(); 
            product1.Amount = 1000; 
            product1.Quantity = 200; 
            product1.Product = "Bike"; 
            product1.Date = "FY-2005"; 
            list.Add(product1); 
            ProductDetails product2 = new ProductDetails(); 
            product2.Amount = 5000; 
            product2.Quantity = 700; 
            product2.Product = "Car"; 
            product2.Date = "FY-2006"; 
            list.Add(product2); 
            ProductDetails product3 = new ProductDetails(); 
            product3.Amount = 3000; 
            product3.Quantity = 400; 
            product3.Product = "Van"; 
            product3.Date = "FY-2007"; 
            list.Add(product3); 
            return Json(list, JsonRequestBehavior.AllowGet); 
        } 
 
 
 
    public class ProductDetails 
    { 
 
        public int Amount 
        { 
            get; 
            set; 
        } 
        public int Quantity 
        { 
            get; 
            set; 
        } 
        public string Product 
        { 
            get; 
            set; 
        } 
        public string Date 
        { 
            get; 
            set; 
        } 
 
    } 


Please let us know if you have any queries. 

Thanks, 
Manikandan. 


Anis
Replied On October 5, 2017 11:42 AM

Hi,

I copy your code, but I get empty data. Why is that?


 [ActionName("filterDate")]

        [HttpPost]

        public JsonResult filterDate(string startDate, string endDate)

        {

            DateTime statsFrom = Convert.ToDateTime(startDate);

            DateTime statsTo = Convert.ToDateTime(endDate);

            var result = db.dataTab.Where(o => o.DateExport >= statsFrom && o.DateExport <= statsTo);

           // return new JsonNetResult() { Data = result }; //I try this too

            return Json(result, JsonRequestBehavior.AllowGet);

        }

________________________________________________________________________

function btnClick(args) {

       var data = '{ startDate : "1/1/2016" , endDate : "29/6/201" }';

        var pivotClientObj = $('#PivotClient1').data("ejPivotClient");

        $.ajax({

            type: "POST",

            url: "../MyPivotClient/filterDate",

            data: data,

            contentType: 'application/json; charset=utf-8',

            dataType: 'json',

            async: false,

            success: function (val) {

                pivotClientObj.model.dataSource.data = val; 

                pivotClientObj.refreshControl();

            },

            error: function (val) {

                alert("error  " + val);

            }

        });

    }


Regards,

Anis


Attachment: screenshot_11cbe19e.rar

Anis
Replied On October 6, 2017 05:28 AM

Hi,

I try to filter the main controller function with date, and I get empty data too.


[System.Web.Http.ActionName("GetData")]

        [System.Web.Http.HttpPost]

        public JsonResult GetData()

        {

            DateTime statsFrom = Convert.ToDateTime("01/01/2016");

            DateTime statsTo = Convert.ToDateTime("01/03/2016");

            var result = db.dataTab.Where(o => o.DateExport >= statsFrom && o.DateExport <= statsTo);

              return new JsonNetResult() { Data = result };

            //return Json(result, JsonRequestBehavior.AllowGet);

     }

____________________________________________________________________________________________

 <script>

                                    var pivot_dataset = [];

                                    function onLoad(args) {

                                        //args.model.dataSource.data = pivot_dataset;

                                        $.ajax({

                                            type: "POST",

                                            url: "../MyPivotClient/GetData",

                                            contentType: 'application/json; charset=utf-8',

                                            dataType: 'json',

                                            async: false,

                                            success: function (val) {

                                                args.model.dataSource.data = val;

                                            },

                                        });

                                    }


Regards,
Anis

Manikandan Murugesan [Syncfusion]
Replied On October 6, 2017 09:07 AM

Hi Anis, 

Thanks for the response. 
 
You can’t give result returned from database as datasource directly to the PivotClient. 
 
 
As we mentioned in our previous update, you need to form your result returned from database as like in the below structure. Please refer below code snippet. 

Code Snippet: [cs]
  
[ActionName("filterDate")]  
        [HttpPost]  
  
        public JsonResult filterDate(string startDate, string endDate)  
        {  
  
            //here you need to get data from SQL using date parameter.  
            //You need to form your datasource as like in the below structure.  
  
            List<ProductDetails> list = new List<ProductDetails>();  
            ProductDetails product1 = new ProductDetails();  
            product1.Amount = 1000;  
            product1.Quantity = 200;  
            product1.Product = "Bike";  
            product1.Date = "FY-2005";  
            list.Add(product1);  
            ProductDetails product2 = new ProductDetails();  
            product2.Amount = 5000;  
            product2.Quantity = 700;  
            product2.Product = "Car";  
            product2.Date = "FY-2006";  
            list.Add(product2);  
            return Json(list, JsonRequestBehavior.AllowGet);  
        }  
  
  
  
    public class ProductDetails  
    {  
  
        public int Amount  
        {  
            get;  
            set;  
        }  
        public int Quantity  
        {  
            get;  
            set;  
        }  
        public string Product  
        {  
            get;  
            set;  
        }  
        public string Date  
        {  
            get;  
            set;  
        }  
  
    }  
 
 
If still the problem exists, please let us know the format of data returned from database (or) kindly send your Controller and view page to us. This will help us to investigate the reported problem at our end. 
 
Regards, 
Manikandan. 


Anis
Replied On October 6, 2017 10:28 AM

Hi,

First it work perfectly using this simple code:

 public JsonResult GetData()

        {

            var result = db.dataTab;

           return new JsonNetResult() { Data = result };

     }

Second I already form the result of the database as you mentioned, but I also have an error.

And given the large amount of data the view takes a long time to render, so a way to simplify things I want to filter the data using the date.

 

public JsonResult GetData()

        {

            DateTime statsFrom = Convert.ToDateTime("01/01/2016");

            DateTime statsTo = Convert.ToDateTime("01/03/2016");


            var result = db.dataTab.Where(o => o.DateExport >= statsFrom && o.DateExport <= statsTo);


            var allData = from o in result


                          select new

                          {

                              DateExport = o.DateExport,

                              Order= o.Order,

                              QteOrd = o.QteOrd,

                              Customer = o.Customer,

                              Quantity = o.Quantity,

                              Cmd_1= o.Cmd_1,

                              Cmd_2= o.Cmd_2,

                              Cmd_3= o.Cmd_3,

                              Model = o.Model

                          };

            //return new JsonNetResult() { Data = result };

            return Json(allData, JsonRequestBehavior.AllowGet);

        }



Anis
Replied On October 7, 2017 08:17 AM

Hi,

I think the problem is in the date format.

When I initialize the date it works:

            DateTime statsFrom = Convert.ToDateTime("2017-01-01");

            DateTime statsTo = Convert.ToDateTime("2017-06-30");

But it doesn't works if I use date from jquery(view):

public JsonResult filterDate(string startDate, string endDate )

        {

            DateTime statsFrom = Convert.ToDateTime(startDate);

            DateTime statsTo = Convert.ToDateTime(endDate);

 var result = db.dataTab.Select(o => new

            {

                              DateExport = o.DateExport,

                              Order= o.Order,

                              QteOrd = o.QteOrd,

                              Customer = o.Customer,

                              Quantity = o.Quantity,

                              Cmd_1= o.Cmd_1,

                              Cmd_2= o.Cmd_2,

                              Cmd_3= o.Cmd_3,

                              Model = o.Model

                          }.Where(o => o.DateExport >= statsFrom && o.DateExport <= statsTo);

            return Json(result , JsonRequestBehavior.AllowGet);
        }
_____________________________________________________________________________________________
function btnClick(args) {
       var dateStart = $("#StatsFrom").ejDatePicker("getValue");
        var dateEnd = $("#StatsTo").ejDatePicker("getValue");
        var data = { startDate: dateStart, endDate: dateEnd}; // Get value from date picker and set it to the variable 

        var pivotClientObj = $('#PivotClient1').data("ejPivotClient");
        $.ajax({
            type: "POST",
            url: "../FinssagePivotClient/filterDate",
            data: data,
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            async: false,
            success: function (val) {
                pivotClientObj.model.dataSource.data = val; 
                pivotClientObj.refreshControl();
            },
            error: function (val) {alert("error  " + val);}
        }); }
What is the problem?


Regards,
Anis

Manikandan Murugesan [Syncfusion]
Replied On October 9, 2017 07:05 AM

Hi Anis, 
 
We have analyzed your code snippet at our end and suspect that the date format for DatePicker has not set properly at client side. So, kindly set the require date format to DatePicker. Please refer below code snippet. 
  
Code Snippet: [javascript]   
        $("#daterange1").ejDatePicker({   
            select: "selectedDate1",   
            value: today,   
            dateFormat: "yyyy-MM-dd",   
            minDate: new Date(currentYear, currentMonth, curentDay - 7),   
            maxDate: new Date(currentYear, currentMonth + 3, curentDay)   
        });   
  
Code Snippet: [cshtml] 
@Html.EJ().DatePicker("datePicker").Value(System.DateTime.Now).Locale("en-US").DateFormat("yyyy/dd/MM")
 
Please refer below documentation link for more details. 
 
 
And, get the DatePicker values and form it as a below format and send it through AJAX.   
  
Code Snippet: [javascript]   
    function btnClick(args) {   
        var dateStart = $("#daterange1").ejDatePicker("getValue");   
        var dateEnd = $("#daterange2").ejDatePicker("getValue");   
        var data = '{ startDate:"' + dateStart + '", endDate:"' + dateEnd +'" }';   
        var pivotClientObj = $('#PivotClient1').data("ejPivotClient");   
        $.ajax({   
            type: "POST",   
            url: "filterDate",   
            data: data,   
            contentType: 'application/json; charset=utf-8',   
            dataType: 'json',   
            async: false,   
            success: function (val) {   
                pivotClientObj.model.dataSource.data = val;   
                pivotClientObj.refreshControl();   
            },   
            error: function (val) {   
                alert("error  " + val);   
            }   
        });   
    }   
   
 
Note: 
If still the problem exists, please share sample with database contains garbage values. This would be a very helpful for us to investigate the reported problem at our end. 
 
 
Thanks,   
Manikandan.   


Anis
Replied On October 9, 2017 11:24 AM

The problem still exists, you find a sample here.

Regards,

Anis


Manikandan Murugesan [Syncfusion]
Replied On October 10, 2017 08:59 AM

Hi Anis, 
 
Thanks for the sample. 
 
We have checked the provided sample and its work fine at our end. Meanwhile, we also checked the database file and it contains below data. 
 
 
 
In all possible date range, PivotClient renders properly. Please find the video in below link. 
 
 
Could you please let us know the exact replication procedure with provided sample which would be very helpful to investigate the problem at our end? 
 
Thanks, 
Manikandan. 


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.

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.

;