[kakaoParticipant]

Oh, I forgot to mention that grid width is set to 100%.
Anyway, for now all your sollution works. I put $(“#jqxgrid”).on(“columnresized”.. in $(window).resize which fires right after resizing. Isn’t the best way, but at last aggregated values are visible after resizing browsers window.
Thank You, Dimitar!

[kakaoParticipant]

Turn out that in grid bottom is necessary to show values from json. As we know (#52938) with #text.. aggregated values will disappear after browser window resize.
I tried to experiment with custom aggregates and aggregates renderer but without success.
Is there some solution who will show values even if browsers window size is changed? Or just only with statusbar who have rows (and auto width like grid colums)?

[kakaoParticipant]

Works great!
Thank You, Dimitar!

[kakaoParticipant]

So what You’re saying is that json structure / formating must be changed?
Now I use several data sources / adapters for grid (transactions, totaltransactions records, etc), for dropdown lists (for example, mark) and for information display on html tables etc. (maindata user, …). If it’s possible to make with one request to server, that would be great.
I hope that now code will be mouch clear to understand.

       {
  "data": {
    "maindata": {
      "user": "USER LARIS",
      "code": "25554197",
      "metadata": "2013"
    },
    "transactions": [
      {
        "start": "2013-01-01",
        "end": "2013-01-21",
        "mark": "",
        "income": "1000.00",
        "outlay": "0.00"
      },
      {
        "start": "2012-01-01",
        "end": "2012-01-11",
        "mark": "asdf",
        "income": "1100.00",
        "outlay": "0.00"
      },
      {
        "start": "2014-01-01",
        "end": "2014-01-01",
        "mark": "qwer",
        "income": "1200.00",
        "outlay": "10.00"
      }
    ],
    "totaltransactions": {
      "end": "500.00",
      "mark": "Passed",
      "income": "270.00",
      "outlay": "204.00"
    }
  }
}

$(document).ready(function () {
    var source = {
        datatype: "json",
        datafields: [{
            name: 'start',
            type: 'date',
            format: 'dd.MM.yyyy'
        }, {
            name: 'end',
            type: 'date',
            format: 'dd.MM.yyyy'
        }, {
            name: 'mark',
            type: 'string'
        }, {
            name: 'income',
            type: 'string'
        }, {
            name: 'outlay',
            type: 'string'
        }],
        url: 'demofile.txt',
        //root: 'roote'
        root: 'data>transactions'
    };

    var Adapter = new $.jqx.dataAdapter(source);

    $("#jqxgrid").jqxGrid({
        width: '100%',
        source: Adapter,
        autorowheight: true,
        columnsresize: true,
        autoheight: true,
        showstatusbar: true,
        showaggregates: true,

        ready: function () {
            var aggrDataAdapter = new $.jqx.dataAdapter(sourcis, {
                autoBind: true,
                loadComplete: function (data) {
                    var kopa;
                    var records = aggrDataAdapter.records;
                    var record = records[0];
                    var endaggr = record.end;
                    var markaggr = record.mark;
                    var incomeaggr = record.income;
                    var outlayagrr = record.outlay;
                    $("#text2").text(endaggr);
                    $("#text3").text(markaggr);
                    $("#text4").text(incomeaggr);
                    $("#text5").text(outlayagrr);
                }
            });
        },
        columns: [{
            text: 'Start date',
            datafield: 'start',
            width: '20%',
            cellsformat: 'dd.MM.yyyy',
            aggregatesrenderer: function (aggregates, column, element) {
                var renderstring = "<div style='width: 100%; height: 100%; margin: 5px;'><b>Togethe:</b></div>";
                return renderstring;
            }
        }, {
            text: 'End date',
            datafield: 'end',
            width: '20%',
            cellsformat: 'dd.MM.yyyy',
            aggregates: [{
                '': function (aggregatedValue, currentValue, column, record) {
                    var aggregatedValue;
                    return aggregatedValue;
                }
            }],
            aggregatesrenderer: function (aggregates) {
                var aggregatedValue = '<div id="text2" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                return aggregatedValue;
            }
        }, {
            text: 'Mark / type',
            datafield: 'mark',
            width: '20%',
            aggregates: [{
                '': function (aggregatedValue, currentValue, column, record) {
                    var aggregatedValue;
                    return aggregatedValue;
                }
            }],
            aggregatesrenderer: function (aggregates) {
                var aggregatedValue = '<div id="text3" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                return aggregatedValue;
            }
        }, {
            text: 'Income',
            datafield: 'income',
            width: '20%',
            aggregates: [{
                '': function (aggregatedValue, currentValue, column, record) {
                    var aggregatedValue;
                    return aggregatedValue;
                }
            }],
            aggregatesrenderer: function (aggregates) {
                var aggregatedValue = '<div id="text4" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                return aggregatedValue;
            }
        }, {
            text: 'Outlay',
            datafield: 'outlay',
            width: '20%',
            aggregates: [{
                '': function (aggregatedValue, currentValue, column, record) {
                    var aggregatedValue;
                    return aggregatedValue;
                }
            }],
            aggregatesrenderer: function (aggregates) {
                var aggregatedValue = '<div id="text5" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                return aggregatedValue;
            }
        }]
    });

    var sourcis = {
        datatype: "json",
        url: 'demofile.txt',
        root: 'data>totaltransactions',
        datafields: [{
            name: 'end',
            type: 'date'
        }, {
            name: 'mark',
            type: 'string'
        }, {
            name: 'income',
            type: 'string'
        }, {
            name: 'outlay',
            type: 'string'
        }]
    };
});

P.S.
Please ignore aggregated date formating and Mark aggregated value (1360.00 would be PASSED) in this sample code.

[kakaoParticipant]

Thanks!

[kakaoParticipant]

Yes, that is what I need, code example to load in the loadedData, re-formating (and binding)!
How I understand and tried – loaded data in the loadedData like Your example (#52485), then I created new source (with my datafields, root and datatype: “json”, localdata: loadedData, not sure if I used right last two), then I created new dataAdapter with created source and at last I defined source with created dataAdapter to grid. And i get no data.

[kakaoParticipant]

As always, best answers!
2nd and 3rd works great, but I could not make out with 1st – loadedData.
Can You give some example code for binding data to grid?

[kakaoParticipant]

Hello!
jqWidgets are working well for my project!
Maybe if all will work great, license purchase will be considered and things will go up, but before that I have some incomplete puzzles. Everything else is ok, but major problem is with binding.
In project are some parameters which are sent to server (using processdata: function (data) { … } ), but as You all know, 1 request to server is better than two or more.
1) Is there some way to map aaaa records and bbbb records in one source, that let bind all below values? Or some json structure edit for below json?
2) What is the best way to start grid binding (so sending server request) by button click not by $(document).ready( … ) ?
3) These aggregate values (except FIRST) in grid are showing until browsers window size aren’t changed, then they dissapear. Don’t know why.
There is some simple my structure examples:
– json (demofile.txt):

