How to design data structure for a specific table header - javascript

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

Related

How to remove grid column header highlight (bold + underline) when applying menu filter in Ext Js?

I have been using Ext Js' grid panel with menus applied to the column headers (default).
Whenever I apply a filter to the column through the menu, the column header gets highlighted with it's title getting bold and underlined.
I have tried to find a way to remove it, but could not find any event or method to solve this problem. I want my application to remove all highlights before applying a new one, so that it becomes impossible to have 2 columns with highlights on their title simultaneously.
Is there any way to implement this? Or simply disable the highlights, so that no column header titles get highlighted when filtered...
Obs: I am applying a store.clearFilter() whenever the column filter is changed, and the header is still not getting back to normal.
Obs2: Could not post images to illustrate due to stack's reputation restrictions (second time posting).
You can simple override the filterCls to remove the highlight:
Ext.override(Ext.grid.filters.Filters, {filterCls: Ext.baseCSSPrefix});

Is it a way to put border around a Grafana row?

I made a Grafana's dashboard who is created by JavaScript and now I think I should add a border around each row to make reading easier.
That's the actual view:
but as you can see we can't see easily which row is for which "name".
So what I want to do is something like this:
There is no border option but you could use row titles and row height to separate the rows visually:
The option for row options can be found in the row menu on the left hand side. Here are the row options:
There you can choose the title size and you can set the height to create some space between rows.

Slickgrid cell colors lost on scrolling

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/

How to Fix position of headers in subgrid of JQGrid?

I've a sub-grid and height of sub-grid is set to auto.
height:"auto"
Here, I need to fix the position of headers, When i scroll down. But there is no scroll bar for sub-grid. Because i don't want multiple scroll bars in side my grid. Only one scroll bar.
Thanks in advance.
If the column headers of the subgrid will be fixed during scrolling of the main grid the headers will be overlapped with the contain of the next row of the main grid. In any way it is not possible what you want.
One tip as a workaround which I can suggest you: you can overwrite default tooltips shown if the mouse cursor is over the cells of subgrid. The default tooltips are the same as the cell contain. You can change behavior using cellattr (see the answer and another one as an example). The colModel element in the subgrid having
cellattr: function () { return ' title="My column name"'; }
will display the text "My column name" as the tooltip. I personally use the way for all columns having formatter: 'checkbox'. If you have many such columns and you want to examine some column in the middle of grid then it helps to determine to which column the cell belongs. In your case you have the same problem. So you can use the same cellattr property of the column.

Scrollable HTML table with top row and left column frozen

Has anyone been able to implement a scrollable table in HTML where the TOP row and LEFT columns are frozen, but the rest of the table is scrollable? A perfect example of this is:
Google Squared
I tried to reverse engineer the code for the google squared table, but I have been unsuccessful so far.
Note: I need the ability to FREEZE the TOP ROW and the LEFT COLUMN at the same time.
There's a working example at http://ajaxian.com/archives/freeze-pane-functionality that should be easy to duplicate. Be sure to note the comments -- many of the users have made helpful suggestions for improving the script.
Per #Nirk's request, a direct link to the active demo is at http://www.disconova.com/open_source/files/freezepanes.htm.
Go with a basic structure like this-
table
row
column (blank)
column
table (1 row high, column headers)
row
column
table (1 column wide, row headers)
column
div (fixed height & width, overflow auto)
table (actual data)
Set a fixed table-layout and specify column widths in pixels explicitly. You should be able to achieve the same effect.
i have a version of this in use (for a Gantt-chart style display).
it uses 3 tables: 1 for left column (the rows), 1 for top (columns), and then the data.
you need to work hard to get the cells to match sizes with the ones they match up to (
table layout-fixed can help achieve this).
The tables then are placed in some divs; the left and top divs have (as suggested above) height & width and overflow-auto in their css.
You then hook up some javascript to sync the scrolling of the left / top divs with the inner one...
As I recall there was a fair bit of 'curse-and-try-again', but it can be done with minimal js.
hth
If you use jQuery there's a lot of plugins for tables with fixed head.
You need Scrollable (jQuery plugin)
Demo is here

Categories