jQuery UI Widgets › Forums › DataTable › jaxDataTable seems to have some bugs
Tagged: jqxChart, jqxdatatable
This topic contains 6 replies, has 2 voices, and was last updated by JenkeNg 6 years, 1 month ago.
-
Author
-
Hi,jqxWidgets team.
I am using these components, I found an incomprehensible problem when I used jqxDataTable,
Specifically, the problem was discovered when using jqxChart’s sparklines.
Among them, there are rendering and rendered properties, I tried to print some things in these two functions, found that the information displayed on the console on the browser was printed twice (the official example output twice, my code output 3 times).
The official code example is as follows:
$(“#dataTable”).jqxDataTable(
{
width: 850,
source: dataAdapter,
selectionMode: ‘none’,
enableHover: false,
sortable: true,
columns: [
{
text: ‘City’, align: ‘center’, dataField: ‘city’, width:250,
},
{
text: ‘Store locations’, align: ‘center’, dataField: ‘count’, width: 200
},
{
text: ‘Monthly sales’, align: ‘center’, dataField: ‘monthlySales’
},
{
text: ‘Daily sales trend’, align: ‘center’, dataField: ‘dailyTrend’,
// row – row’s index.
// column – column’s data field.
// value – cell’s value.
// rowData – rendered row’s object.
cellsRenderer: function (row, column, value, rowData) {
var div = “<div id=sparklineContainer” + row + ” style=’margin: 0px; margin-bottom: 0px; width: 100%; height: 40px;’></div>”;
return div;
}
}
],
rendering: function () {
console.log(‘rendering..’);
} ,
rendered: function () {
for (var i = 0; i < data.length; i++) {
createSparkline(‘#sparklineContainer’ + i, data[i].dailyTrend, i % 2 == 0 ? ‘column’ : ‘line’);
}
}
});Can see that I wrote the printed code in the rending property.You can test it yourself.The end result of this problem is that I get an abnormal id error when I updateBoundData, because it is rendered twice, so the same id appears, which is what I think. This problem has plagued me for a long time and is still unresolved.
Hi JenkeNg,
rendering and rendered are called multiple times during the DataTable’s lifecycle. It will not be just 1 time. It’s called when data is updated, sorted, filtered, edited, property is changed and so on.
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.comThank you very much for your prompt answer, but I still have some confusion. Since, as you said, it will be rendered multiple times, will it create multiple elements? The element (div) created and returned in the cellsRenderer
cellsRenderer: function (row, column, value, rowData) {
var div = “<div id=sparklineContainer” + row + ” style=’margin: 0px; margin-bottom: 0px; width: 100%; height: 40px;’></div>”;
return div;
}
I mean, will create several identical ID selectors if this happens. This is unreasonable because the ID is unique. Because I was outputting “row”, I found that it would be output multiple times. The final problem I want to solve is the ID selector error.
It can be said that using jqxDataTable sparklines how to use $(‘#datatable’).jqxDataTable(‘updateBoundData’); to update sparklines.
I used updateBoundData to reset the table after resetting the localdata in the source, but the rendered piece didn’t change together. The column showing the sparklines didn’t change synchronously. I need to execute $(“#dataTable”).jqxDataTable again. {rendered:rendered}); will change. And there is another problem here. When filtering data, when screening the desired data, this sparklines can’t showHi JenkeNg,
On re-render, it will create New HTML Elements i.e you should not have identical ids. Also in case of rendering identical types of elements, you may use Class selector and the jQuery’s each function to loop through them.
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.comOk, thanks for the answer, but your answer is still a bit incomplete, then I am updating the sparkline in jqxDataTable, what should I do if there is no bad situation, if there is a demonstration, it will be perfect.
At present, the most troublesome thing for me is that there is always an error “Error: Invalid Selector – #sparklineContainer0! Please, check whether the used ID or CSS Class name is correct.”, and I am an official demo that is almost completely copied. Code
Hi JenkeNg,
This is an error which will happen when you try to initialize something which is not in the DOM or try to set a property, call a method of something which is not in the DOM. Could you share a jsfiddle.net sample with your scenario and the issue which happens ?
Best Regards,
Peter StoevjQWidgets Team
https://www.jqwidgets.comHi Peter Stoev,
Thank you again for your answer.I understand what you mean.
If an error occurs because of my code, I can provide a code example. But this fault already exists in the official demo. If you add “filterable:true” to the “sparkline” example and do the filtering, you will find this fault. -
AuthorPosts
You must be logged in to reply to this topic.