{
  "roote": {
    "maindata": {
      "some": "USER LARIS",
      "other": "25554197",
      "smth": "2013"
    },
    "aaaa": [
      {
        "a": "2013-01-01",
        "b": "2013-01-21",
        "c": "",
        "d": "1000.00",
        "e": "0.00"
      },
      {
        "a": "2012-01-01",
        "b": "2012-01-11",
        "c": "asdf",
        "d": "1100.00",
        "e": "0.00"
      },
      {
        "a": "2014-01-01",
        "b": "2014-01-01",
        "c": "qwer",
        "d": "1200.00",
        "e": "10.00"
      }
    ],
    "bbbb": {
      "b": "500.00",
      "c": "1360.00",
      "d": "270.00",
      "e": "204.00"
    }
  }
}

– code:

        $(document).ready(function () {
            var source = {
                datatype: "json",
                datafields: [
                // without any field declaration - works for aaaa if root : roote>aaaa

                // works for aaaa if root : roote>aaaa
                    {
                        name: 'a',
                        type: 'date',
                        format: 'dd.MM.yyyy'
                    }, {
                        name: 'b',
                        type: 'date',
                        format: 'dd.MM.yyyy'
                    }, {
                        name: 'c',
                        type: 'string'
                    }, {
                        name: 'd',
                        type: 'string'
                    }, {
                        name: 'e',
                        type: 'string'
                    }

                    // works if root : roote
                    //{ name: 'b', type: 'date', format: 'dd.MM.yyyy', map:'bbbb>b' },
                    //{ name: 'c', type: 'string', map:'bbbb>b' },
                    //{ name: 'd', type: 'string', map:'bbbb>c' },
                    //{ name: 'e', type: 'string', map:'bbbb>d' },
                    //{ name: 'nodokl_dekl', type: 'string', map:'bbbb>e' }

                    // didn't work if root : roote and root : roote>aaaa
                    //{ name: 'a', type: 'date', format: 'dd.MM.yyyy', map:'aaaa>a' },
                    //{ name: 'b', type: 'date', format: 'dd.MM.yyyy', map:'aaaa>b' },
                    //{ name: 'c', type: 'string', map:'aaaa>c' },
                    //{ name: 'd', type: 'string', map:'aaaa>d' },
                    //{ name: 'e', type: 'string', map:'aaaa>e' }

                ],
                url: 'demofile.txt',
                //root: 'roote'
                root: 'roote>aaaa'
            };

            var Adapter = new $.jqx.dataAdapter(source);

            $("#jqxgrid").jqxGrid({
                theme: 'energyblue',
                width: '100%',
                columnsheight: 120,
                source: Adapter,
                autorowheight: true,
                columnsresize: true,
                autoheight: true,
                showstatusbar: true,
                showaggregates: true,

                ready: function () {
                    var aggrDataAdapter = new $.jqx.dataAdapter(sourcis, {
                        autoBind: true,
                        loadComplete: function (data) {
                            var kopa;
                            var records = aggrDataAdapter.records;
                            var record = records[0];
                            var bb = record.b;
                            var cc = record.c;
                            var dd = record.d;
                            var ee = record.e;
                            $("#text2").text(bb);
                            $("#text3").text(cc);
                            $("#text4").text(dd);
                            $("#text5").text(ee);
                        }
                    });
                },
                columns: [{
                        text: 'FIRST',
                        datafield: 'a',
                        width: '20%',
                        aggregates: [{
                            '<b>Some text</b>': function (aggregatedValue, currentValue, column, record) {
                                return "";
                            }
                        }]
                    },
                    {
                        text: 'SECOND',
                        datafield: 'b',
                        width: '20%',
                        aggregates: [{
                            '': function (aggregatedValue, currentValue, column, record) {
                                var aggregatedValue;
                                return aggregatedValue;
                            }
                        }],
                        aggregatesrenderer: function (aggregates) {
                            var aggregatedValue = '<div id="text2" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                            return aggregatedValue;
                        }
                    }, {
                        text: 'THIRD',
                        datafield: 'c',
                        width: '20%',
                        aggregates: [{
                            '': function (aggregatedValue, currentValue, column, record) {
                                var aggregatedValue;
                                return aggregatedValue;
                            }
                        }],
                        aggregatesrenderer: function (aggregates) {
                            var aggregatedValue = '<div id="text3" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                            return aggregatedValue;
                        }
                    }, {
                        text: 'FOURTH',
                        datafield: 'd',
                        width: '20%',
                        aggregates: [{
                            '': function (aggregatedValue, currentValue, column, record) {
                                var aggregatedValue;
                                return aggregatedValue;
                            }
                        }],
                        aggregatesrenderer: function (aggregates) {
                            var aggregatedValue = '<div id="text4" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                            return aggregatedValue;
                        }
                    },
                    {
                        text: 'FIFTH',
                        datafield: 'e',
                        width: '20%',
                        aggregates: [{
                            '': function (aggregatedValue, currentValue, column, record) {
                                var aggregatedValue;
                                return aggregatedValue;
                            }
                        }],
                        aggregatesrenderer: function (aggregates) {
                            var aggregatedValue = '<div id="text5" style="float: right; margin: 4px; overflow: hidden;">' + '</div>';
                            return aggregatedValue;
                        }
                    }
                ]
            });

            var sourcis = {
                datatype: "json",
                url: 'demofile.txt',
                root: 'roote>bbbb',
                datafields: [{
                    name: 'b',
                    type: 'date'
                }, {
                    name: 'c',
                    type: 'string'
                }, {
                    name: 'd',
                    type: 'string'
                }, {
                    name: 'e',
                    type: 'string'
                }]
            };
        });

