[sumanthMember]

Hello Peter

Let me add more details and code snippet for the problem that I am encountering

1. I am using jqxGrid along with Knockout binding
2. Grid is in virtual mode
3. Initially defined the “totalrecords” to 1000
4. X-Documents (from teh API response brings me the total result set available, it could be more or less than 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 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 my 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 faster response

Thanks

Sumanth

[sumanthMember]

Hello Peter

The above pointer shows that the number of rows being fetched from “data”. In my case, I will have to get this from (X-Documents-Count) of API response.

Hope I am clear now!

Regards

Sumanth

[sumanthMember]

Hello Peter

Thanks for prompt response! I did try with beforeprocessing as well. I have called the beforeprocessing in downloadComplete funtion as below

downloadComplete: function (edata, textStatus, xhr) {
totalRecordsCount = xhr.getResponseHeader(‘X-Documents-Count’);
if ($.isFunction(source.beforeprocessing)) {
console.log(‘in download complete function…’);
source.beforeprocessing(totalRecordsCount);
}
}

And below is my “beforeprocessing” function, where I just update the totalrecords value

beforeprocessing: function (data) {
source.totalrecords = data;
},

I still see two requests being fired even through this approach as well.

XHR finished loading: “http://domain.com/abc/query?limit=50&skip=3816&sort_by=LAST_NAME&sort_order=asc”. jqxdata.js:7
XHR finished loading: “http://domain.com/abc/query?limit=50&skip=3816&sort_by=LAST_NAME&sort_order=asc”. jqxdata.js:7

Thanks

sumanth

[Author]

Posts