JQgrid total amount row - json

iv seen an example by #Oleg for row total sum in jqgrid but i tried to apply it and it wont work i have the following grid i need to calculate the amount value for it.
colNames: ['ID', 'FTE', 'Workload'],
colModel: [
{ name: 'ID', index: 'ID', width: 200, align: 'left', hidden: true },
{ name: 'FTEValue', index: 'FTEValue', width: 200, align: 'left', formatter: 'number' },
{ name: 'Workload', index: 'Workload', width: 200, align: 'left' },
caption: "Activity FTE",
gridview: true,
rownumbers: true,
rownumWidth: 40,
scroll: 0,
rowNum: 100,
sortname: 'ID',
pager: '#pager',
sortorder: "asc",
viewrecords: true,
autowidth: true,
height: '100%',
footerrow: true,
jsonReader: { root: "GridData", page: "CurrentPage", total: "TotalPages", records: "TotalRecords", repeatitems: false, id: "0" }
};
DutyFTEGrid.prototype.SetupGrid = function (selector) {
jQuery(selector).html('<table id="grid"></table><div id="pager"></div>');
var grid = jQuery("#grid").jqGrid(this.gridConfiguration);
jQuery("#grid").jqGrid('navGrid', '#pager',
{ edit: false, add: false, search: false }, {}, {},
{ // Delete parameters
ajaxDelOptions: { contentType: "application/json" },
mtype: "DELETE",
serializeDelData: function () {
return "";
},
onclickSubmit: function (params, postdata) {
params.url = serviceURL + 'DutyFTE(' + encodeURIComponent(postdata) + ')/';
}
});
var grid = $("#grid");
var sum = grid.jqGrid('getCol', 'FTE', false, 'sum');
grid.jqGrid('footerData', 'set', { DriverEn: 'Total FTE:', FTEValue: sum });
};
Oleg your help please, i have tried your example but it didnt work for some reason.

If I understand you correct you want to place in the footer getCol and footerData methods:
var grid = $("#list"),
sum = grid.jqGrid('getCol', 'amount', false, 'sum');
grid.jqGrid('footerData','set', {ID: 'Total:', amount: sum});
The getCol can be used to calculate the sum of all numbers from the 'amount' column and with respect of footerData you can place at the bottom of the 'ID' column the text "Total:" and at the bottom of 'amount' column.
UPDATED: Probably you have problems because you place the code in the wrong place. The most safe place for the code is loadComplete event handler. Look at the demo.

Total of a price column:
//Count total for a price column
var total = 0;
$('#table tr').each(function(){
//cells that contains the price
var tdprice = $(this).find("td:eq(2)").html();
//Sum it up!
if (isNaN(tdprice)){ total += parseInt(tdprice); }
});
alert(total + "$");

Related

Angular js ui grid issue of having white space after the column name row

enter image description here
A large white space after the column name row in the uigrid and then after all the datas are displayed,how can i solve this issue,anybody please help me.
Angular //////////////
app.controller('MainCtrl', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
showColumnFooter: true,
exporterMenuCsv: true,
enableGridMenu: true,
enableFiltering: true,
showGridFooter: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
},
paginationPageSizes: [25, 50, 75],
paginationPageSize: 10,
showColumnFooter: true,
columnDefs: [
{
field: 'Name',
},
{
field: 'IE',
visible: false,
enableCellEdit: false,
enableFiltering: false
},
{
field: 'Amount',
enableFiltering: false,
}
]
};
var gridOptions = [];
$scope.gridOptions.data = 'gridData';
Here is my html and angular code i was currently working .

Add column values together in jqGrid and insert into label

