Hi Have a grid implemented third-party library AG-Grid. This grid has editable feature to edit rows.
And while editing I am rendering Bootstrap dropdown to update value of Year column as shown in below example:
Editable Grid - Dropdown Issue
When I click on the dropdown its li elements are not displaying properly as it is hidden behind the grid.
Is there any solution for this ?
This is a bit old, but for anyone else looking:
If you set the isPopup() function on your cell editor to return true you shouldn't have to fight with the CSS of the component. Allows the dropdown to render over the other cells without any CSS edits.
If you want your editor to appear in a popup (such as a dropdown
list), then you can have it appear in a popup. The popup will appear
over the cell, however it will not change the contents of the cell.
Behind the popup the cell will remain intact until after editing is
finished which will result in the cell being refreshed.
Related
I'm not sure who here is familiar with using custom CSS styling within the Mendix Low-Code Development platform, but I'm running low on ideas so I figured it was worth the shot.
So for the app we’re working on, one of the things we have is a popup that comes up that users can input information on. It has an autocomplete widget, two date pickers, a radio buttons widget, and a template grid, and then below all of these input widgets are two buttons (Continue and Cancel). The template grid has the paging buttons active on it, and has some custom CSS styling active on it to set it to a specific height, enable y-axis scrolling on autoflow, and move the paging buttons to the bottom of the template grid instead of the top.
Clicking to go anywhere but the first or last page works fine, however clicking the “last page” button, or clicking the “next page” button to go to the last page, will result in everything but the template grid, and the continue and cancel buttons disappearing, and the template grid’s height shrinks to an unusable level. In the opposite direction, clicking the “first page” button, or clicking the “previous page” button to go the the first page, will result in essentially the entire popup being wiped out, with all the input widgets and action buttons disappearing, and leaving just a white page.
After looking around, it seems it’s due to some custom CSS that I had taken from a Mendix community forum post that I used to move the paging buttons on the template grid to the bottom of the grid as opposed to the top that’s causing the issue. If it’s because of issues with the paging buttons trying to readjust, is there a way to edit this CSS code so that these issues do not happen? The CSS code I used is shown below, any critiques on it would be super appreciated. Thank you!
.mx-grid.mx-templategrid{
display: flex;
flex-direction:column;
}
.mx-grid-searchbar{
order: 1;
}
.mx-grid-controlbar{
order: 2;
}
.mx-grid-content{
order: 1;
}
Using a default/vertical form, the bootstrap documentation suggests that the submit button sits underneath the various inputs but that's not the case in my form.
When the browser has a large viewing space, it sits beside the last input field and is not in line. If you resize the browser to a phone or tablet width, Responsive takes over and it displays correctly.
Changing the wrapping div from .span12 to .span3 pushes the button down, but it seems like a hackish fix because adding .span3 to the inputs and buttons to make them uniform in size yields the button pushed off to the side.
Am I missing some markup or is there an issue with Bootstrap? In their docs, the button is preceded by a checkbox label and some help text wrapped in a p - so that could be affecting their styling to make it look correct.
You have to put your submit button in a div with the class controls.
If you check the source on the Bootstrap documentation page, they even divide all the inputs and buttons in control-groups and controls.
Been working with the checkcolumn plugin, I've discovered that when I click on any cell in that column, it doesn't highlight. I'm going to assume this means that the cell is not focused.
This has the effect of that when another cell receives focus, the grid scrolls back up to its last/current focused cell whenever I click on any cell in the checkbox column. I could scroll halfway down and click on a checkbox and if a textfield at the start of the grid had focus the grid will scroll back up.
Strangely enough when I navigate using the keyboard the cell is highlighted as expected, so this is a mouse-only issue which I don't understand. Where would I add code to focus on the cell in the checkcolumn?
Looks like processEvent method in the checkcolumn returns false to stop selection on purpose:
http://docs.sencha.com/ext-js/4-0/source/CheckColumn.html#Ext-ux-CheckColumn
I don't know why that is and what would be the ramification if it returned true - but it possible to override it and see I guess :)
I'm trying to make a Flex (Advanced)DataGrid component with some mechanism where the user can toggle the visibility of the columns. I've crudely implemented this by reading in the columns into the right-click menu, and when a column name is selected here, the visibility is toggled. It works, but it's not the most elegant solution.
Specifically, I'm trying to emulate the "datagrid" that Mozilla Thunderbird uses to display emails. Here is an image:
In the upper right, there is an icon over the scroll bar. If there is no scrollbar, the icon remains in the same place. When clicking the icon, it opens up a menu that shows all the possible columns, with the visible ones having a check mark next to them, like this:
Also, the scroll bar always appears under this button, never "pushing" it over into it's own column.
I'd like to re-create this in Flex. I believe the menu part and creating a column with a button headerRenderer is easy enough. But I can't figure out how (if at all possible) to do this with the scrollbar, because the scrollbar always seems to be "its own column". Any ideas or help would be appreciated. Thank you.
Ian
One dirty solution comes to mind. Create a component based on Canvas, then add an AdvancedDataGrid by overriding createChildren. Override updateDisplayList as well and add a button like the one in Thunderbird to the upper right of the Canvas. This will cause the button to appear over the DataGrid. Problemo solved?
I have a ComboBox in Flex with about 20 items. How do I display all of them in a dropdown with no scroll bar? Right now, Flex displays 5 at a time in the dropdown and puts a scrollbar to scroll for more.
Here's an example:
http://blog.flexexamples.com/2008/07/18/setting-the-dropdown-menu-border-thickness-and-border-color-on-a-combobox-control-in-flex/#more-711
How do I make the dropdown bigger in this example so it shows all 10 items at once?
Found it: 'rowCount' is the property to change. It defaults to 5.
For ones who search for same thing for spark combo:
for spark components that extend SkinnableDataContainer (including ComboBox) you can specify layout with
requestedMinRowCount , requestedMaxRowCount
properties, and do as much changes as you want with the help of skin(this layout directly goes to DataGroup skinpart inside skin).