I need to swap panels in a list. I've tried to reorder rows in a grid but I need to put a little more informations in the item so a panel will be nicely to show.
Must be the classic drag icon (four arrows) like here http://examples1.ext.net/#/DragDrop/Panel/Swap_Dropable_Panel/
This example is very close that I want. I need only vertical swap like this one http://tof2k.com/ext/sortable/ ( this could be just what I need but seems it don't use ExtJS themes and I don't know if I can put more information inside the items - and it is a little ugly too).
Some ideas?
Perhaps using a grid with a templatecolumn and drag and drop resolve your issue.
FIDDLE: https://fiddle.sencha.com/#fiddle/1i7l
Also, you can use CSS to change row.
.customRow .x-grid-cell-inner {
margin: 5px 5px 5px 5px;
background-color: yellow;
}
Remove de comment
//cls: 'customRow'
on fiddle (line 58).
Related
In ag-Grid, I want to show action buttons when a row is hovered like in Gmail. The action buttons have to appear at the right end of grid irrespective of scroll position.
There is one approach mentioned at https://blog.ag-grid.com/build-email-client-with-ag-grid-like-gmail/. They have used a cellRenderer on the last column and showed buttons in it when "onCellMouseOver" happens. This approach would work only if the last column (which uses cellRenderer) is always in view. If that column goes out of view, action buttons will also go out of view.
I cannot use this approach since in my case, there are many columns and all columns in my grid do not fit on the screen at the same time. So, there can be any column at the right end depending on scroll position and thus we don't know which column to add cellRenderer on.
How will we achieve this?
Here is a plunk that demonstrates my solution: https://plnkr.co/edit/X4hCimLy6aL3j4eh
It turns out that this can be achieved using just CSS. Here is how I did it:
Add a column for showing action buttons. Use cellRenderer to render buttons in it. Pin it to right.
Using CSS,
absolute position the ag-pinned-right-cols-container to right
hide right header and spacer by setting their width 0
for rows which are not being hovered, hide action buttons cell in them by setting their padding & width 0
Here is complete CSS with explanation:
/* Hide right header and spacer */
.ag-pinned-right-header,
.ag-horizontal-right-spacer {
width: 0 !important;
min-width: 0 !important;
}
/* Add absolute position so that action buttons column will appear on top of other columns.
pointer-events: none to pass on mouse events to behind columns */
.ag-pinned-right-cols-container {
position: absolute !important;
right: 0;
pointer-events: none;
}
/* Reset pointer-events so that click can happen on action buttons */
.ag-pinned-right-cols-container * {
pointer-events: initial;
}
/* Hide border of right-cols-container */
.ag-pinned-right-cols-container .ag-cell {
border: none !important;
}
/* Show action buttons only for the row that is being hovered.
For rows which are not being hovered, hide them by setting their width and padding to 0. */
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover),
.ag-pinned-right-cols-container .ag-row:not(.ag-row-hover) .ag-cell {
width: 0 !important;
padding: 0 !important;
}
Ag-grid's default row hover and row selected colour has some transparency. Since our action buttons column is placed absolutely over other columns, its background looks darker because of the way those transparent colours blend.
So, it is better to use background colours with no transparency in this method like this:
.ag-theme-alpine {
--ag-row-hover-color: hsl(207, 90%, 94%);
--ag-selected-row-background-color: hsl(207, 87%, 86%);
}
Overall,
Pros:-
It's a drop-in solution. You can just drop above CSS in your code and you will get the button on hover functionality.
This approach is framework agnostic. I have tested it on React and Angular. (For Angular, you will have to use ng-deep to workaround style encapsulation)
Cons:-
This won't work if you already have one or more columns pinned to the right
A future version of ag-grid might use different class names. So this CSS might need to be updated while upgrading ag-grid
I'm using a layout panel with some layers. One of the layers is quite simple but I want it to have a float: right on the element. But this is actually not working because subwidgets are styled with style="postition: absolute; left: 0px; ..." which overrides the styling and so the subpanels/widgets will always be placed on the left. Any workaround for this?
After adding your element to your layout container, did you try setWidgetHorizontalPosition ?
If above method does not work and you want to use float right, maybe you can use a non-layout system with FlowPanel maybe. Otherwise you will have to fix the position and width/height of your components but you may loose responsive design.
Last trick : If you really need to change the absolute style. In your component do something like this (do this after your component has been added to the dom)
this.getElement().getParent().getStyle().set.....
You can reset whatever property you want but this might break your layout
I am using bootstrap in an Ruby on Rails app. I use Firefox. I find that the height of the dropdown field (select tag) is too small.However the height of the text fields are appropriate. I had too add the below code to application.css to fix it:
select {
height: 38px !important;
}
Now dropdown shows its content properly though its overall height (box) is a bit bigger that text fields. Is there a neater way to fix the issue?
I found it more appropriate to remove styling from application.scss and modify the app/assets/stylesheets/custom.css.scss instead. custom.css.scss is generated by Bootstrap. The padding for all FORM elements was set to 10px in that file. I set padding for SELECT element to 2px and left the rest intact.
Trying to figure out how to add the expand / collapse arrow images on Dojo's Accordion dijit.layout.AccordionContainer just like the dijitTitlePane / dojox.widget.TitleGroup has.
Did a bit of research to find out where the TitlePane was getting the arrow images from and found it was a sprite image. I've created some extra code that uses that same sprite image to add the expand and collapse arrows to the AccordionPane. Have to add some extra CSS to the theme in order to make this work:
Add the following near line 2625 in /themes/THEME_NAME/THEME_NAME.css:
.THEME_NAME .dijitAccordionArrow {
background:url("images/spriteArrows.png") no-repeat -14px top;
width:7px;
height:8px;
margin-top:-1px;
}
.THEME_NAME .dijitAccordionTitleSelected .dijitAccordionArrow {
background:url("images/spriteArrows.png") no-repeat;
margin-top:-1px;
}
Replace THEME_NAME with whatever the name of your stock theme (i.e. claro) or the name of your custom theme.
I have a problem with DataGrid in gwt 2.4. I made table with CellTable, and everything worked fine. But I needed fixed header, and then just replaced CellTable with DataGrid. I had problem with .css file, but than has been resolved.
Now, the problem is that every column have fixed width, and table put every row just in visible part of screen.
This is new and old screen shots, to make things more clear :)
http://img832.imageshack.us/img832/5026/oldscreenshot.jpg
http://img834.imageshack.us/img834/1489/newscreenshot.jpg
Can someone help to make old looking, but with fixed header.
You can set a fixed width for each column of the data grid:
dataGrid.setColumnWidth(sampleColumn, 40, Unit.PX);
and expand the total data grid width:
dataGrid.setWidth("100%"); // choose the most useful in your app
dataGrid.setWidth("1400px");
I'm not sure what the right answer is, but I don't think the previous responders understood the question.
Basically, you want dataGrid to use "table-layout: auto" instead of "fixed". This is what cellTable does. Table columns are auto-sized based on content.
This is easy for the content table, but to get the header-freeze, dataGrid is using a separate div/table for the header. Therefore, the header table's columns need to be explicitly sized based on the data table. They also need to be resized anytime the table changes (browser resizes, etc.). I plan on adding resizeable cols on a dataGrid, so I'll be hitting this same challenge soon I expect and will update when I have something more explicit if anyone is still tracking this thread...
need to wrap your content in your td with an inner div. and make sure the overflow-x is set to hidden.
table {
overflow: hidden;
white-space: nowrap;
table-layout: fixed;
}
td div{
overflow-x:hidden;
}