jQuery UI Widgets Forums Grid Implementation using aggregates

This topic contains 8 replies, has 2 voices, and was last updated by  ssp 10 years, 10 months ago.

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Implementation using aggregates #52407

    ssp
    Participant

    Hi,

    I am referring to the demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/aggregates.htm?arctic
    Plz let me know Is it possible to implement the below requirement ??
    I have two columns :
    Type | Value
    —————————————————
    Direct | 10
    Direct | 20
    Direct | 20
    Indirect | 10
    —————————————————-
    Total: | Direct:50
    | Indirect:10

    Implementation using aggregates #52469

    Dimitar
    Participant

    Hello ssp,

    Here is how to achieve 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/jqxdata.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.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = [{
                    Type: "Direct",
                    Value: 10
                }, {
                    Type: "Direct",
                    Value: 20
                }, {
                    Type: "Direct",
                    Value: 20
                }, {
                    Type: "Indirect",
                    Value: 10
                }];
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'Type', type: 'string' },
                        { name: 'Value', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command   
                        commit(true);
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 180,
                    autoheight: true,
                    source: dataAdapter,
                    showstatusbar: true,
                    statusbarheight: 45,
                    altrows: true,
                    showaggregates: true,
                    columns: [
                        { text: 'Type', columntype: 'textbox', datafield: 'Type', width: 90 },
                        { text: 'Value', datafield: 'Value', columntype: 'textbox', width: 90,
                            aggregates: [{
                                'Direct': function (aggregatedValue, currentValue, datafield, rowdata) {
                                    if (rowdata.Type == "Direct") {
                                        return aggregatedValue + currentValue;
                                    }
                                    return aggregatedValue;
                                }
                            }, {
                                'Indirect': function (aggregatedValue, currentValue, datafield, rowdata) {
                                    if (rowdata.Type == "Indirect") {
                                        return aggregatedValue + currentValue;
                                    }
                                    return aggregatedValue;
                                }
                            }]
                        }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Implementation using aggregates #52566

    ssp
    Participant

    Hi Dimitar,
    I am able to do the implementation using your given demo,
    but on initial loading of empty columns, the aggregate is displayed as [object Object]:0,
    only once I enter any values in the cells of the grid, I am able to get the output in proper format like:
    | Direct:50
    | Indirect:10

    How will I get the proper format for empty columns on initial page load like:
    | Direct:0.0
    | Indirect:0.0

    Do I have to use aggregatesrenderer? If yes, plz let me know how can I achieve this??

    Thanks & Regards,
    ssp

    Implementation using aggregates #52604

    Dimitar
    Participant

    Hello ssp,

    If the grid is empty (“No data to display”) neither aggregates nor aggregatesrenderer is called. Do you mean the cells of the columns are blank? Please make sure you are using the latest version of jQWidgets (3.2.2).

    Best Regards,
    Dimitar

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

    Implementation using aggregates #52865

    ssp
    Participant

    Hello Dimitar,

    Exactly! I meant when the cells of the columns are empty…I get [object Object]:0,
    but for the columns with data in any cell, it is properly displayed
    also once I enter data in the empty column, it displays properly as
    | Direct:40
    | Indirect:10

    But for empty column this issue is occuring,
    plz let me know!!

    Thanks & Regards,
    ssp

    Implementation using aggregates #52870

    Dimitar
    Participant

    Hi ssp,

    Are you sure you are using version 3.2.2 of jQWidgets? Do you initialize the grid without a data source or from a source containing empty values for the cells? In the former case, the grid should show “No data to display” and neither aggregates nor aggregatesrenderer will be called.

    In the latter case, the aggregates display correctly:
    Direct:0
    Indirect:0

    Here is an example:

    <!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/jqxdata.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.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = [{
                    Type: "",
                    Value: ""
                }];
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'Type', type: 'string' },
                        { name: 'Value', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command   
                        commit(true);
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 180,
                    autoheight: true,
                    source: dataAdapter,
                    showstatusbar: true,
                    statusbarheight: 45,
                    altrows: true,
                    showaggregates: true,
                    columns: [
                        { text: 'Type', columntype: 'textbox', datafield: 'Type', width: 90 },
                        { text: 'Value', datafield: 'Value', columntype: 'textbox', width: 90,
                            aggregates: [{
                                'Direct': function (aggregatedValue, currentValue, datafield, rowdata) {
                                    if (rowdata.Type == "Direct") {
                                        return aggregatedValue + currentValue;
                                    }
                                    return aggregatedValue;
                                }
                            }, {
                                'Indirect': function (aggregatedValue, currentValue, datafield, rowdata) {
                                    if (rowdata.Type == "Indirect") {
                                        return aggregatedValue + currentValue;
                                    }
                                    return aggregatedValue;
                                }
                            }]
                        }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Implementation using aggregates #52875

    ssp
    Participant

    Dimitar,

    I am using version 3.2.1 of jQWidgets throughout my application,
    And for empty grid, I do get the msg “No data to display”
    I am not referring to the empty grid here, rather when few columns of the grid have data and few columns are empty!?

    var wklyData =ColGridDataField;
    
    // prepare the data
       var wklysrc =
       {
           datatype: "json",
           datafields:dataFieldColumns,
       
           localdata: wklyData,
           addrow: function (rowid, rowdata, position, commit) {
          
               commit(true);
           }
       }; 
    
    var dataAdapter2 = new $.jqx.dataAdapter(wklysrc, {
       downloadComplete: function (wklyData, status, xhr) { },
       loadComplete: function (wklyData) { },
       loadError: function (xhr, status, error) { }
    });
    
    $("#jqxgridWeekly").jqxGrid(
           {
        	   width: 1015,               
               source: dataAdapter2,
    ...

    aggregates: [{ 'D':
    	 			function (aggregatedValue, currentValue,column,record) {
    	       	   
                    if(record['LPN'] != null && record['LPN'] != "")
                    {
                  	  // aggregatedValue=aggregatedValue+aggregatedValue;
                    	//alert("aggr:"+aggregatedValue+"curr:"+currentValue);
                    	if(currentValue == ""){
                    		currentValue =0;
                    	}
                         return aggregatedValue+currentValue;
                     }
                  //  alert("ret:"+aggregatedValue);
                     return aggregatedValue;
                 }
             },
             { 'T':
                 function (aggregatedValue, currentValue,column,record) {
          	 // if( record['LPN'] == "")
             //    {
          		 if(currentValue == ""){
             		currentValue =0;
             	}
                         return aggregatedValue + currentValue;
               //      }
    
                     return aggregatedValue;
                 }
    	         }
    	        ],

    ….

    Implementation using aggregates #52932

    Dimitar
    Participant

    Hi ssp,

    There is no such behaviour on our side, as you can see from this example:

    <!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/jqxdata.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.aggregates.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = [{
                    Type: "",
                    Value: ""
                }, {
                    Type: "Direct",
                    Value: 20
                }, {
                    Type: "",
                    Value: ""
                }, {
                    Type: "Direct",
                    Value: 30
                }, {
                    Type: "Indirect",
                    Value: 25
                }];
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    datafields:
                    [
                        { name: 'Type', type: 'string' },
                        { name: 'Value', type: 'number' }
                    ],
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command   
                        commit(true);
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 180,
                    autoheight: true,
                    source: dataAdapter,
                    showstatusbar: true,
                    statusbarheight: 45,
                    altrows: true,
                    showaggregates: true,
                    columns: [
                        { text: 'Type', columntype: 'textbox', datafield: 'Type', width: 90 },
                        { text: 'Value', datafield: 'Value', columntype: 'textbox', width: 90,
                            aggregates: [{
                                'Direct': function (aggregatedValue, currentValue, datafield, rowdata) {
                                    if (rowdata.Type == "Direct") {
                                        return aggregatedValue + currentValue;
                                    }
                                    return aggregatedValue;
                                }
                            }, {
                                'Indirect': function (aggregatedValue, currentValue, datafield, rowdata) {
                                    if (rowdata.Type == "Indirect") {
                                        return aggregatedValue + currentValue;
                                    }
                                    return aggregatedValue;
                                }
                            }]
                        }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id='jqxWidget'>
            <div id="jqxgrid">
            </div>
        </div>
    </body>
    </html>

    Your issue may come from incorrect datafields or columns settings.

    Best Regards,
    Dimitar

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

    Implementation using aggregates #53081

    ssp
    Participant

    Hi Dimitar,

    This was happening bcz in the initial loading of the grid, the empty cells were initialized to null,
    this issue is solved when empty cells are loaded with empty string (“”)

    Thanks & Regards,
    ssp

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.