[kakaoParticipant]

Dissapear just custom aggregates, not all (sum’s stay).

[kakaoParticipant]

I like your solution, Dimitar!
It’s working!
But until I change source to json datatype and take it from *.txt file, aggregates dissapear.That’s interesting!

[kakaoParticipant]

My problem is solved, now everything is displayed.
I didn’t use aggregatesrenderer and all necessary values put in aggregates: [{ ‘<b>Total:</b>’: function (aggregatedValu …

[kakaoParticipant]

Im tried & looked through forum how to bind in each (almost each) column aggregate field some other dataAdapter values (not from Grids dataAdapter, from different xml/json), but with no success.
Is there some good example, even small?

[kakaoParticipant]

Is there any possibility to show this aggregatesrenderer on print?
Default aggregates are showing, but mentioned method didn’t show in print window.

[kakaoParticipant]

Thanks, master Peter Stoev!
It’s working!
I forget this simmilar solution!

[kakaoParticipant]

Is there any solutions to map ‘transaction’ / ‘together’ records?
‘maindata’ is necessary for other operations, so must leave in file.
Or there are bad json data formats?

{
  "filer": {
    "-xmlns:xsi": "http://www.w3.org/2001/XMLSchema-instance",
    "-xsi:noNamespaceSchemaLocation": "filer.xsd",
    "maindata": {
      "name": "jasmine",
      "pk": "0210385027549",
      "k": "2013",
      "time1": "2014-02-20T17:09:07",
      "time2": "2014-01-07T16:44:02"
    },
    "data": {
      "transactions": {
        "transaction": [
        {
            "from": "2013-10-29",
            "till": "2013-10-29",
            "type": "A",
            "income": "10.00",
            "outlay": "0.00",
            "dek": "0.00",
            "currency": "EUR"
          },
          {
            "from": "2013-10-31",
            "till": "2013-10-31",
            "type": "N",
            "income": "50.00",
            "outlay": "500.00",
            "dek": "0.00",
            "currency": "EUR"
          },
          {
            "from": "2013-01-01",
            "till": "2013-01-31",
            "income": "1800.00",
            "outlay": "0.00",
            "dek": "270.00",
            "currency": "EUR"
          },
          {
            "from": "2013-12-03",
            "till": "2013-12-29",
            "income": "1300.00",
            "outcome": "700.00",
            "dek": "130.00",
            "currency": "EUR"
          }
        ]
      },
      "together": {
        "income": "1860.00",
        "outlay": "500.00",
        "ap_income": "1360.00",
        "dek": "270.00",
        "ap_val": "204.00",
        "up_val": "66.00",
        "currency": "EUR"
      }
    }
  }
}

var source =
                          {
                              datatype: "json",
                              url: 'storefile.txt',
                              datafields: [
                              { name: 'from', type: 'date', format: 'dd.MM.yyyy', map: 'data>transactions>transaction>from' },
                              { name: 'till', type: 'date', format: 'dd.MM.yyyy', map: 'data>transactions>transaction>' },
                              { name: 'type', type: 'string', map: 'data>transactions>transaction>type' },
                              { name: 'income', type: 'string', map: 'data>transactions>transaction>income' },
                              { name: 'outcome', type: 'string', map: 'data>transactions>transaction>outcome' },
                              { name: 'dek', type: 'string', map: 'data>transactions>transaction>dek' },
                              {name: 'currency', type: 'string', map: 'data>transactions>transaction>currency' }
                              ]
                          };

[Author]

Posts