Hi there,
I’m using server side paging, editing, filtering and sorting. I have updated the the paging to allow for 10, 20, 50, 100, 1000 rows.I have 14 rows coming back in my table and 20 rows in the paginator. All ok so far. Keyboard navigation is not too bad.
I update the paginator to show 1000 rows. The same 14 rows are returned. selecting a cell, and pressing the down key takes about 4 seconds for the next cell to be selected. I have confirmed that there are no server calls being made so it’s nothing to do with the server latency. What can I check to try and speed it up.
Here is my code… sorry, its big.
var tradesSource = {
datatype : "json",
datafields : [ {
name : 'id',
type : 'string'
}, {
name : 'name',
type : 'string'
} ],
id : 'id',
cache : false,
async : false,
url : '/ajax/data/custom_jqxgrid_spec_item_trades.php',
type : "POST",
data : {
user_lang : user_lang,
app_domain : app_domain,
user_token : user_token,
confirmation_tag : getConfirmationTag()
},
};
var tradesAdapter = new $.jqx.dataAdapter(tradesSource, {
autoBind : true
});
// logger("tradesAdapter:");
// logger(tradesAdapter);
var subcontractorsSource = {
datatype : "json",
datafields : [ {
name : 'id',
type : 'string'
}, {
name : 'name',
type : 'string'
} ],
id : 'id',
cache : false,
async : false,
url : '/ajax/data/custom_jqxgrid_spec_item_subcontractors.php',
type : "POST",
data : {
user_lang : user_lang,
app_domain : app_domain,
user_token : user_token,
confirmation_tag : getConfirmationTag()
},
};
var subcontractorsAdapter = new $.jqx.dataAdapter(subcontractorsSource, {
autoBind : true
});
// logger("subcontractorsAdapter:");
// logger(subcontractorsAdapter);
var reportGroupsSource = {
datatype : "json",
datafields : [ {
name : 'id',
type : 'string'
}, {
name : 'name',
type : 'string'
} ],
id : 'id',
cache : false,
async : false,
url : '/ajax/data/custom_jqxgrid_spec_item_report_groups.php',
type : "POST",
data : {
user_lang : user_lang,
app_domain : app_domain,
user_token : user_token,
confirmation_tag : getConfirmationTag()
},
};
var reportGroupsAdapter = new $.jqx.dataAdapter(reportGroupsSource, {
autoBind : true
});
// logger("reportGroupsAdapter:");
// logger(reportGroupsAdapter);
var dataSource = {
unboundmode: true,
url : '/ajax/data/custom_jqxgrid_spec_items.php',
type : "POST",
dataType : "json",
cache : false,
id : 'id',
datafields : [ {
name : 'id', type: 'int'
}, {
name : 'page_number', type: 'string'
}, {
name : 'spec_notation', type: 'string'
}, {
name : 'name', type: 'string'
}, {
name : 'trade_id', type: 'string',
values : {
source : tradesAdapter.records,
value : 'id',
name : 'name'
}
}, {
name : 'subcontractor_id', type: 'string',
values : {
source : subcontractorsAdapter.records,
value : 'id',
name : 'name'
}
}, {
name : 'report_group_id', type: 'string',
values : {
source : reportGroupsAdapter.records,
value : 'id',
name : 'name'
}
}, {
name : 'labour_markup', type: 'float'
}, {
name : 'quantity', type: 'int',
}, {
name : 'labour_cost', type: 'float'
}, {
name : 'cost', type: 'float'
}, {
name : 'markup', type: 'float'
}, {
name : 'total', type: 'float'
}, {
name : 'additional_item',
type : 'bool'
}, {
name : 'omit', type: 'float'
}, {
name : 'addition', type: 'float'
}, {
name : 'percentage_done', type: 'int'
}, {
name : 'work_complete', type: 'float'
} ],
//data : {
// user_lang : user_lang,
// app_domain : app_domain,
// user_token : user_token,
// confirmation_tag : getConfirmationTag(),
// spec_id : $('#list_spec_items_spec_id').val()
//},
filter : function() {
// update the grid and send a request to the server.
$("#jqxgrid_spec_items").jqxGrid('updatebounddata', 'filter');
},
sort : function() {
// update the grid and send a request to the server.
$("#jqxgrid_spec_items").jqxGrid('updatebounddata', 'sort');
},
root : 'Rows',
beforeprocessing : function(data) {
if (data != null) {
//logger("beforeProcessing() got totalRows = '" + data[0].TotalRows + "'");
dataSource.totalrecords = data[0].TotalRows;
$("#manage_spec_items_delete_button").hide();
$("#jqxgrid_spec_items").show();
}
},
deleterow : function(rowid, commit) {
//logger("got delete for id '" + rowid +"'");
//return;
// synchronize with the server - send delete command
$.ajax({
url : '/ajax/data/custom_jqxgrid_spec_items.php',
type : "POST",
dataType : 'json',
cache : false,
data : {
user_lang : user_lang,
app_domain : app_domain,
user_token : user_token,
confirmation_tag : getConfirmationTag(),
delete : true,
id : rowid,
},
success : function(data, status, xhr) {
// delete command is executed.
commit(true);
jqx_spec_items_selected_row = null;
$("#manage_spec_items_delete_button").hide();
},
error : function(jqXHR, textStatus, errorThrown) {
commit(false);
}
});
},
updaterow : function(rowid, rowdata, commit) {
$.ajax({
url : '/ajax/data/custom_jqxgrid_spec_items.php',
type : "POST",
dataType : 'json',
cache : false,
data : {
user_lang : user_lang,
app_domain : app_domain,
user_token : user_token,
confirmation_tag : getConfirmationTag(),
update : true,
id : rowdata.id,
page_number : rowdata.page_number,
spec_notation : rowdata.spec_notation,
name : rowdata.name,
trade_id : rowdata.trade_id,
subcontractor_id : rowdata.subcontractor_id,
report_group_id : rowdata.report_group_id,
labour_markup : rowdata.labour_markup,
quantity : rowdata.quantity,
labour_cost : rowdata.labour_cost,
additional_item : rowdata.additional_item,
omit : rowdata.omit,
addition : rowdata.addition,
percentage_done : rowdata.percentage_done,
},
success : function(data, status, xhr) {
// update command is executed.
commit(true);
},
error : function() {
// cancel changes.
commit(false);
}
});
}
};
var dataAdapter = new $.jqx.dataAdapter(dataSource, {
formatData: function (data) {
$.extend(data, {
user_lang : user_lang,
app_domain : app_domain,
user_token : user_token,
confirmation_tag : getConfirmationTag(),
spec_id : $('#list_spec_items_spec_id').val()
});
return data;
}
});
// initialize jqxGrid
$("#jqxgrid_spec_items").jqxGrid({
selectionmode: 'multiplecellsadvanced',width : "100%",
columnsheight : 75,
//selectionmode : 'singlecell',
editmode : 'click',
enablemousewheel:false,
source : dataAdapter,
sortable : true,
filterable : true,
//filtermode : 'excel',
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
pageable : true,
pagesize : 20,
pagesizeoptions : ['10','20','50','100','500','1000'],
columnsresize : true,
autoheight : true,
autorowheight : true,
editable : true,
showtoolbar : true,
localization: getLocalization(),
rendertoolbar : function(toolbar) {
// http://www.jqwidgets.com/community/topic/refresh-toolbar/
// $(this).jqxGrid('updatebounddata');
logger("Rendering toolbar");
var button = null;
button = $("<input type='Button' class='manage_spec_item_action' id='manage_spec_items_refresh_button' value='Refresh List' onclick=\"manage_spec_items_refreshClicked();\"/>");
toolbar.append(button);
button = $("<input type='Button' class='manage_spec_item_action' id='manage_spec_items_add_button' value='Add Spec Item' onclick=\"window.location = '#manage_spec_items_add_dialog';\"/>");
toolbar.append(button);
button = $("<input type='Button' style='display:none;' class='manage_spec_item_action' id='manage_spec_items_delete_button' value='Delete Selected Spec Item' onclick=\"jqx_spec_items_delete();\"/>");
toolbar.append(button);
},
columns : [ /*{
text : 'ID',
datafield : 'id',
}, */{
text : 'Page',
datafield : 'page_number',
width : 80
}, {
text : 'Item',
datafield : 'spec_notation',
width : 80
}, {
text : 'Description of the Spec Item',
datafield : 'name',
width : 300
}, {
text : 'Trade',
datafield : 'trade_id',
width : 120,
columntype : 'dropdownlist',
createeditor : function(row, cellvalue, editor) {
editor.jqxDropDownList({
displayMember : 'name',
valueMember : 'id'
});
},
initeditor : function(row, cellvalue, editor) {
editor.jqxDropDownList({
source : tradesAdapter
});
}
}, {
text : 'Subcontractor',
datafield : 'subcontractor_id',
width : 120,
columntype : 'dropdownlist',
createeditor : function(row, cellvalue, editor) {
editor.jqxDropDownList({
displayMember : 'name',
valueMember : 'id'
});
},
initeditor : function(row, cellvalue, editor) {
editor.jqxDropDownList({
source : subcontractorsAdapter
});
}
}, {
text : 'Report Group',
datafield : 'report_group_id',
width : 120,
columntype : 'dropdownlist',
createeditor : function(row, cellvalue, editor) {
editor.jqxDropDownList({
displayMember : 'name',
valueMember : 'id'
});
},
initeditor : function(row, cellvalue, editor) {
editor.jqxDropDownList({
source : reportGroupsAdapter
});
}
}, {
text : 'Markup (%)',
datafield : 'labour_markup',
width : 100,
cellsformat: 'p', cellsalign: 'right'
}, {
text : 'Quantity',
datafield : 'quantity',
width : 100,
cellsformat: 'n', cellsalign: 'center'
}, {
text : 'Unit Cost',
datafield : 'labour_cost',
width : 100,
cellsformat: 'c2', cellsalign: 'right'
}, {
text : 'Net Price',
datafield : 'cost',
width : 100,
cellsformat: 'c2', cellsalign: 'right',
editable : false,
}, {
text : 'Net Markup',
datafield : 'markup',
width : 100,
cellsformat: 'c2', cellsalign: 'right',
editable : false,
}, {
text : 'Item Total',
datafield : 'total',
width : 100,
cellsformat: 'c2', cellsalign: 'right',
editable : false,
}, {
text : 'Additional',
datafield : 'additional_item',
width : 100,
columntype : 'checkbox',
}, {
text : 'Omit',
datafield : 'omit',
width : 100,
cellsformat: 'c2', cellsalign: 'right',
}, {
text : 'Addition',
datafield : 'addition',
width : 100,
cellsformat: 'c2', cellsalign: 'right',
}, {
text : '% Complete',
datafield : 'percentage_done',
width : 100,
cellsformat: 'p0', cellsalign: 'right'
}, {
text : 'Work Complete',
datafield : 'work_complete',
width : 100,
cellsformat: 'c2', cellsalign: 'right',
editable : false,
} ]
});
$("#jqxgrid_spec_items").bind('cellselect', function (event) {
return; // just in case this is slowing stuff down... it's not.
var row = event.args.rowindex;
var datafield = event.args.datafield;
var datarow = $("#jqxgrid_spec_items").jqxGrid('getrowdata', row);
//logger("Selected row data:"); logger(datarow);
jqx_spec_items_selected_row = event.args.rowindex;
if(datarow.name.length > 75) {
$("#manage_spec_items_delete_button").val("Delete Spec Item starting '" + datarow.name.substring(0,75) + "...'");
} else {
$("#manage_spec_items_delete_button").val("Delete '" + datarow.name + "'");
}
$("#manage_spec_items_delete_button").show();
});
