Summary in footer row

[Punkerr]

Hi everyone!

I tried to set footer to show total price, but I've not success. Here is an example code, any idea?

Code:

$('#dg').edatagrid({
    title: 'eDataGrid',
    width:400,
    height:250,
    singleSelect:true,
    showFooter: 'true',
    frozenColumns:[[
        {field:'itemid',title:'Item ID',width:80},
        {field:'productid',title:'Product ID',width:100,editor:'text'}
    ]],
    columns:[[
        {field:'listprice',title:'List Price',width:80,align:'right',editor:{type:'numberbox',options:{precision:1}}},
        {field:'unitcost',title:'Unit Cost',width:80,align:'right',editor:'numberbox'}
    ]],
    view:detailview,
    detailFormatter: function(rowIndex, rowData){
         return '<div style="padding:5px">' +
                '<p>Attribute: ' + rowData.attr1 + '</p>' +
                '<p>Status: ' + rowData.status + '</p>' +
                '</div>';
    }
    
}).edatagrid('loadData', [
    {"productid":"FI-SW-01","unitcost":10.00,"status":"P","listprice":16.50,"attr1":"Large","itemid":"EST-1"},
    {"productid":"K9-DL-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-2"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Venomless","itemid":"EST-3"},
    {"productid":"RP-LI-02","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Green Adult","itemid":"EST-5"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":58.50,"attr1":"Tailless","itemid":"EST-6"},
    {"productid":"FL-DSH-01","unitcost":12.00,"status":"P","listprice":23.50,"attr1":"With tail","itemid":"EST-7"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Female","itemid":"EST-8"},
    {"productid":"FL-DLH-02","unitcost":12.00,"status":"P","listprice":93.50,"attr1":"Adult Male","itemid":"EST-9"},
    {"productid":"RP-SN-01","unitcost":12.00,"status":"P","listprice":18.50,"attr1":"Rattleless","itemid":"EST-4"},
    {"productid":"AV-CB-01","unitcost":92.00,"status":"P","listprice":193.50,"attr1":"Adult Male","itemid":"EST-10"}
]);
dg.datagrid('reloadFooter', [{name:'TotalPrice',listprice:listprice}]);

I searched examples... and find one in shop cart (draggable demo) but I couldn't set it.

[stworthy]

Please refer to http://jsfiddle.net/DQMQ9/. It works fine.

[Punkerr]

Great, thats works... you always helping us.

By the way, I made a function like this:

Code:

		function total(){  
			var dg = $('#dg'); 		
			var data = dg.datagrid('getData');  
			dg.datagrid('loadData', data);  
			var total = new Array();
			var nofrozen = dg.datagrid('getColumnFields'); 
			for(var i=0; i<nofrozen.length; i++){
				total[i]=0;
			}
			var rows = dg.datagrid('getRows');  
			for(var i=0; i<rows.length; i++){  
				total[0]+= rows[i].a301;  
				total[1]+= rows[i].a302;  
				total[2]+= rows[i].a303;  
				total[3]+= rows[i].a304;  
				total[4]+= rows[i].a307;  
				total[5]+= rows[i].a309;  
				total[6]+= rows[i].a310;  
			}  
			dg.datagrid('reloadFooter', [{articulo:'Total',a301:total[0],a302:total[1],a303:total[2],a304:total[3],a307:total[4],a309:total[5],a310:total[6]}]);
		}

It works really great, but I have two questions:

1- I have a data grid with navigation by 15 rows per page. My function summarize only the current 15 rows and excluded the next 2k rows.
¿There is another way to summarize all rows and not only the rows in current view?

2- Noob question: I tried to call the total function in onLoadSuccess... but not success. ¿how call the function after datagrid load?

Important Note: When I enabled detailview and showfooter, I saw one space in the footer  generated by one square (it's maybe detailview field)... but the position is on the right of the "Total" word in the footer and not on the left.

I hope you can answer my questions.

Thanks!!

[stworthy]

You need to summarize all rows and before preparing the json data to load. Here is the example shows how to load rows and footer together.

Code:

$('#dg').edatagrid('loadData', {"total":xx,"rows":[...],"footer":[{...}]});

If the footer rows don't display properly, please download the latest detailview file from http://www.jeasyui.com/extension/downloads/jquery-easyui-datagridview.zip.