I'm using the Tabulator data tree. I would like to change the row padding only for level 0. Is that possible?
possibly, I havent tested this but if you use a rowFormatter and use getElement() on it, you might be able to change the padding that survives anything Tabulator does behind the scenes. When I do an inspect of one of my rows, I see it sets padding-left:0px , so at least you know that Tabulator uses that, and if you change it, it might get overwritten.
rowFormatter was the key. Thank you!
rowFormatter:function(row){
if(row._row.modules.dataTree.index == 0){ //level 0
var cells = row.getCells();
cells.forEach((cell) => {
cell.getElement().style.paddingTop = "24px";
});
}
},
Related
I have the following problem,
I want to mark the background with another color when I click through the rows of a table in dc.js without losing the filtering that is done.
I have noticed that the command
dc.redrawAll();
Does not allow the bottom of the row to be filled, but if I remove it, I lose the ability to filter the other graphics when clicking.
tabla.on('pretransition', function (table) {
table.selectAll('td.dc-table-column')
.on('click',function(d){
if(filterKeys.indexOf(d.key)===-1)
filterKeys.push(d.key);
else
filterKeys = filterKeys.filter(k => k != d.key);
if(filterKeys.length === 0)
foodim.filter(null);
else
foodim.filterFunction(function(d) {
return filterKeys.indexOf(d) !== -1;
})
//dc.redrawAll();
});
table.selectAll('tr.dc-table-row')
.on('click',function(d){
console.log($(this))
if($(this).hasClass('bg-info')){
$(this).removeClass('bg-info');
} else {
$(this).addClass('bg-info').siblings().removeClass('bg-info');
}
})
});
Can someone help me please.
https://jsfiddle.net/ajey2987/kfmfkLj0/18/
I tried this first on mobile and I think hover was covering up the effect you wanted, so I didn't see it either way.
It's usually better to let the styles be driven by the data where possible, rather than having lots of different event handlers working independently to change the styles.
In this case, it appears that the redraw causes the table to replace the elements, losing your class annotation.
Instead we can teach the table how to apply your class based on whether the row's key is in filterKeys, also in the pretransition handler:
table.selectAll('tr.dc-table-row')
.classed('bg-info', function(d) {
return filterKeys.indexOf(d.key)!==-1;
});
Now we get the desired effect. I think this code easier to reason about, too.
In addition, I found that the hover effect from bootstrap was making the effect go away when a selected row is hovered. This is because it has a more specific selector. So I added an even more specific one:
.table-hover>tbody>tr.bg-info:hover>td {
background-color: #6EaEe6;
}
Fork of your fiddle: https://jsfiddle.net/gordonwoodhull/e0td50ug/8/
I am trying to apply CSS to each of the DataTable cells based on its value, using the drawCallback().The CSS gets applied to a few cells and not all. Here is the JsFiddle to my issue.Has anyone come across this issue and found a solution or have any ideas on this.Please suggest!
"drawCallback": function( settings ) {
var api = this.api();
var visibleRows=api.rows( {page:'current'} ).data();
if(visibleRows.length >= 1){
for(var j=1;j<visibleRows[visibleRows.length -1].length;j++){
$("td:eq("+j+")", settings.nTBody.childNodes[visibleRows.length -1]).addClass(visibleRows[visibleRows.length -1][j]);
}
}
},
Like #charlietfl said, you don't really want to be using drawCallback to format the rows, and you would probably be better off using createdRow (rowCallback) to do this formatting.
drawCallback is called on every draw event, meaning that it's really meant to be used to update rows that have just been added or work with data that has just been updated.
createdRow on the other hand, is designed to be called whenever a row is created, which seems to be what you really want. In this documentation (example), you can see that the author displays how to use this option to add a class to certain rows, which seems to be the closest to what you want to do.
As far as I can tell, you want to make every cell have a CSS class that is the same as the text in the cell (correct me if I'm wrong). The easiest way to do that with createdRow would be as follows:
"createdRow": function ( row, data, index ) {
for(var i = 0;i<data.length;i++){
$('td', row).eq(i).addClass(data[i]);
//The above line assumes that you want to add a CSS class named "red" to a
//field that has the text "red" in it, if not, you can change the logic
}
}
Just include this in your initialization options for the .DataTables() call.
I had to make some assumptions about the exact logic for what classes get added to what columns, but if they are correct, then this should add a class to each field that is named the same as the text in that field.
I am trying to scroll to a row with a specific id in DataTable. following is the code for it.
function scroll_row(int_id) {
var obj_element = document.getElementById(int_id);
if(obj_element != null) {
var int_scroll_pos = obj_element.offsetTop;
$('#myTable').parent().scrollTop(int_scroll_pos-10);
}
}
But the problem with this is that the obj_element is giving me null while getting it by id.
For example if I have 50 rows in my data-table and I try to give the id of the 40th element while scroll being at the top it returns me null.
But when I scroll down somewhere near to that element. It returns the value for getElementById as it should.
I don't know what's the problem here. Anyone knows about this?
I also tried it doing this way https://datatables.net/forums/discussion/33/using-fngetposition-to-find-a-tr-by-id
$("#myTable").fnGetPosition(document.getElementById("262617"))
but in this case also it says fnGetPosition is not a function.
This is how my datatable is
tableSettings = {
...
}
var myTable = $('#myTable').DataTable(tableSettings);
I am not able to understand what is happening in both the cases I mentioned. Hoping to get some help. Thanks :)
Edit - Adding an image with example
image with html
The one with id = 140876 is the last tr row of the datatable. If I'm scrolled up top to the first element of the datatable and try document.getElementById("140876") it gives me null. But I get the value if I'm scrolled down to the bottom. Same goes for every other row. The rows down are returning null when I'm scrolled up.
P.S. had to remove the first image as right now I'm only allowed to add 1 link.
To use fnGetPosition, you should use it like this:
var table = $('#myTable').dataTable(); // with a lower 'd'
var row_index = table.fnGetPosition(this)[0];
Here is a working example: http://live.datatables.net/xoqidaqi/1/
It's a corrected version of the faulty example found here: https://datatables.net/forums/discussion/21582/fngetposition-undefined
You will get the first/all column value of the table.
Assign tr class on tr in the body tag of the table.
The column will be changed according to the number in eq(0) for the first column / eq(1) for the second column and so on.
var table=$('#ID_OF_THE_TABLE').DataTable();
table.$('.bodytr').each(function()
{
console.log((this).find("td").eq(0).html());
});
I'm trying to highlight a row and I've googled for a while however all solutions use functions that don't even exist such as getRow() or highlight().
Does anyone have a solution for it?
I've tried the above and the getView().select(record)
Neither has worked
Thanks
Would selecting the row suffice?
gridPanel.getSelectionModel().select([recordToSelect]);
You can use the rowClass to modify a row based on record conditions.
yourGrid.getView().getRowClass = function(record, rowIndex, rowParams, store){
return record.get('status').toLowerCase(); // class selection condition
}
See the JSFiddle example for this (very basic example, just show that the row class get ressetted after each change of the record.)
grid.getSelectionModel().select(0)
When I use $('#mygrid').jqGrid('GridUnload'); my grid is destroyed: no pager/ no header.
In a wiki I found:
The only difference to previous method is that the grid is destroyed, but the
table element and pager (if any) are left ready to be used again.
I can't find any difference between GridUnload/ GridDestroy or do I something wrong?
I use jqGrid 3.8.
To be able to create jqGrid on the page you have to insert an empty <table> element on the place of the page where you want see the grid. The simplest example of the table element is <table id="mygrid"></table>.
The empty <table> element itself will be not seen on the page till you call $('#mygrid').jqGrid({...}) and the grid elements like column headers will be created.
The method GridDestroy works like jQuery.remove. It deletes all elements which belong to the grid inclusve the <table> element.
The method GridUnload on the other hand delete all, but the empty <table> element stay on the page. So you are able to create new grid on the same place. The method GridUnload is very usefull if you need create on one place different grids depend on different conditions. Look at the old answer with the demo. The demo shows how two different grids can by dynamically created on the same place. If you would be just replace GridUnload in the code to GridDestroy the demo will be not work: after destroying of the first grid no other grids will be created on the same place.
In addition to Oleg's answer I would like to point out that GridUnload does a little more that just remove the grid from the table. It removes the original HTML table element(and the pager), and ads an identical one in its place(at least in 4.5.4 it does).
This means that if you attached some event handlers to the table HTML element(i.e with jquery on, like ('#gridID').on('event','selector',handler)) they will also be removed. Consiquently the events will not fire on the new grid if you replace the old grid with a new one...
Oleg's answer works fine for me as long as I have no Group headers.
When I add group header row with 'setGroupHeaders'
the results of a 'GridUnload' followed by a $('#mygrid').jqGrid({...}) are not consistent.
It works fine in Chrome but not in IE11.
In IE11, each 'jqg-third-row-header' item ends up rendered on different rows (diagonally).
I am using free-jqGrid:query.jqgrid.src.js version 4.13.4 for debugging.
I traced the problem down to code, in this file, that begins with line 9936:
if (o.useColSpanStyle) {
// Increase the height of resizing span of visible headers
$htable.find("span.ui-jqgrid-resize").each(function () {
var $parent = $(this).parent();
if ($parent.is(":visible")) {
this.style.cssText = "height:" + $parent.height() + "px !important; cursor:col-resize;";
//this.style.cssText = "height:" + $parent.css('line-height'); + "px !important;cursor:col-resize;";
}
});
// Set position of the sortable div (the main lable)
// with the column header text to the middle of the cell.
// One should not do this for hidden headers.
$htable.find(".ui-th-column>div").each(function () {
var $ts = $(this), $parent = $ts.parent();
if ($parent.is(":visible") && $parent.is(":has(span.ui-jqgrid-resize)") && !($ts.hasClass("ui-jqgrid-rotate") || $ts.hasClass("ui-jqgrid-rotateOldIE"))) {
// !!! it seems be wrong now
$ts.css("top", ($parent.height() - $ts.outerHeight(true)) / 2 + "px");
// $ts.css("top", ($parent.css('line-height') - $ts.css('line-height')) / 2 + "px");
}
});
}
$(ts).triggerHandler("jqGridAfterSetGroupHeaders");
});
This code sets the height and top css values related to each 'jqg-third-row-header' item. This leads to a tall and diagonal layout of the 'jqg-third-row-header'
Potential Bug:.
The $parent.height() and $ts.height() methods, above, return the former jqGrid table height in IE11. In Chrome they return the 'th' computed height(top = 0).
I added and tested the 2 commented lines that use line-height.
IE11 works fine when line-height is used.
I do not completely understand the JqGrid resize logic, so this may not be a fix.
Alternate Solution:
If you specify.
colModel:
{
label: 'D',
name: 'W',
width: 6,
align: 'center',
resizable:false //required for IE11 multiple calls to this init()
},
When resizable is false the code above is not encountered and the height and top are not set.
Oleg's jqGrid is a very nice control. Perhaps he can test his demo grid with a groupheader on IE11.