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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. How to refresh/reload a pivotClient data using jquery

How to refresh/reload a pivotClient data using jquery

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

9 Replies
MM Manikandan Murugesan Syncfusion Team October 5, 2017 11:36 AM UTC

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. 


AN Anis October 5, 2017 03:42 PM UTC

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

AN Anis October 6, 2017 09:28 AM UTC

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

MM Manikandan Murugesan Syncfusion Team October 6, 2017 01:07 PM UTC

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. 


AN Anis October 6, 2017 02:28 PM UTC

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

        }



AN Anis October 7, 2017 12:17 PM UTC

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

MM Manikandan Murugesan Syncfusion Team October 9, 2017 11:05 AM UTC

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.   


AN Anis October 9, 2017 03:24 PM UTC

The problem still exists, you find a sample here.

Regards,

Anis


MM Manikandan Murugesan Syncfusion Team October 10, 2017 12:59 PM UTC

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. 


Loader.
Up arrow icon