Related
I'm having some difficulty loading my jqGrid with a big amount of rows. Once my document is ready I'm calling a Javascript function that gets a collection of objects from an API and then adds the row data to the grid. Everything has been working fine, but now I have over 20,000 rows, so the grid never loads. Is there something I can do to fix this? Is it possible to only paint the data that the user can see? For example, if the row number on the pager is set to 50, can I simply only load 50 rows and not all 25,000?
Here's my grid:
$(function () {
$("#grid").jqGrid({
datatype: "local",
loadonce: false,
height: "auto",
search: true,
title: false ,
autowidth: true,
shrinkToFit: true,
searchOnEnter: true,
colNames: ['ID', 'BDO Number', 'BDO Date', 'Delivery Date', 'Miles', 'Zip Code', 'Zone', 'Fuel Surcharge', 'Driver', 'Driver Rate', 'Total Driver Pay', 'Order', 'Driver ID',
'Vendor ID', 'Vendor', 'Airport', 'Airline', 'Claim Reference', 'Clear Date', 'Mileage', 'Mileage Cost', 'Special', 'Special Cost', 'Exc Cost', 'Pickup Date', 'Total Delivery Cost',
'Vendor Profit', 'Driver Percent', 'Driver Fuel Surcharge', 'Total Driver Reported', 'Payment', 'User Cleared', 'Excess Costs', 'Additional Fees', 'DriverCostSchemaID'],
colModel: [
{ name: 'ID', index: 'ID', hidden: true },
{ name: 'BDONumber', index: 'BDONumber', align: 'center', classes: 'gridButton' },
{ name: 'BDODate', index: 'BDODate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'DeliveryDate', index: 'DeliveryDate', width: 250, align: 'center', formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'Miles', index: 'Miles', width: 40, align: 'center' },
{ name: 'ZipCode', index: 'ZipCode', width: 55, align: 'center' },
{ name: 'Zone', index: 'Zone', width: 40, align: 'center' },
{ name: 'FuelFloat', index: 'FuelFloat', width: 50, align: 'center', formatter: money, sorttype: 'float' },
{ name: 'DriverName', index: 'DriverName', width: 125, align: 'center' },
{ name: 'RateFloat', index: 'RateFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
{ name: 'PayFloat', index: 'PayFloat', width: 75, align: 'center', formatter: money, sorttype: 'float' },
{ name: 'Order', index: 'Order', hidden: true },
{ name: 'Driver', index: 'Driver', hidden: true },
{ name: 'Vendor', index: 'Vendor', hidden: true },
{ name: 'Airport', index: 'Airport', hidden: true },
{ name: 'Airline', index: 'Airline', hidden: true },
{ name: 'VendorName', index: 'VendorName', hidden: true },
{ name: 'ClaimReference', index: 'ClaimReference', hidden: true },
{ name: 'ClearDate', index: 'ClearDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'Mileage', index: 'Mileage', hidden: true },
{ name: 'MileageCost', index: 'MileageCost', hidden: true, formatter: money },
{ name: 'Special', index: 'Special', hidden: true },
{ name: 'SpecialCost', index: 'SpecialCost', hidden: true, formatter: money },
{ name: 'ExcCost', index: 'ExcCost', hidden: true, formatter: money },
{ name: 'PickupDate', index: 'PickupDate', hidden: true, formatter: 'date', formatoptions: { newformat: 'l, F d, Y g:i:s A' } },
{ name: 'TotalDeliveryCost', index: 'TotalDeliveryCost', hidden: true, formatter: money },
{ name: 'VendorProfit', index: 'VendorProfit', hidden: true, formatter: money },
{ name: 'DriverPercent', index: 'DriverPercent', hidden: true },
{ name: 'DriverFuelSurcharge', index: 'DriverFuelSurcharge', hidden: true, formatter: money },
{ name: 'TotalDriverReported', index: 'TotalDriverReported', hidden: true, formatter: money },
{ name: 'Payment', index: 'Payment', hidden: true },
{ name: 'UserCleared', index: 'UserCleared', hidden: true },
{ name: 'ExcCost', index: 'ExcCost', hidden: true },
{ name: 'AdditionalFees', index: 'AdditionalFees', hidden: true, formatter: money },
{ name: 'DriverCostSchemaID', index: 'DriverCostSchemaID', hidden: true },
],
rowNum: 100,
rowList: [100, 500, 1000, 100000],
viewrecords: true,
pager: "pager",
sortorder: "desc",
sortname: "DeliveryDate",
ignoreCase: true,
headertitles: true,
emptyrecords: "There are no results.",
})
$("#grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: 'cn' });
GetBDOs();
});
And the GetBDOs function:
function GetBDOs() {
var request = $.ajax({
url: "#Url.Action("GetBDOs", "DPAdmin")",
type: "GET",
cache: false,
async: true,
dataType: "json"
});
request.done(function (results) {
var thegrid = $("#grid");
thegrid.clearGridData();
for (var i = 0; i < 100; i++) {
thegrid.addRowData(i + 1, results[i]);
}
thegrid.trigger("reloadGrid");
});
}
Which calls this:
[Authorize]
public JsonResult GetBDOs()
{
List<BDO> BDOs= new List<BDO>();
// Get all BDOs
BDOs = WebInterface.GetBDOs();
var jsonResult = Json(BDOs.ToArray(), JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
WebInterface.GetBDOs simply hits the database and grabs all the current BDO objects, which is now between 20,000 - 25,000 and freezes the grid. Any help with this?
You really should be paginating that data on the server side before sending it back to the browser. Then all you need to do is fetch the next/prev page and redraw the grid.
The part
var thegrid = $("#grid");
thegrid.clearGridData();
for (var i = 0; i < 100; i++) {
thegrid.addRowData(i + 1, results[i]);
}
thegrid.trigger("reloadGrid");
of GetBDOs function makes performance problems definitively. Instead of calling addRowData in the loop you should set data parameter to results with respect of setGridParam:
var thegrid = $("#grid");
thegrid.clearGridData();
thegrid.jqGrid("setGridParam", {data: results});
thegrid.trigger("reloadGrid");
Additionally it's very important to add gridview: true option to jqGrid.
Even better seems to me to replace use url: "#Url.Action("GetBDOs", "DPAdmin")" as jqGrid parameters together with datatype: "json" and loadonce: true. It will makes the same Ajax call to the server and fill the grid with all 20000 or 25000 rows of data, but placing only 100 first rows in the grid.
One more recommendation will be to use key: true property in ID column. It will inform jqGrid to use the value from ID column as rowid (the value of id attributes of <tr> elements of the grid). You should consider additionally to remove a lot of hidden columns and saves the data only in the internal data option of the grid.
Would appreciate some help tackling this please. So I have the following code to load up Json data into a Jquery grid.... jqxTreegrid. So far, The grid shows up but the data does not. In addition, debugger shows me no errors of any kind. So, I would appreciate any help to resolve this please.
$(document).ready(function () {
// prepare the data
var source =
{
dataType: "json",
dataFields: [
{ name: 'sid', type: 'string' },
{ name: 'id', type: 'string' },
{ name: 'position', type: 'string' },
{ name: 'created_at', type: 'string' },
{ name: 'created_meta', type: 'number' },
{ name: 'updated_at', type: 'string' },
{ name: 'updated_meta', type: 'string' },
{ name: 'meta_data', type: 'string' },
{ name: 'community_area_number', type: 'number' },
{ name: 'community_area_name', type: 'string' }
],
hierarchy:
{
root: 'sid'
},
id: 'sid',
//url: 'http://www.filedropper.com/employeesadv'
//url: 'gdiChicago/employeesadv.csv'
url: 'data.cityofchicago.org_Births-to-mothers-aged-15_19_kva-bt6k.json'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#content").on('rowselect', function(event){
// event arguments
var args = event.args;
// row data
var rowData = args.row;
// row key
var rowKey = args.key;
console.log('RowSelect selected');
event.stopPropagation();
});
$("#content").on('bindingComplete', function(event)
{
$("#content").jqxTreeGrid('hideColumn', 'name');
console.log('Tree successfully loaded');
});
$("#content").on('beforeLoadComplete', function (records) {
var data = new Array();
// update the loaded records. Dynamically add EmployeeName and EmployeeID fields.
for (var i = 0; i < records.length; i++) {
var employee = records[i];
console.log(employee);
}
});
// create Tree Grid
$("#content").jqxTreeGrid(
{
width: 1000,
source: dataAdapter,
pageable: true,
columnsResize: true,
ready: function()
{
// expand row with 'EmployeeKey = 32'
$("#content").jqxTreeGrid('expandRow', 32);
},
columns: [
{ text: 'sid', dataField: 'sid', minWidth: 100, width: 300 },
{ text: 'id', dataField:'id', minWidth: 100, width: 300 },
{ text: 'position', dataField:'position', minWidth: 100, width: 300 },
{ text: 'created at', dataField: 'created_at' , minWidth: 100, width: 300 },
{ text: 'created meta', dataField: 'created_meta' , minWidth: 100, width: 300 },
{ text: 'updated at', dataField: 'updated_at', minWidth: 100, width: 300 },
{ text: 'updated meta', dataField:'updated_meta', minWidth: 100, width: 300 },
{ text: 'meta', dataField:'meta', minWidth: 100, width: 300 },
{ text: 'Community Area Number', dataField: 'community_area_number' , minWidth: 100, width: 300 },
{ text: 'community area name', dataField: 'community_area_name', minWidth: 100, width: 300 }
]
});
});
The json datasource I am trying to load can be obtained at this link Public Health Statistics - Births to mothers aged 15-19 years old in Chicago, by year, 1999-2009
Instead of using
hierarchy:
{
root: 'sid'
},
try using
hierarchy:
{
keyDataField: { name: 'sid' }
},
I have a problem when I'm trying to refresh the store of a grid inside a Extjs WindowsA from a Extjs WindowsB.. here's the code
There's a grid inside of my WindowsA with this store
var store_grid_egresos_fijos = Ext.create('Ext.data.Store', {
fields: [
{name: 'concepto_egreso.id', type: 'int'},
{name: 'tipo', type: 'string'},
{name: 'concepto_egreso.nombre', type: 'string'},
{name: 'monto', type: 'numeric'},
{name: 'fecha', type: 'date', dateFormat: 'Y-m-d'},
{name: 'referencia_documento_mercantil', type: 'string'},
{name: 'nro_factura', type: 'string'},
{name: 'cuenta.nombre', type: 'numeric'}
],
proxy: {
type: 'ajax',
url: '/egreso/egresos_by_date',
reader: {
type: 'json'
}
},
autoLoad: false
});
and here is the code for the grid inside my WindowsA.js:
{
xtype: 'gridpanel',
id:'egresosGridFijos',
store: store_grid_egresos_fijos,
features :{ftype:'summary'},
x: 10,
y: 50,
height: 310,
maxHeight: 310,
width: 350,
title: 'Gastos Fijos',
columns: [
{
xtype: 'gridcolumn',
width: 44,
dataIndex: 'concepto_egreso.id',
text: 'ID'
},
{
xtype: 'gridcolumn',
width: 219,
dataIndex: 'concepto_egreso.nombre',
text: 'Concepto'
},
{
xtype: 'numbercolumn',
width: 78,
text: 'Monto',
dataIndex: 'monto',
summaryType: 'sum',
summaryRenderer: function change(val){
total_fijos = val
return '<span style="color:green;">' + val + '</span>';
}
}
]
}
and here is the code where I try to update the store on the grid within the WindowsA.js (This code is inside WindowsB.js)
{
xtype: 'button',
id:'btn_registrar_obj_egreso',
x: 785,
y: 370,
width: 105,
glyph: 20,
cls: 'my-button',
scale: 'medium',
text: 'Registrar',
icon:'/images/grabar.png',
handler: function(){
Ext.Ajax.request({
url: '/egreso/registrar',
method: 'GET',
params: {
condominios_id: 01,
concepto_egreso_id: Ext.getCmp('txt_id').getValue(),
fecha : Ext.getCmp('dt_fecha').getValue(),
},
success: function( resultado, request ) {
datos=Ext.JSON.decode(resultado.responseText);
if (datos.success) {
var mes = Ext.getCmp('txt_mes').getValue()
var year = Ext.getCmp('txt_year').getValue()
var fecha = year+'-'+mes+'-'+'05'
Ext.getCmp('dt_fecha_consulta').setValue(fecha)
store_grid_egresos_fijos.load({
params : {
fecha : fecha,
tipo:'fijo'
},
autoLoad: true
});
Ext.Msg.show({
title:'SIACO',
msg: datos.msg
});
}
else {
Ext.Msg.alert("Error", datos.msg );
}
;
},
failure: function(response) {
alert("Error " + response.responseText);
}
})
}
}
With this code I'm trying to update the grid... reloading
store_grid_egresos_fijos.load({
params : {
fecha : fecha,
tipo:'fijo'
},
autoLoad: true
});
Try reloading your store this way
store_grid_egresos_fijos.baseParams.fecha = fecha;
store_grid_egresos_fijos.baseParams.tipo = 'fijo';
store_grid_egresos_fijos.reload();
I am trying to edit and save multiple rows from jqgrid. The getChangedCells is not returning any values.
The code is as below:
<style>
.hlabel{font-weight:bold;font-size:10pt;}
.hdata{font-size:10pt;}
</style>
<script>
//this is a formatter for showing images
function imageFormatter(cellvalue, options, rowObject) {
return "<img src='" + cellvalue + "'/>";
};
//this gets called on edit mode to display datepickers.
function onGridEdit(myRowID) {
$("#" + myRowID + "_booked").datepicker({ dateFormat: 'dd/mm/yy' });
$("#" + myRowID + "_vesselarrival").datepicker({ dateFormat: 'dd/mm/yy' });
$("#" + myRowID + "_vesseldock").datepicker({ dateFormat: 'dd/mm/yy' });
$("#" + myRowID + "_markdown").datepicker({ dateFormat: 'dd/mm/yy' });
// this will set focus on the Invested column so the datepicker doesn't fire
$("#" + myRowID + "_vesselname").get(0).focus();
}
$(function () {
var lastsel2
//creating the grid
$("#gditems").jqGrid({
url: 'handlers/items.ashx?id=' + PID,
datatype: "xml",
mtype: "POST",
colNames: ['Style', 'Altcode2', 'Colour', 'Group', '800', '999', 'Order', 'Received', 'Due', 'B/O', 'Image', 'Out/Full', 'Booked', 'Current', 'Slip', 'Arrival', 'Dock', 'Name', 'Freight', 'RRP', 'Mark Down', 'Sell', 'Cost'],
colModel: [
{ name: 'code1', index: 'code1', width: '50', sortable: true },
{ name: 'code2', index: 'code2', width: '30', sortable: true },
{ name: 'Due', index: 'Due', sorttype: 'integer', width: '20', sortable: false },
{ name: 'image', index: 'image', width: '30', formatter: imageFormatter, sortable: false },
{ name: 'booked', index: 'booked', width: '30', sortable: false, datefmt: "d/m/Y", editable: true, editrules: { date: true} },
{ name: 'date1', index: 'date1', width: '40' },
{ name: 'slip', index: 'slip', width: '30', sortable: false },
{ name: 'arrival', index: 'arrival', width: '30', sortable: false, datefmt: "d/m/Y", editable: true, editrules: { date: true} },
{ name: 'dock', index: 'dock', width: '30', sortable: false, datefmt: "d/m/Y", editable: true, editrules: { date: true} },
{ name: 'vname', index: 'vname', width: '30', sortable: false, editable: true },
{ name: 'price', index: 'price', sorttype: 'currency', width: '30', formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "£"} },
{ name: 'date2', index: 'date2', width: '30', sortable: false, editable: true, datefmt: "d/m/Y", editrules: { date: true} },
{ name: 'price2', index: 'price2', sorttype: 'currency', width: '30', formatter: 'currency', formatoptions: { decimalPlaces: 2, prefix: "£"}}],
//saving into clientarray
onSelectRow: function (id) {
if (id && id !== lastsel2) {
jQuery("#gdpoitems").saveRow(lastsel2, false, 'clientArray');
jQuery('#gdpoitems').editRow(id, true, onGridEdit, null, 'clientArray');
lastsel2 = id;
}
},
editurl: "clientArray",
cellSubmit: 'clientArray',
rowNum: 20,
height: "100%",
autowidth: true,
rowList: [20, 30],
pager: jQuery('#pgitems'),
viewrecords: true,
sortorder: "asc",
caption: "",
loadonce: false
});
//adding buttons to the nav bar
jQuery("#gditems")
.navGrid('#pgitems', { edit: false, add: false, del: false, search: false }).navButtonAdd('#pgitems', {
caption: "Save",
buttonicon: "ui-icon-disk",
onClickButton: function () {
$.post("handlers/details.ashx?id=" + PID, { c1: $("#txtc1").val(), c2: $("#txtc2").val(), c3: $("#txtc3").val() }, function (data) {
//trying to get the edited data.
var ret = $("#gditems").getChangedCells('all');
var ret2 = JSON.stringify(ret);
alert(ret);
$.ajax({
type: "POST",
url: "handlers/items.ashx?edit=1&id=" + PID,
data: ret2,
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (response, textStatus, xhr) {
alert("success");
},
error: function (xhr, textStatus, errorThrown) {
alert("error");
}
});
});
},
position: "last"
})
.navButtonAdd('#pgitems', {
caption: "Cancel",
buttonicon: "ui-icon-cancel",
onClickButton: function () {
$("#header").show();
$("#detail").hide();
return false;
},
position: "last"
});
</script>
<div>
<br />
<table id="gditems">
</table>
<div id="pgitems"> </div>
</div>
The following ExtJS grid worked until I put the checkbox column in it, now I get this error:
I based the checkbox column code on this code.
What do I need to do to get the checkbox column to work?
var myData = [
[4, 'This is a whole bunch of text that is going to be word-wrapped inside this column.', 0.24, true, '2010-11-17 08:31:12'],
[16, 'Computer2', 0.28, false, '2010-11-14 08:31:12'],
[5, 'Network1', 0.02, false, '2010-11-12 08:31:12'],
[1, 'Network2', 0.01, false, '2010-11-11 08:31:12'],
[12, 'Other', 0.42, false, '2010-11-04 08:31:12']
];
var myReader = new Ext.data.ArrayReader({}, [{
name: 'id',
type: 'int'
}, {
name: 'object',
type: 'object'
}, {
name: 'status',
type: 'float'
}, {
name: 'rank',
type: 'boolean'
}, {
name: 'lastChange',
type: 'date',
dateFormat: 'Y-m-d H:i:s'
}]);
var grid = new Ext.grid.GridPanel({
region: 'center',
style: 'margin: 10px',
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [{
header: 'ID',
width: 50,
sortable: true,
dataIndex: 'id',
hidden: false
},
{
header: 'Object',
width: 120,
sortable: true,
dataIndex: 'object',
renderer: columnWrap
}, {
header: 'Status',
width: 90,
sortable: true,
dataIndex: 'status'
},
{
xtype: 'checkcolumn',
header: 'Test',
dataIndex: 'rank',
width: 55
},
{
header: 'Last Updated',
width: 120,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'),
dataIndex: 'lastChange'
}],
viewConfig: {
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
if(rowIndex == 2){
return 'red-row';
} else {
return '';
}
}
},
title: 'Computer Information',
width: 500,
autoHeight: true,
frame: true,
listeners: {
'rowdblclick': function(grid, index, rec){
var id = grid.getSelectionModel().getSelected().json[0];
go_to_page('edit_item', 'id=' + id);
}
}
});
You get this error because you have not included the CheckColumn extension. You can get the extension from : http://dev.sencha.com/deploy/dev/examples/ux/CheckColumn.js .. include it and you should be able to remove the error..