Change Datatables options through jQuery - javascript

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.

Related

Get the very last row in a table, although it isn't scrolled into current sight

I have a table which contains many rows. Only the nth-oldest rows are visible. The newer rows are hidden and one has got to use a scrollbar to move them into sight.
I have written the following Cypress-statement:
cy.get("span.class1.class2").last().click();
It returns the last row, which is visible, when the view becomes shown. Marked red in the screenshot.
But what I like to have is the very last row in the table. Marked blue.
Is that possible with a simple Cypress-statement?
Or do I have to move the scrollbar down first?
If so: How can I scroll downwards using Cypress?
Get the parent class of that table and you could try using scrollTo()option.
cypress documentation:
https://docs.cypress.io/api/commands/scrollto.html#Syntax
Examples:
cy.scrollTo(0, 500) // Scroll the window 500px down
cy.get('.sidebar').scrollTo('bottom') // Scroll 'sidebar' to its bottom
There is another option called .scrollIntoView(), but I think in your cases the scrollTo() might help.

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});

How to change jqGrid plusicon for subgrid position?

I have a jqGrid, which has a subgrid opening at the 3rd column of main grid. However, my plusicon are displaying in the beggining of each row (as 1st column).
Is there a way so that I can show the plusicon at 3rd column?
You can use remapColumnsByName or remapColumns methods to reorder the position of the column, with "+" icons, used to expand/collapse the subgrid.
See the demo, which uses
$("#list").jqGrid("remapColumnsByName", ["rn", "act", "name", "subgrid"], true);
to reorder first columns of the grid. See the below picture, where I marked in red color the icons of subgrid column.
The approach works on free jqGrid, because it's code is independent on the exact position of subgrid or multiselect column. The code of old jqGrid requires that subgrid column are placed at the beginning.

How to design data structure for a specific table header

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

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/

Categories