I have a problem with a jqGrid table that i'm unable to find a solution nor an answer that guides me in the correct direction, i've read some answers in SO but none of them focuses on my problem:
JQGrid data not being displayed
jqgrid fail to display json data
jqGrid fetched json but has empty rows and no data
JqGrid is not able to display data
JQGrid not showing json data
Many of the related questions that i've read so far focuses on populating the grid with JSON data, but that's not my case. The way i fill the grid is with the addRowData method, and it seems to work, because when i inspect the table element on the debug tools of the browser (Chrome 29.0.1547.76 m) and the table, tbody plus all the tr elements exists with the expected data, but they aren't visible!
inspection screenshot
All the rows have the width and height with 0px value, that's why (i suppose) the data doesn't show. But i use the same method to display another tables and the result is visible.
I cannot paste all the code because is messy and spagetty, but i'll try to provide useful information:
// The ConvertTojqGrid method converts the data (array object)
// into the format expected by jqGrid in order to provide the
// colModel and rows
var jqGridData = ConvertTojqGrid(data);
// the divID begins with '#'
var div = jQuery(divID)[0];
var table = divID + '_table'
jQuery(divID).append('<table id="' + table.substr(1) + '"></table>');
// get rid of the '#' in the string ^^^^^^^^^^^^^^^
jQuery(table).jqGrid(
{
autowidth: true,
gridview: true,
headertitles: true,
datatype: 'clientSide',
caption: gridCaption,
colModel: jqGridData.colModel,
records: jqGridData.rows.length,
height: div.clientHeight,
width: div.clientWidth
});
jqGridData.rows.forEach(function(row)
{
jQuery(table).addRowData('row_id', row);
});
The webpage shows a table with data that is displayed as expected but with some columns hidden, on top left of the table a button is placed, this button shows a form with another grid that displays the same table without hidden columns.
All the tables are placed into a runtime-generated div and into this div a table tag is generated in order to contain the grid.
In brief, the problem isn't in obtaining the data nor in filling the table, the problem is that the data is correct and the table is filled but the rows aren't visible.
Any advice will be wellcome.
Try in your jqGrid definition setting datatype: "local".
If that doesn't work, what does your colModel look like, and do you have a sample of the data format you're using to populate a row?
Related
For reference, I am using DataTable.js version 1.10.21 and DataTables Select version 1.3.1
I have created a DataTable with a "Status" column that can be updated. This column also has a filter on it. The filter works perfectly after initial load of the table but after a cell in the status column has been changed, the filter doesn't seem to be seeing the updated data but, instead, still filters on the old data.
This is the js that is being used to update a particular cell in the status column:
NOTE: We've simplified the example to eliminate code that isn't an issue.
var row = document.getElementById("user-id-" + userId);
statusColumn = row.children[4];
statusColumn.innerText = "inactive";
setTimeout(function(){
$('.dataTable').DataTable().reload();
},2000);
I have attempted to use the reload(), draw(), and re-initializing the entire table using dataTable(). None of functions allows the table to filter correctly with the new value. The filter does work but it filters based on the old value that no longer exists in the table.
Below are two screenshots as a visual example.
1st screenshot: Me looking at newly loaded table and me filtering on the status "active.
I am then going to change Aaron McClendon (first row) to "inactive".
2nd screenshot: Me searching on the status "active" again. Aaron should no longer show up since he is now "inactive" but as you can see he does show in the "active" status filter yet his status has been changed to "inactive".
Filtering to other statuses and coming back does not change the results and the only way to begin filtering correctly on the updated data is by reloading the page.
Newly loaded table while filtering on the active status
After updating Aaron McClendon and filtering on the active status
You need to set the data of the cell using the api: https://datatables.net/reference/api/cell().data()
It's difficult to give a detailed answer since you didn't post any of the html markup or enough of your javascript, but based on what you provided, it's probably something like this:
var table = $('.dataTable').DataTable();
var row = document.getElementById("user-id-" + userId);
var statusColumn = row.children[4];
var cell = table.cell( statusColumn );
cell.data( "inactive" ).draw();
I have a tabular form which I need to disbale and re-enable some of the columns based on some conditions.
I have the below javascript in my dynamic action which is working. I am referencing the columns by their names (f01_0001, f01_0002, f02_0001, f02_0002....)
$("[name='f01']").each(function(i){
// columns to be disabled
var coltext5 = $("[name='f05']").get(i).id;
var checkbox8 = $("[name='f08']").get(i).id.substring(0,8);
$("#"+coltext5).prop( "disabled", true );
$("#"+checkbox8).prop( "disabled", true );
})
But the issue I have is, if I switch the position of these columns, or add more editable columns to the tabular form, the name of these columns will be changed.
e.g in the above example, if I add one more textbox before coltext5, then coltext5's name will become f06....
Is there any better way to reference the tabular form columns? like ID or class, something that's static and won't be changed even the position of columns are changed?
Thanks
I've hit this issue before, and I've successfully used data attributes to do it - e.g. https://jeffkemponoracle.com/2016/04/05/declarative-tabular-form-dynamic-totals/
For example, you can set Element Attributes on the "Address" column to data-col="address", and refer to them in javascript using $("[data-col='address']").
Of course, you have to add this to each column you need to refer to.
I am reading data from google spreadsheet from multiple sheets and displaying the retrieved data in the tabular format. I am creating table rows having data in an ajax call once data is retrieved i.e.
$tbody.append('<tr><td>'+rows[i][6]+'</td>'+'<td>'+rows[i][0]+'</td><td>'+rows[i][1]+'</td><td>'+rows[i][2]+'</td><td>'+rows[i][3]+'</td><td>'+rows[i][4]+'</td><td>'+rows[i][5]+'</td><td><a id="UpdateLink" href="#">Update</a></tr>');
On the very first run the data appears fine but when I happen to have data from another sheet I see no paging is applied and when I click any header column to perform the sort It displays data from the first sheet.
Upon google It was suggested to use destroy attribute for datatable i.e.
$("#spreadsheetdata).DataTable({
destroy:true
});
but behavior remains the same.
I have also applied
if ( $.fn.dataTable.isDataTable( '#spreadsheetdata' ) ) {
//dataTableInstance = $('#spreadsheetdata').DataTable();
}
else {
dataTableInstance = $('#spreadsheetdata').DataTable( {
paging:true,
ordering:true,
info:true
});
}
but no desirable results.
please guide thanks.
Rather adding the rows with the jQuery append method, you'll need to use the DataTables row.add() method.
If dataTableInstance is the variable you're assigning to your table and rows is the array of data from your Google spreadsheet, this syntax should allow you to append new rows to an existing table:
dataTableInstance.row.add([
rows[i][6],
rows[i][0],
rows[i][1],
rows[i][2],
rows[i][3],
rows[i][4],
rows[i][5],
'<a id="UpdateLink" href="#">Update</a>'
]).draw();
The reason appending the new rows with jQuery doesn't work is that DataTables maintains its own client-side state -- see search(), order(), and page() for examples.
So, if you add rows directly to the table body, they'll disappear as soon as you sort, search, etc.
This is a problem I had with jQuery Datatables that I really don't know why it is happening in the first place!
I have multiple select elements which all filters the original data set. I do the filtering logic on the select change event.
This my Datatables init (using state saving, from the documentation) :
var table = $('#orders-listing').DataTable({
bStateSave: true,
bFilter:true,
paging: true,
bPaginate:true,
language: { url: /* Language File URL */ },
fnStateSave: function(oSettings, oData){
localStorage.setItem('DataTables_'+window.location.pathname, JSON.stringify(oData));
},
fnStateLoad: function(oSettings){
return JSON.parse(localStorage.getItem('DataTables_'+window.location.pathname));
}
});
And this is my filtering logic on the select change event:
$('.filter-select').on('change', function() {
$.fn.dataTable.ext.afnFiltering.push(
function(settings, data, dataIndex) {
// Some logic, return a boolean, wether we keep the row being processed or not.
}
);
table.draw();
$.fn.dataTable.ext.afnFiltering.pop();
});
Now, the filtering works fine. The rows, pagination links, everything changes accordingly.
But, once I click on the 2nd link on the pagination links, the original dataset returns.
Example: I had 200 rows in the first place, after filtering, it was reduced to 150 (So 50 rows were filtered, and removed from the original dataset), then once I click on the second link on the pagination, the original dataset returns, with the first 200 rows.
What am I missing here ? What is causing the original dataset to return when paginating ?
Any help is greatly appreciated. Thanks.
You're doing $.fn.dataTable.ext.afnFiltering.pop() immediately after drawing the table with draw() which removes your custom filter and it will no longer be applied if table is sorted, page is changed, etc.
Try adding $.fn.dataTable.ext.afnFiltering.pop() before $.fn.dataTable.ext.afnFiltering.push() to remove previous custom filter only on filter change but before adding a new filter.
I have some javascript that changes the content of certain cells in a handsontable grid.
The issue I have found is that when I change the content of one of the cells the frozen column rows don't change accordingly.
Is there a function that can be run to check the sizes of each row and resize accordingly?
I have a Jsfiddle which shows the issue:
http://jsfiddle.net/JammyDodger231/145bL7ej/
var myData = Handsontable.helper.createSpreadsheetData(4, 20);
hot = new Handsontable(container, {
data: myData,
rowHeaders: true,
colHeaders: true,
fixedRowsTop: 2,
fixedColumnsLeft: 2
});
//Hardcoded just to show issue, this isnt where the content would be changed
$('.htCore tbody tr:nth-child(2) td:nth-child(5)').html("Test <br /><br />");
Your problem is that you should NEVER manually change content or CSS on the table that Handsontable renders for you. It is a stateless table which will get overriden as soon as you make any changes that triggers a change event. Read this answer to get a more detailed description:
CSS applied on Handsontable grid row on Scroll is not working properly
What you should be doing instead is using the methods that Handsontable supplies to you. In your case, you can use hot.setDataAtCell(row, col, value). You could also directly change myData since Handson uses a reference to it. Anything but manually changing the DOM.