jQuery UI Widgets Forums Grid Custom XML binding – Grid

This topic contains 20 replies, has 2 voices, and was last updated by  kakao 9 years, 10 months ago.

Viewing 6 posts - 16 through 21 (of 21 total)
  • Author
  • Custom XML binding – Grid #52888

    kakao
    Participant

    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'
            }]
        };
    });

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

    Custom XML binding – Grid #52938

    Dimitar
    Participant

    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/

    Custom XML binding – Grid #53228

    kakao
    Participant

    Works great!
    Thank You, Dimitar!

    Custom XML binding – Grid #54173

    kakao
    Participant

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

    Custom XML binding – Grid #54320

    Dimitar
    Participant

    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/

    Custom XML binding – Grid #54321

    kakao
    Participant

    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!

Viewing 6 posts - 16 through 21 (of 21 total)

You must be logged in to reply to this topic.