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.

Bind pivot grid in ajax

Thread ID:

Created:

Updated:

Platform:

Replies:

129433 Mar 17,2017 07:48 AM Dec 5,2017 07:45 AM ASP.NET MVC 7
loading
Tags: PivotGrid
Manolo
Asked On March 17, 2017 07:48 AM

Hi,

I need bind a pivot grid after form submit. I do the request with ajax, but I can't bind results in pivot grid.

In load client event, I can do it, but not in submit.

I attach an example

Thanks

Attachment: PivotGridAjax_ae58ea61.zip

Sastha Prathap Selvamoorthy [Syncfusion]
Replied On March 20, 2017 05:26 AM

Hi Manolo,   
   
We suspect that the problem raised while providing the json data in the Ajax post method on submitting the form.  You can provide the json data as mentioned in the below sample code snippet.   
   
Sample code:  
<div id = "ControlRegion">   
   
@* create form *@   
<form id="frmFilters" method="post">   
    <div class="row">   
        <input type="submit" class="btn btn-primary" />   
    </div>   
</form>   
   
@Html.EJ().Pivot().PivotGrid("PivotGrid1").EnableGroupingBar(true).ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad")).DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Country").FieldCaption("Country").Add(); rows.FieldName("State").FieldCaption("State").Add(); }).Columns(columns => { columns.FieldName("Product").FieldCaption("Product").Add(); }).Values(values => { values.FieldName("Amount").Add(); values.FieldName("Quantity").Add(); }).Filters(filters => { filters.FieldName("Date").FieldCaption("Date").Add(); }))   
   
</div>   
   
   
<script type="text/javascript">   
    $(document).ready(function () {   
        var pivot_dataset = [];   
        $("#frmFilters").submit(function (e) {   
            var form = $(this);   
           var url = '@(Url.Action("GetData""PivotGrid"))';   
            $.ajax({   
                type: "POST",   
                dataType: "json",   
                contentType: "application/json; charset=utf-8",   
                url: url,   
                success: function (result) {   
                   var pivot = $("#PivotGrid1").ejPivotGrid("instance");   
                    pivot.model.dataSource.data = result;   
                    pivot._load();   
                },   
                error: function (jqXHR, textStatus, errorThrown) {   
                    alert("KO");   
                    console.log(textStatus + ' ' + errorThrown);   
                }   
            });   
            e.preventDefault();//To privent page reload   
        });   
    })   
</script>   
  
   
Meanwhile, we have provided the view page with above information for your convenience. Please find the sample page in the below link.   
   
   
Note: kindly replace the provided view page(PivotGridFeatures.cshtml) before running the sample.   
   
Please let us know if you need any further assistance.   
   
Regards,   
Sastha Prathap S. 


Manolo
Replied On March 21, 2017 05:24 AM

ok! it works! thanks

But other question.

How can I format date values? I set local to spanish, but I can't format date values


Ramesh Govindaraj [Syncfusion]
Replied On March 22, 2017 08:25 AM

Hi Manolo, 

We regret you to inform that, for relational data source, it is not possible to change row/column headers to required format in PivotGrid internally. But, it can be achieved in sample level by following ways. 
1.       You can directly bind the raw data-set (JOSN data) in desire format for date field to display in PivotGrid. (or) 
2.       You can utilize the event “load” to convert the desired date format for desired headers then bind it to PivotGrid. Please find the below code example to achieve this. 
 
Sample Code: 
 
 
    function onLoad(args) { 
        for (var i = 0; i < pivot_dataset.length; i++) { 
            var val = (pivot_dataset[i])["Date"];     // Select field to set desired date format. 
            val = new Date(val); 
            //ej.widgetBase.formatting("{0:" + DateTime format string + "}", value, localization); 
            pivot_dataset[i].Date = ej.widgetBase.formatting("{0:" + "yyyy'-'MM'-'dd'T'HH':'mm':'ss'Z'" + "}", val, "es-ES");   // To convert the date format as per the applied format string and localization. 
        } 
        args.model.dataSource.data = pivot_dataset; 
    } 
 
 

Thanks and Regards, 
Ramesh G 


Manolo
Replied On March 23, 2017 03:54 AM

Thanks a lot

Ramesh Govindaraj [Syncfusion]
Replied On March 24, 2017 02:21 AM

Hi Manolo, 

Thanks for the reply. Please let us know if you have any questions on this. 

Ramesh G 


Martin R
Replied On December 4, 2017 09:01 AM

Hello,

I have problem with this JS solution with onLoad(args) method is that sorting of this column is alphabetical, not by date. So earlier is 01/12/2017 than 31/11/2017... How can i solve this? 

Best regards,

Martin Rasovsky

Developer

M.Rasovsky@copsgmbh.com

 

COPS_Logo_Web.png

COPS Financial Systems s.r.o.

T

+42 (05) 11205278

Purkynova 127

M

+420 605 219 155

612 00 Brno, Czech Republic

www.copsgmbh.com

 

Commercial register: 62913883

UID: CZ 62913883

Register court: Mĕstským soudem v Praze 


Manikandan Murugesan [Syncfusion]
Replied On December 5, 2017 07:45 AM

Hi Martin, 

The reported problem is a known issue and it is fixed in our Essential Studio 2017 Volume 4 Release v15.4.0.17. So, kindly upgrade the product version to resolve this problem. You can download the Essential Studio 2017 Volume 4 release v15.4.0.17 under the following link. 

In the sample, you need to set “format” and “formatString” for appropriate Column or Row field by using “Load” event. Please refer below code snippet. 
 
Code Snippet: [cshtml] 
@Html.EJ().Pivot().PivotGrid("PivotGrid1").EnableGroupingBar(true).ClientSideEvents(clientSideEvents => clientSideEvents.Load("onLoad")).DataSource(dataSource => dataSource.Rows(rows => { rows.FieldName("Date").FieldCaption("Date").Add(); }).Columns(columns => { columns.FieldName("Product").FieldCaption("Product").Add(); }).Values(values => { values.FieldName("Amount").Add(); values.FieldName("Quantity").Add(); }).Filters(filters => { filters.FieldName("Country").FieldCaption("Country").Add(); })) 
 
Code Snippet: [javascript] 
function onLoad(args) { 
        args.model.dataSource.rows[0]["format"] = "date"; 
        args.model.dataSource.rows[0]["formatString"] = "dd-MM-yyyy"; 
} 
 

Meanwhile, we have prepared sample as per your requirement by using CDN link. Please find the sample in below link. 

Please let us know if you have any other queries. 

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.

;