I have a jqGrid inside of a div orderForm that can have a verifying number of rows added to it by a user.
What I would like to do is: whenever a user adds a row to the jqGrid, the totals in the TOTAL_LINE_AMOUNT column are added together and inserted into the label Subtotal
$('#orderForm).jqGrid({
data: details,
datatype: 'local',
colNames: ['ID', 'QUANTITY', 'MODEL_ORDER_NUM', 'DESCRIPTION', 'PRICE_EACH', 'TOTAL_LINE_AMOUNT'],
colModel: [
{ name: 'DETAIL_RECORD_ID', index: 'DETAIL_RECORD_ID', sorttype: 'string' },
{ name: 'QUANTITY', index: 'QUANTITY', sorttype: 'string' },
{ name: 'MODEL_ORDER_NUM', index: 'MODEL_ORDER_NUM', sorttype: 'string' },
{ name: 'DESCRIPTION', index: 'DESCRIPTION', sorttype: 'string' },
{ name: 'PRICE_EACH', index: 'PRICE_EACH', sorttype: 'string' },
{ name: 'TOTAL_LINE_AMOUNT', index: 'TOTAL_LINE_AMOUNT', sorttype: 'string' }
],
search: true,
onSelectRow: LoadInput,
loadonce: false,
jsonReader: { cell: '' },
sortname: 'DETAIL_RECORD_ID',
sortorder: 'asc',
sortable: true,
ignoreCase: true,
viewrecords: true,
height: 'auto',
width: 'auto',
shrinkToFit: false,
hiddengrid: false,
caption: 'Detail Records'
});
UPDATE: Here is how I load data into my grid
Form.Controller.orderForm = new function () {
var _detailRecordId = 1;
this.Create = function () {
var requestData = Controller.GetRequestData();
requestData.orderForm.push({
DETAIL_RECORD_ID: "T" + _detailRecordId++,
REQUEST_RECORD_ID: requestData.REQUEST_RECORD_ID,
QUANTITY: $('#orderForm_QUANTITY_INPUT').val(),
MODEL_ORDER_NUM: $('#orderForm_MODEL_ORDER_NUM_INPUT').val(),
DESCRIPTION: $('#orderForm_DESCRIPTION_INPUT').val(),
PRICE_EACH: $('#orderForm_PRICE_EACH_INPUT').val(),
TOTAL_LINE_AMOUNT: $('#orderForm_TOTAL_LINE_AMOUNT_INPUT').text()
});
Form.View.orderFrom.LoadGrid(requestData.orderForm);
};
Your code doesn't show which editing mechanism your are using with jqGrid so it is hard to say on which event you should subscribe (most porobably it should be either jqGridInlineAfterSaveRow or jqGridAddEditAfterComplete).
Getting the sum of column is very simple as jqGrid has a ready to use method for this:
var subTotal = $('#orderForm').jqGrid('getCol', 'TOTAL_LINE_AMOUNT', false, 'sum');
Depending of what kinf of HTML element your label is you should be able to set its text with one of following:
$('#Subtotal').text(subTotal);
or
$('#Subtotal').val(subTotal);

JQGrid delData not working

I am new to jqgrid, and i want to add delete functionality to my grid. this is my code
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: 'json',
url:'gridfeeder.jsp?zxc=0',
// editurl:'gridedit.jsp',
mtype: "POST",
colNames: ['Date', 'Account ', 'Amount', 'Code'],
colModel: [
{name: 'adate', index: 'adate', width: 300, sorttype: 'date', align: 'center',datefmt: 'Y-m-d', formatter: myLinkFormatter, editable:true},
{ name: 'account', index: 'account', width: 300, align: 'center', sorttype: 'string', editable:true },
{ name: 'amount', index: 'amount', width: 300, align: 'center', sorttype: 'float', editable:true},
{ name: 'code', index: 'code', width: 300, align: 'center', sorttype: 'float', editable:true }
],
pager: "#pager",
rowNum: 500,
rowList: [500,1000, 2000, 3000,4000],
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: true,
height:400,
multiselect:true,
multiboxonly: true,
loadonce:true,
caption:"This is me"
}).navGrid('#pager',
{edit:true,add:true,del:true,search:false,refresh:true},
{height:280,mtype: "POST",closeAfterEdit: true,reloadAfterSubmit:true, url:'gridedit.jsp',
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true];
}
},
{height:280,mtype:"POST", closeAfterAdd:true, reloadAfterSubmit:true, url:'gridedit.jsp',
afterSubmit: function () {
$(this).jqGrid("setGridParam", {datatype: 'json'});
return [true, ""];
}
},
{height:280,closeAfterDel:true, url:'gridedit.jsp',reloadAfterSubmit:true,
/*delData: {
name: function() {
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var value = grid.jqGrid('getCell', sel_id, 'account');
alert(value);
return value;
}
}*/
onclickSubmit: function (options, rowid) {
var rowData = jQuery(this).jqGrid('getRowData', rowid);
return {acc: ret.account};
},
afterSubmit: function () {
$(this).jqGrid('setGridParam', {datatype:'json'});
return [true,''];
}
}
);
function myLinkFormatter(cellvalue, options, rowObject) {
return "<a href='account094act.jsp?GETDATE=" + cellvalue + "&GETACC=" + rowObject[1] + "'>" + cellvalue + "</a>";
}
jQuery("#refresh_list").click(function(){
jQuery("#list").setGridParam({datatype: 'json'});
jQuery("#list").trigger("reloadGrid");
});
});
on trying the delData portion, the delete operation stops working. when i click on the submit, nothing happens. as you can see, i have also tried using onclicksubmit, but here too i face the same outcome.
please help.
thanks

jqGrid Form Editing - How to POST Edit row to the sql server

