updateBoundData and rowDetails

[defyentParticipant]

Hello, I’m using updateBoundData and setInterval (every 30 seconds) to reload the data in a datatables table with without reloading the page. It works perfectly, except that the table I’m using also uses rowDetails, and if a row is expanded when updateBoundData is called, the row is collapsed (or recreated collapsed). Is there any way to force datatables to remember the state of the rowDetails and keep them open if they are open?

$(document).ready(function () {
var url = “objects.txt”;
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘cell1’, type: ‘string’ },
{ name: ‘cell2’, type: ‘string’ },
{ name: ‘cell3’, type: ‘string’ },
{ name: ‘cell4’, type: ‘string’ }
],
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

var initRowDetails = function (id, row, element, rowinfo) {
var tabsdiv = null;
var information = null;
var notes = null;
// update the details height.
rowinfo.detailsHeight = 360;
element.append($(“<div>” + row.cell4 + “</div>”));
tabsdiv = $(element.children()[0]);

}

$(“#dataTable”).jqxDataTable(
{
width: ‘100%’,
pageable: false,
rowDetails: true,
pagerButtonsCount: 10,
source: dataAdapter,
columnsResize: true,

columns: [
{ text: ‘Aircraft’, dataField: ‘cell1’, width: 170 },
{ text: ‘POB’, dataField: ‘cell2’, width: 300 },
{ text: ‘Schedule and Route’, dataField: ‘cell3’, }
],
ready: function () {
// expand the first details.
$(“#dataTable”).jqxDataTable();
},
initRowDetails: initRowDetails

});

});

window.setInterval(function() {
$(“#dataTable”).jqxDataTable(‘updateBoundData’);
}, 30000);

[defyentParticipant]

Fixed.

$(document).ready(function () {
var expands = [];

var url = “objects.txt”;
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘cell1’, type: ‘string’ },
{ name: ‘cell2’, type: ‘string’ },
{ name: ‘cell3’, type: ‘string’ },
{ name: ‘cell4’, type: ‘string’ }
],
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

var initRowDetails = function (id, row, element, rowinfo) {
var tabsdiv = null;
var information = null;
var notes = null;
// update the details height.
rowinfo.detailsHeight = 360;
element.append($(“<div>” + row.cell4 + “</div>”));
tabsdiv = $(element.children()[0]);

}

$(“#dataTable”).jqxDataTable(
{
width: ‘100%’,
pageable: false,
rowDetails: true,
pagerButtonsCount: 10,
source: dataAdapter,
columnsResize: true,

columns: [
{ text: ‘Aircraft’, dataField: ‘cell1’, width: 170 },
{ text: ‘POB’, dataField: ‘cell2’, width: 300 },
{ text: ‘Schedule and Route’, dataField: ‘cell3’, }
],
ready: function () {
// expand the first details.
//$(“#dataTable”).jqxDataTable(‘showDetails’, 0);
},
initRowDetails: initRowDetails

});

$(‘#dataTable’).on(‘bindingComplete’, function (event) {
expands.forEach(function(entry) {
$(“#dataTable”).jqxDataTable(‘showDetails’, entry);
});

});

$(‘#dataTable’).on(‘rowExpand’,
function (event)
{
var index = args.index;
expands.push(index);
});

$(‘#dataTable’).on(‘rowCollapse’,
function (event)
{
var index = args.index;
for(var i = expands.length – 1; i >= 0; i–) {
if(expands[i] === index) {
expands.splice(i, 1);
}
}
});

});

window.setInterval(function() {

$(“#dataTable”).jqxDataTable(‘updateBoundData’);

}, 3000);

[Peter StoevKeymaster]

Hi defyent,

Unfortunately, there’s no built-in way in the widget to remember the expand/collapse state. When the widget is re-bound, it re-renders itself and looses the state.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts