totalrecords – when dynamically set the value, two requests being fired

[sumanthMember]

Hello There…

I have been trying to update the “totalrecords” value of Grid dynamically. Initially declared the total as “1000”.

In one approach, tried to update the count using the “bindingcomplete” method

$(“#jqxgrid”).on(“bindingcomplete”, function (event) {

source.totalrecords = $(“#TotalRecords”).text(); // Reading the value from the hidden-field

});

In another approach, tried to update the value through downloadComplete…

downloadComplete: function (edata, textStatus, xhr) {
$(‘#TotalRecords’).text(xhr.getResponseHeader(‘X-Documents-Count’));
source.totalrecords = xhr.getResponseHeader(‘X-Documents-Count’);
}, // this is part of “rendergridrows”

In both the approaches, I see that the rows count is being updated. However, the issue is that two requests are being fired! Is there an option to track the number of requests and fire only one request as required

I did go through the forum and did not get any help with existing topics. Appreciate your earlierst response

Thanks

[Peter StoevKeymaster]

Hi sumanth,

“totalrecords” should be updated in the beforeprocessing callback as shown in our demos and documentation.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[Peter StoevKeymaster]

Hi sumanth,

You cannot call beforeprocessing because it is called by the jqxDataAdapter automatically. See: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverpaging.htm?arctic

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[Peter StoevKeymaster]

Hi Sumanth,

In the “beforeprocessing” callback, the totalrecords should be set, but “beforeprocessing” is called by Us at the moment of time when it should be. It is wrong to manually call that function and it also has “xhr” as parameter.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[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

[spectrumMember]

Sumanth,

were you able to fix this… I am facing similar issue

[msorianoParticipant]

Hi,

I am experiencing the same issue. I think the problem here is that jqxAdapter by default uses asynchronous loading -> which means the value that we are expecting to put into the totalrecords might still be in process and cannot be used. I tried changing the jqxAdapter’s async property to false to solve the issue, but the behavior of the jqxgrid now since it is not asynchronous is a bit worrying for the grid waits for the data to load first before it shows anything — which may take a lot of time. Since it appears to be not responding, the user may conclude that an error had happened.

Maybe it would be helpful if we could have a functionality that updates the totalrecords count (if it is in the server-side pagination state?). This would really help us a lot. ;( I hope this would be implemented. Thank you!!

[Author]

Posts