Custom XML binding – Grid

[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. 🙂

[DimitarParticipant]

Hello kakao,

Here is how to load the data only once and use it for the cells and aggregates:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var originalSource = {
                datatype: "json",
                url: 'demofile.txt',
                root: 'data'
            };

            var dataAdapter = new $.jqx.dataAdapter(originalSource, { autoBind: true, loadComplete: function (loadedData) {
                var sourcis = {
                    datatype: "json",
                    localdata: loadedData.data.totaltransactions,
                    datafields: [{
                        name: 'end',
                        type: 'date'
                    }, {
                        name: 'mark',
                        type: 'string'
                    }, {
                        name: 'income',
                        type: 'string'
                    }, {
                        name: 'outlay',
                        type: 'string'
                    }]
                };

                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'
                    }],
                    localdata: loadedData.data.transactions
                };

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

                $("#jqxgrid").jqxGrid({
                    width: '700px',
                    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 record = data;
                                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;
                        }
                    }]
                });
            }
            });
        });  
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[kakaoParticipant]

Works great!
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)?

[DimitarParticipant]

Hi kakao,

On our side, the aggregates disappear when the columns, not the browser window, are resized. Here is a workaround for this:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.aggregates.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var originalSource = {
                datatype: "json",
                url: '../sampledata/beverages.txt',
                root: 'data'
            };

            var dataAdapter = new $.jqx.dataAdapter(originalSource, { autoBind: true, loadComplete: function (loadedData) {
                var sourcis = {
                    datatype: "json",
                    localdata: loadedData.data.totaltransactions,
                    datafields: [{
                        name: 'end',
                        type: 'date'
                    }, {
                        name: 'mark',
                        type: 'string'
                    }, {
                        name: 'income',
                        type: 'string'
                    }, {
                        name: 'outlay',
                        type: 'string'
                    }]
                };

                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'
                    }],
                    localdata: loadedData.data.transactions
                };

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

                var aggr2;
                var aggr3;
                var aggr4;
                var aggr5;

                $("#jqxgrid").jqxGrid({
                    width: '700px',
                    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 record = data;
                                aggr2 = record.end;
                                aggr3 = record.mark;
                                aggr4 = record.income;
                                aggr5 = record.outlay;
                                $("#text2").text(aggr2);
                                $("#text3").text(aggr3);
                                $("#text4").text(aggr4);
                                $("#text5").text(aggr5);
                            }
                        });
                    },
                    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;
                        }
                    }]
                });

                $("#jqxgrid").on("columnresized", function (event) {
                    $("#text2").text(aggr2);
                    $("#text3").text(aggr3);
                    $("#text4").text(aggr4);
                    $("#text5").text(aggr5);
                });
            }
            });
        });  
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[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!

[Author]

Posts