I'm using a slickgrid to display certain values. Upon satisfying a particular condition, i'm highlighting the cells with yellow color using the statement
$($('.grid-canvas').children()[args.row].children[args.cell]).context.style.background = "yellow";
I'm holding this slickgrid under a <div>.
Now as the number of rows increase, a scrollbar appears within the <div>.
As i scroll down to reach the last row and then scroll back up to the first row, the cell colors that were initially there in the cells of the top rows are lost.
Because Slickgrid will redraw the grid upon scrolling (instead of storing all data in DOM tree), so what you set in DOM will be reset, we have to use the API of Slickgrid to set background at specific row, column : grid.setCellCssStyles(key, hash)
https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#setCellCssStyles
you can look demo here: http://jsfiddle.net/n58Cq/90/
Related
All:
I am not good at Data structure, currently what I want to build is a table with two-row header(just like excel, you use the first two row as header, the first row may have several column merged together, and under it(in the second row), there are several columns ), and the crucial feature is it allows user to adjust column width by dragging column(in the second row) right side border.
Current the main difficulty for me is: how to design a data structure to make according column respond to the dragging action, for example:
the columns with black text can be dragged by right side border, and when resize, it only affect the left border position of the column next to it on the right side. The grey column will change accordingly(I am thinking it like event handler, once you drag something under it, it will get updated too) if the total width of the columns under it changed.
Thanks
I have dynamic data in my table. The amount of data in a cell may change. I have implemented a rowHeightGetter method to calculate the height of a row. When I add content to a cell and rerender my table, the content appears and the cell is larger, but if the additional content caused overflow, scrollbars do not show up. Please see the jsfiddle and click on a row. You'll see that you can no longer access the bottom row of the table until you click a second time.
https://jsfiddle.net/3cooper/ed7Ltc6o/1/
It appears that _calculateState() is not getting the actual row heights from the rowHeightGetter methods when it calls
var scrollContentHeight = this._scrollHelper.getContentHeight()
At this point it is getting the height of the rows by checking the rowHeight property on the table. I see in _calculateState() there are other calls that eventually call this._scrollHelper._updateHeightsInViewport() to properly get the height. Should this be done again. Just really started looking into this today - so I could be missing something obvious. Thanks.
Is there a better way to handle this?
Update:
Also, I notice that once a scrollbar appears so that the contents can scroll, if you click a row again, the table with shift down but the scrollbar will not adjust. Then once you start to scroll up the scroll jumps to the correct position and allows you to scroll the entire table correctly.
So, I have a table using the Datatables plugin. This table has a left fixed column to start with as well. Each one of my columns has a button to 'anchor' its column from scrolling, so fixing it in place.
You can change how many left columns you have fixed in the initialization with
new FixedColumns( oTable, {
"iLeftColumns": 1
} );
or "iLeftColumns": 2 and so on.
I already have my programming set to push the column to the far left, so now i just need to overwrite the iLeftColumns accordingly. How would I go about overwriting the datatables initialization with jQuery, on the anchor button click? With one column anchor clicked, iLeftColumns would be 2, but maybe the user anchors another column and makes it 3 and so on.
I am using HTML5 canvas in my application to render a large matrix (1000*1000) of cells that are either filled or not.
However I fail to keep the first column and the first row fixed while allow for scrolling the rest of the matrix. Here's a picture of what I'd like to achieve:
http://i.stack.imgur.com/24kIV.png
The scrolling could either be the CSS/browser scrollbar or a javascript_based scrolling.
Any hints on how to keep the first row and column fixed?
Update:
When scrolling to the left/right the first row should scroll too, same for up/down scrolling and the first column.
You could make a layout with three divs, each one containing a canvas, and scroll the fixed element when the main element is scrolled: http://jsfiddle.net/SjBE5/.
document.getElementById("maindiv").onscroll = function() {
document.getElementById("topdiv").scrollLeft = this.scrollLeft;
document.getElementById("leftdiv").scrollTop = this.scrollTop;
};
I have a table in a div with overflow-x: scroll. So, you can scroll the long table left and right. The first "column" (td's in first position of each tr) should contain labels for the rows. I would like that when you scroll right or left, the contents of the table scroll, but the labels stay fixed so you can always see them.
I initially wanted to create another table to the left of this one, but the catch is the contents of each row is variable, so I don't know the height of each row until after the contents load (making it difficult to set the height of each cell in the "label column." The reason I can't dynamically just update the heights of the label column cells after the content loads is that it is really slow on FF and IE. The slowdown comes from calling clientHeight on the content tr or first td. It takes 5-6 seconds on my first clientHeight call of the content (the rest of them take 0-1ms). Regardless, I don't know of another approach.
Any suggestions?
You could maybe put all the contents of your other cells into the first cell as well, at offset (0,0), so that the height of the label cell is automatically set to the height of the largest component. and then put a layer above them so that they are invisible, and put the label in there.