jQuery UI Widgets › Forums › Grid › Updating the totalrecords count dynamically based on response
Tagged: totalrecords
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 11 years, 5 months ago.
-
Author
-
I have been trying out Knockout along with jqxgrid. In virtual mode, the grid is being updated with data from API. However, API also sends me the total records count for that specific condition. I have initated the totalrecords to be 1000. Now I am trying to read the x-documents count from response and update the “totalrecords” of the grid with this value. This way I would like to avoid the extra rows being displayed in the grid in case the result value is small.
This way user will get to scroll the entire records without limiting to the pre-defined value(1000). If I go with data[0].TotalRows, this would give only the count that was loaded. In case of virtual mode, how do we get/set the total rows available.
Here is the snippet
$(document).ready(function () {
var sortColumn = “LAST_NAME”;
var sortOrder = “asc” ;
var fromSort = false;
var sortURL=””;
var recLimit = 25;
var selectedRows = new Array();
var selectedRowCount = 0;
var selectAll = false;
var unSelectAll = false;
var pStartIndex = 0;
var pEndIndex = 0;
var fromPinColumn = false;
var exprNbr = “”;var dataSource = {
datatype: “json”,
type: “POST”,
datafields: [
{name: ‘_id’},
{name: ‘LEADS’},
{name: ‘curr_seg’},
{name: ‘lastName’},
{name: ‘firstName’},
{name: ‘firm’},
],
id: ‘_id’,};
// Data Adapter creation for GRID
var dataAdapter = new $.jqx.dataAdapter(dataSource, { autoBind: true, async: false });// Data model creation for GRID
var GridModel = function (items) {
this.items = ko.observableArray(items);
};// activate knockout.
var model = new GridModel(dataAdapter.records);
ko.applyBindings(model);// bind grid to the knockout’s observable array.
var source = {
localdata: model.items,
datatype: ‘observablearray’,
totalrecords: 1000,sort: function (column, direction) {
$(“#jqxgrid”).jqxGrid(‘clearselection’);
sortColumn=column;
if(direction == “ascending” || direction == true )
sortOrder=”asc”;
if(direction == “descending” || direction == false )
sortOrder=”desc”;
if(direction == null)
{
sortOrder=null;
sortColumn = null;
}$(“#jqxgrid”).jqxGrid(‘updatebounddata’);
},
beforeprocessing: function(data)
{
source.totalrecords = data[0].TotalRows;
}}
// load virtual data.
var rendergridrows = function (params) {
return loaddata(params);
}var loaddata = function (params) {
if(selectAll)
{
skipIndex = 0;
selectAll= false;
}
else{endIndex = params.endindex;
skipIndex = params.startindex;
}
url = “http://abc.com/query?limit=” + recLimit +”&skip=”+skipIndex+”&sort_by=”+sortColumn+”&sort_order=”+sortOrder;
dataSource.url = url;dataAdapter = new $.jqx.dataAdapter(dataSource, {contentType:’application/json’, autoBind: true, async: false,
formatData: function (data)
{
return ‘{ “firmName”:”PLACE HOLDER”}’;
},
downloadComplete: function(edata, textStatus, jqXHR)
{}
});return dataAdapter.records;
}// Updating selectedRows Array based on Grid selected rows – START
var disabledRow;
$(“#jqxgrid”).on(‘rowselect’, function (event)
{
selectedRows[selectedRowCount++] = event.args.row.MyID;
disabledRow = event.args.row;
});$(“#jqxgrid”).on(‘rowunselect’, function (event)
{
if(unSelectAll || selectAll)
{
return;
}for(var i=0; i< selectedRowCount; i++)
{
if(event.args.row.MyID == selectedRows[i])
{
selectedRows.splice(i,1);
break;
}
}
selectedRowCount = selectedRows.length;
});
// create jqxGrid.
$("#jqxgrid").jqxGrid(
{
source: source,
//autoheight: true,
//pageable: true,
sortable: true,
selectionmode: 'multiplerowsadvanced',
pagesize: 10,
columnsresize: true,
theme: 'ui-start',
pagesizeoptions: ['5', '10', '15', '20', '25'],
columnsreorder: true,
width: 800,
columnsheight: 40,
rowsheight: 40,
virtualmode: true,
rendergridrows: rendergridrows,
autoshowloadelement: false,columns: [
{text: 'Type', dataField: 'LEADS', minwidth: 100, sortable: false},
{text: 'Segment', dataField: 'curr_seg', minwidth: 150},
{text: 'Last Name', dataField: 'lastName', minwidth: 130},
{text: 'First Name', dataField: 'firstName', minwidth: 130},
{text: 'Firm Name', dataField: 'firm', minwidth: 160}]
});
});Appreciate your response
Thanks
Sudarshan
-
AuthorPosts
You must be logged in to reply to this topic.