I am using JQGrid and I want column drag and drop feature for this I enabled set sortable = true option. Now the problem is when I have scrollbar and trying to reorder the last columns by dragging the UI of header is mess up as shown below. When I click on country column this column placed at other end.
I had fixed my issue... Sorry its my bad... I was mess up with some css of other components.
Thank you Oleg for helping me and also for wonderful grid component.
Related
Update #2: It turned out that our project setup was not optimal, which is why I had to manually copy the updated VAADIN folder with the theme to another location. The problem was not caused by vaadin but our project setup.
Thank you #SteffenHarbich and the Vaadin-Devs who helped me find the source of my problem here and in the issue ticket.
I am using Vaadin Framework 8.2.0 and I have a Grid with SelectionMode.MULTI
Because of the multiselection mode an additional column appears with checkboxes to select rows, which is fine!
But: these Checkboxes also have a label with the Text Selects row number XX. This label bothers me very much and I can't find a way to remove them.
In the Demo from Vaadin there are no such labels, so I'm sure that it can be achieved somehow.
Hiding the labels with CSS does not help me here, because the column width stays as if there was a label.
Here is my simplified code:
Grid<MyItem> myGrid = new Grid<MyItem>(MyItem.class);
myGrid.setSelectionMode(Grid.SelectionMode.MULTI);
myGrid.getEditor().setEnabled(true);
myGrid.setColumnReorderingAllowed(true);
//all columns match membervariables of MyItem. I use setColumns in order to control which fields are shown (not all of them are)
myGrid.setColumns(GRID_COLUMNS);
myGrid.getColumn("foo").setHidable(false).setCaption("bar");
// configure each column similarly
myGrid.getColumn("foo").setEditorComponent(new TextField());
// some more setters of editorComponents and editorBindings
// finally, set items.
// binder contains a bean that has many MyItems. binder is of type com.vaadin.data.Binder;
myGrid.setItems(binder.getBean().getMyItems());
See the corresponding ticket on github. Problem was old theme CSS.
Add your theme with
.v-assistive-device-only-label label {
font-size:0;
width: 0px;
}
I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.
Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.
---UPDATE 1----
This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site)
Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.
What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.
Here is a working Plunker where is used this flag.
I am using jQuery ui.multiselect.js plugin to order columns in my jqGrid. I have noticed that there are some inconsistencies in the way this plugin behaves. It lets me drag-n-drop from right column to left but not left to right column. Has anyone got a working solution to this problem.
I don't think it is exactly a problem, it is the way the plugin is supposed to work if you set the option sortable: true which is the default:
you can drag column from right list to left to choose which ones you'd like to show in the grid
you can re-order the column on the left list to change the order they appear in the grid
Setting the option sortable to false cancels both these behaviors, you cannot drag to add and sort columns order anymore.
ui.multiselect.js has been updated since this post, and it now allows you to drag from left to right as well. It also allows you to load data from an external source now. You can check it out here.
does any one know if there is an example available for sliding panels in jquery? If so, can someone send me a link? This is what I want to accomplish.
On my main screen I want to have three divisions. One right column that covers half the screen and then the left column divided in two rows. I want to expand and/or shrink the right column and/or left column and/or the top row in the left column and/or the bottom row in the left column.
Think og it as an IDE with the left side of the coding area and right side as project explorer and the properties. The coder would like to see any three of the sections at once or would like to expand each working area.
I am looking for a jquery solution for such!
Thanks
Sounds like the way jsfiddle.net works
This is available as a plugin. http://docs.jquery.com/UI/Resizable
You could also use the jQuery splitter plugin: http://www.methvin.com/splitter/
Also see (2011): http://jcubic.wordpress.com/2011/03/06/jquery-splitter-split-container/
Flexigrid is a new (2012) option: http://flexigrid.info/
The most robust solution for this is to use the jQuery layout plugin. You can find it here: http://layout.jquery-dev.net/
I am working on silverlight3 toolkit controls. I have to add listbox control in column header of datagrid.
For example, I have a dept column in datagrid control. When I mouse over on dept column header, it has to show list of dept names and Depend on listbox selected item, I have to filter my datagrid items.
Can anyone please help me to achieve this item.
Seems this - http://www.codeproject.com/KB/silverlight/autofiltering_silverlight.aspx solves your problem... or helps to solve.