I have a filter on slick grid header. When I hide a column using setColumns function, the header row gets messed up. Filters overlap each other. Any suggestions?
Figured out solution myself.
Function setColumns is re-initializing the display and additional header row is being added on top. So existing header row has to be removed before setting up columns.
I wrote following line before calling setColumns:
$('.slick-headerrow-column').remove();
Related
I am creating a grid (so something with rows and columns with buttons in the cells) and a slider that should alter the number of columns.
The number of rows is virtually unlimited and, since the grid layout in bootstrap is implemented with a flexbox i should either swap column classes or redraw everything every onchange event.
is there another way in bootstrap or do i need to create a grid layout from scratch and alter the column layout each time?
i managed to do that by adding a counter of elements inside a row and whenever i reach the desired element number i append a new row and start adding elements to the last row
like so
if(indexofrow%element.getColNumber()==0){
indexofrow++;
document.getElementById("canvas").insertAdjacentHTML("beforeend","<div class='row flex-nowrap'/></div>");
drawSingleButton(i,element,arrayOfLayers);
}else{
drawSingleButton(i,element,arrayOfLayers);
indexofrow++;
}
it's probably a cheap workaround but for my case it works
So I have two tables horizontally next to each other. Everything is aligned initially. However, when the element inside one cell of the left table increases in size, it wraps and increases the cell height. How can I align two tables even with the left cell height increased?
Here is the image of what it looks like:
Without wrapping:
With wrapping:
IMHO you have two options.
Use single table so that entire row will have same height. Or
Use div instead of table because div has overflow option. Refer this link
Update after comment:
If you can use jquery, you could do it on page load. Refer this fiddler
Note: height attributes for both table's row and class name. Un-comment jquery line number 3 and execute.
I have a custom bootstrap tooltip that my customer really likes. It works great on various elements. I added it to a datafield of a gridview table, and it Worked (ed) great -- "until" I added an overflow:hidden div to keep the gridview header row fixed.
Now the the tooltip gets occluded by this header row div. I poked around and saw various workarounds - the only one which kind of worked was to use data-container="body" (attribute) or various derivations of that using javascript which placed the tooltip on top of the header row div (when hovering the datafield of the first row in the gridview).
The problem I have with data-container="body" or { container:'body' }is that it overrides the custom style of the tooltip.
I set the width to 500px and I use !important, ... but when I use data-container="body" the width becomes 200px and the background color changes. I played around with z-index:1000; position:relative; in the css which helped the opacity which I have set to 1 but the width/background color still going to bootstrap default.
What is a workaround for this so I can keep my custom tooltip style?
Well, I came up with one -- non-programmatic workaround (which the client is sort of living with) and that is to add two blank rows to the beginning of the gridview and two more rows to the end of the gridview, and that way the rows with data content the popover tooltip doesn't get clipped now by the hidden div. One other thing I tried was to make the overflow div visible. This also worked to prevent clipping the tooltip, but I lost scrollability of the gridview. Is there a workaround for that?
Is there any option to not show grouping header in SlickGrid?
1) I tried to just set it to
.slick-group{
display:none;
}
but all normal rows have set top inline:
<div class="ui-widget-content slick-row even slick-group" style="top:50px"...
That means that even grouping row not shown anymore, the space between grouped row blocks left. So thats not solves my problem.
2)I've found question where one guy hides total row using dataView parameter displayTotalsRow: false. And i wonder maybe there is some displayTotalsRow like paramenter, that hides grouping row?
I had been developing a screen which has lots of data as . It is scrolling with dataTable.(Horizontal Scroll). There is a drpdown which should filter values and should show only eligible TDs in scroll part. Below are Screenshots. I am hiding and showing data based on selection of a dropdown.
Have added a class to all tds and rowspan th so that they can be toggled based on selction of dropdown.
It Shows perfect while fetching all the records. But when I hide columns , columns work perfect but header resizes its headings.
Here is what happens on hiding th and td .td remains same , th resizes
I tried a lot but cud not fix it. Can someone plz help
So I got the solution .
U need to get your table object again and redraw it. After reading so many places about this error it seemed dataTable is still to find a fix for hiding columns in scroll part with rowspan added to it.
What I did was adding a class to all th, td of table which needs to be hidden based on any condition , here based on selection. When I was selecting a partical type I added another class to hide the required th and tds. But Th reset sizes ,might be because of scrolls added.
It resets width of entire header leaving your td as it was . So it looks ugly.
oTable.fnDraw();
Just take reference of your table and draw again.