I am using jqGrid in my sharepoint webpart and trying to use Form Editing grid.
I dont know how to post data back to the sql server database for add/update/delete.
I am using WCF service that will accept JSON data from the grid.
WCF Method:
[OperationContract]
[WebInvoke(BodyStyle = WebMessageBodyStyle.Wrapped,
Method = "POST",
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json)]
bool UpdateProjectDeliverable(string ProjectName, string CriticalItemInfo);
JQGrid - Form Edit:
$('#PrjDeliverablesGrid').jqGrid({
datatype: 'json',
colNames: ['ActivityDescription', 'Type', 'CompletionDate'],
colModel: [
{ name: 'ActivityDescription', index: 'ActivityDescription', width: 200, sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "2", cols: "10" }, formoptions: { rowpos: 1, elmprefix: "(*)" }, editrules: { required: true} },
{ name: 'Type', index: 'Type', width: 90, editable: true, edittype: 'select', editoptions: {
value: function () {
var EditVal = LoadDeliverableTypes();
return EditVal;
}
}, /*editoptions: { value: "H:HandOver; CD:Charter (Draft); CF:Charter (Final); P0:Proto 0; P1:Proto 1; P2:Proto 2; P3:Proto 3" },*/formoptions: { rowpos: 2, elmprefix: " " }
},
{ name: 'CompletionDate', index: 'CompletionDate', width: 90, editable: true, sorttype: 'date', formatter: 'date',
editoptions: { size: 12,
dataInit: function (element) {
$(element).datepicker({ dateFormat: 'mm/dd/yyyy' });
},
defaultValue: function () {
var currentTime = new Date();
var month = parseInt(currentTime.getMonth() + 1);
month = month <= 9 ? "0" + month : month;
var day = currentTime.getDate();
day = day <= 9 ? "0" + day : day;
var year = currentTime.getFullYear();
return month + "/" + day + "/" + year;
}
},
formoptions: { rowpos: 3, elmprefix: "(*)", elmsuffix: "mm/dd/yyyy" }, editrules: { required: true }
}
],
rowNum: 10,
pager: '#pagerPrjDeliverables',
sortname: 'id',
sortorder: 'desc',
viewrecords: true,
autowidth: true,
gridview: true,
caption: 'Critical Activities/Deliverables'
});
$('#PrjDeliverablesGrid').jqGrid('navGrid', '#pagerPrjDeliverables',
{ view: true, edit: true, add: true, del: true },
{ edit: true,
afterShowForm: function (eparams) {
$('#PrjDeliverablesGrid').jqGrid('setGridParam', { SelCriticalItem: function () {
var row_id = $('#PrjDeliverablesGrid').jqGrid('getGridParam', 'selrow');
var tempCriticalInfo = new object();
tempCriticalInfo.DeliverableName = $('#PrjDeliverablesGrid').jqGrid('getCell', row_id, 'ActivityDescription');
var DeliverableTypeName = $('#PrjDeliverablesGrid').jqGrid('getCell', row_id, 'Type');
tempCriticalInfo.DeliverableTypeID = GetDeliverableTypeIDFromName(DeliverableTypeName);
tempCriticalInfo.CompletionDate = $('#PrjDeliverablesGrid').jqGrid('getCell', row_id, 'CompletionDate');
return tempCriticalInfo;
}
});
},
// serializeEditData: function (projDeliverableAddEditParams) { //USED ON EDIT
// return JSON.stringify(projDeliverableAddEditParams);
// },
onclickSubmit: function (params, SelCriticalItem) {
var Url = "http://vm0301cch:19511/_layouts/AGCO.PB.SharePointUI/WCFPBUtility/WCFPBUtility.svc";
var SelProjectName = document.getElementById("txtProjectID").value;
var data;
SelDelvProjectName = SelProjectName;
$('#PrjDeliverablesGrid').jqGrid({
params.url = Url + "/UpdateProjectDeliverable",
datatype: 'json',
mtype: 'POST',
editData: { ProjectName: SelDelvProjectName },
ajaxEditOptions: { contentType: 'application/json',
success: function (data) {
alert('Deliverables loaded successfully');
},
error: function (data) {
alert('Deliverables loading failed');
}
}
});
},
jqModal: true,
checkOnUpdate: true,
savekey: [true, 13],
navkeys: [true, 38, 40],
checkOnSubmit: true,
reloadAfterSubmit: false,
recreateForm: true,
closeOnEscape: true,
bottominfo: "Fields marked with (*) are required"
}); // edit options
Please help.

ExtJS Grid doesn't load data

I'm trying to display data in a grid by using JsonStore.
The grid gets rendered, but it doesn't display the data.
The JSON data returned by API.ashx:
[{"Account":{"Username":"root","Password":null,"Enabled":true,"Id":1},"Text":"Hallo Welt!","Id":1},{"Account":{"Username":"root","Password":null,"Enabled":true,"Id":1},"Text":"hihihi","Id":3}]
My code:
Ext.onReady(function () {
var store = new Ext.data.JsonStore({
url: 'API.ashx?type=notes&action=getAll',
root: 'Note',
autoload: true,
fields: ['Text', { name: 'Id', type: 'int'}]
});
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id: 'Note',
header: 'Id',
width: 25,
sortable: true,
dataIndex: 'Id'
},
{
header: 'Text',
width: 160,
sortable: true,
dataIndex: 'Text'
}
],
stripeRows: true,
autoExpandColumn: 'Note',
height: 350,
width: 600,
title: 'Notes',
stateful: true,
stateId: 'grid'
});
store.load();
grid.render('grid-example');
});
I just fixed it myself. I had to remove the option "root" and now it works fine.