Slick Grid column not rendering properly - javascript

See snapshot attached very first time when grid is created it shows like this snapshot, once we change size of any column by dragging or we change displayed column by right click and check/uncheck column to display or hide then column will align properly and also shows data.
one more thing when grid is created and rendered at that time area where this grid render is hidden, i mean there are tab layout and in one of tab these grid is created and active tab is different, does it make any problem.?

The grid size is rendered based on the current element size where it is attached to. Thus, if the element is hidden it will not show the correct layout. I usually call {grid}.resizeCanvas() when i show the tab. Alternatively, you can show the element while creating the grid and hide it later on.

Related

Bokeh - how to create a hideable sidebar

I have a bokeh project that looks very similar to this https://demo.bokeh.org/movies
Now I would like to make it possible to hide/unhide the column on the left.
I know how to hide it following the solution from here https://discourse.bokeh.org/t/hiding-bokeh-elements/4335/2
The problem is now where to put a button which would show the column again.
I thought of the following:
When hiding the column make another button visible which will allow to unhide the column. This is easy but adding a new widget to the layout would defeat the purpose of hiding the column since either way I would have a big button visible on the screen affecting the position of the figure. Is there some way of adding a new button widget which does not affect the whole layout?
Adding a new tool to the figure which would call the unhide the column. I am not sure though if this can be done easily.

Displaying an warning Tooltip on Handsontable column by custom renderer

I have an instance of HandsonTable where I need to display an warning tooltip stating as required field. One cell of the table contains delete button and as soon as the table becomes empty(no rows having data) whether by delete button action or while the page load itself, I want to show a warning/alert tooltip.
I have made a custom renderer where right now I am able to display an image on the above mentioned conditions. But I am not able to apply the tooltip probably because tootltip is displayed on mouse hover. I need to render an element which directly shows the tooltip(without mouse hover) when the table is empty.

Drag and Drop - Create a new Grid Row while dragging

I am using Sortable Grid from here to perform a drag and drop in my app. However, I want to dynamically create a Row while dropping.
I mean say if there are two rows in Sortable Grid. If user drags an element and thinks of creating the third row before dropping it, then he/she should be able to do it by dropping below the second row. How do I do it?
Use a div below the boxes, and use ondragenter to prepare the program for a new row. I don't know how the plugin works, but this should help. Make the div however high you want, and that will be the distance beneath the list that can be selected (I recommend the height of the grid boxes)

scrollIntoView() is not working outside the debugger

I have one window with border layout. In center I am using panel on which loading grids based on the selection of tabs from west side. Now the problem is when I am loading grid then grids are one on top of another. And then I need to scroll down to check complete grid. I want to see grid in panel if suppose i sellect second tab, first grid should move up and second grid should come into view.
I have used many methods but not getting success.
One of the code where I am getting bit of success,
onSelectionBtnClick : function(btn){
grid = me.someGrid(headersNode);
me.gridContainer.setLoading(false);
grid.body.dom.scrollIntoView(); // This line is for view
}
Here grid is coming in view but only in debugger, once I come out from debugger It coming same as previous. Can any body suggest what I am doing wrong.

Dojo(x) Widgets within HTML table do not resize

I have the following page using Dojo 1.3.1 javascript toolkit
Content Pane
HTML table two columns, N rows
Column 1 (left): text
Column 2 (right) Dojo widget (can be any, but mostly Grids, pullodwn, etc)
Problem:
When page loads, it renders Ok (the type of widget and the number per page are determined at runtime, so I cannot manage this with static CSS)
When I add rows to the grid, while it is embedded in the Table cell
<td> grid </td>
the the given row (where the grid is embedded) gets
proportionally taller and
everything below the grid disappears and there is no scroll bars on the Content Pane
to get to the the rows below.
I do not know how to solve it, I have set 100% or auto height and width on
everything around the page. That does not help.
I am wondering if my design approach is wrong and it is unsolveable.
I have read about people telling not to use Tables for layout, but
I do not know at design time the order and the type of controls that I will
be displaying.
How else can this be done?
I think the problem is that when a grid is within a Table cell,
and the grid expands, the cell expands, but the holding content pane is not aware
it so borders do not get redrawn.
You could use CSS for layout -- what is it that tables can do and CSS don't? Or, you could try using another dojo grid instead of that HTML table, depending on what you're after.
Dijit's widgets work like normal nodes as much as possible. But many widgets, especially ones that let the user define what size things are (as you can with column widths in the grid) need to know specific dimensions.
The good news is that with most of these widgets, you can get an instance of the widget, and call widget.resize();

Categories