Drag & drop columns into or out of the SlickGrid - slickgrid

I am just learning about the impressive SlickGrid library; and here's my question:
We would like to give users the ability to drag & drop columns from a list of possible columns into the grid to add columns (and possibly likewise drag & drop columns out of the grid to remove columns). Think: Outlook field chooser - where you can add/remove the To column, the From column, etc. via drag & drop.
Any chance that this might be possible? Many thanks, Dave

It isn't drag and drop, but there is a context menu in the header that allows you to check off the columns you want to show/hide. You can customize it in the slick.columnpicker.js file.

This isn't currently possible since you'd essentially have to modify SlickGrid's built-in column management code. As part of an on-going componentization of SlickGrid, that code may get moved into a separate plugin, which would make it easier to extend. In the meantime, you can extend the column picker control (included in the distro) to have two lists with columns that can be drag'n'dropped within the control itself (not onto the grid's columns).

Related

SWT Table - How to change columns width using keyboard only?

I am using SWT tables in my project and there are few columns which are having longer strings which are not completely visible by default (for ex. path to a file location). Though I have tooltip to show the content and using mouse we can increase the column width to see the complete value.
Is there a way to do it with only keyboard usage?
Note: This question is more related to accessibility.
The following answer is based on my experience under windows. It can be different for other OS.
I'm afraid that there's no keyboard-only default way to adjust the size or reorder the column in a table, tree view or list view.
This is true not only with SWT but also with all other frameworks based on native win32 such as wxWidgets.
You must provide a keyboard-only way to resize and reorder columns yourself. here are a few ideas implemented by some applications:
Provide an option somewhere in the application that opens a dialog box with a checkbox list of the different columns. Ctrl+Up/Down to swap two items. Check/uncheck an item with spacebar to make the column visible or invisible.
Make the headers focusable. Use Shift+Left/Right to resize, Ctrl+Left/Right to swap two columns. Application key / Shift+10 opens a context menu where you can check/uncheck columns to show/hide and an option to open the column selection dialog box.
Some screen readers allow to do it by simulating mouse operation in some way. For example, use Jaws cursor, click lock on a header, release lock on the header to swap with.
But it's quite complicated, not always reliable, and thus very rarely actually used.
This is a very good question. I would be happy to give 100 rep to someone giving an answer being for windows and:
generic, working by default, everywhere or in most cases
Independant from screen readers (Jaws, NVDA, etc.) and techniques that simulates the mouse with keyboard (mouse keys)
Unfortunately, I don't think it exists.

Using MFC, is it possible to have rows with combined data?

I'm using CListCtrl ( http://msdn.microsoft.com/en-us/library/hfshke78.aspx ) to display a table with 2 columns: one has strings, the second has buttons.
Is there any way have a single column with this combination of (different) items?
Or maybe a way to hide the separator?
Edit:
Currently it looks like:
As you can see, there are 3 headers (the header separators are higlighted with red circles).
I would like only one column.
Yes. Just use Customdraw.
Handling NM_CUSTOMDRAW will allow you to customize all content in the item of the list control. Also it will allow you to draw a button in the specific control instead of creating a new window inside the list control. NM_CUSTOMDRAW is easy to use and much simpler than owner draw functionality.
Here two articles that describe this stuff.
http://www.codeguru.com/cpp/controls/listview/customdrawing/article.php/c4195/Custom-Draw-ListView-Controls-Part-I.htm
http://www.codeguru.com/cpp/controls/listview/customdrawing/article.php/c4199/Custom-Draw-ListView-Controls-Part-II.htm

What are ways to reduce the number of columns in a table/grid?

I have a datagrid with many columns. This makes it pretty wide. Now we want to add more information to the table. Aside from removing or shortening existing columns what are some ways we might be able to add additional information without adding new columnes.
The data we want to add would be one of several values. For example:
Projected
Actual
Other
For other cases when the value was an off/on or true/false we would change the color of the row. In this case that doesn't seem to be a good option.
Another thing we considered is using an icon to indicate the information.
Any other ways this could be done?
A solution i've seen implemented with grid components is to have a column chooser - some sort of popup dialog that lists the columns and you can select which ones you would like to see in the grid. You should be able to invoke this popup by triggering it from the grid, e.g. it might appear as an option when the user right clicks and causes the context menu to appear.
Can you group related information into tabs?
an overflow area? ie a number of fields underneath the table that populate based on the selected row.
or just only show the minimum needed info and the have full details in a popup when doble clicked or something..
1) Popup on row hover
2) Drop open inline in the grid with extra info on row click
One technique I've used in the past was to create a "container" type of class that has its own labels and textboxes, and you can arrange them however you want, then insert this class into a single grid column. You still have to do some tricks on binding multiple controls that are not native "grid column" controls, but should help you along. Then, you can actually have each row a single container control in a single grid column...
You can't add completely new data to a grid without reserving a column to display it. The best solution I've seen is to provide only the essential information in the grid displaying all records, and then create a drilldown view that shows all of the data for one row. The drilldown can either be a new view in the same form, a popup for an additional window, or perhaps a mouseover popup.
I've worked on systems that use all sorts of shortcuts to display every last bit of information on a single page, and I found that it just made everything more confusing and harder to use. "Oh, that little icon there means that <insert something totally unrelated to the icon picture>."

Disable column in MSHFlexGrid in VB6.0

How do I disable particular columns in MSHFlexgrid in VB6.0? I don't want my user to edit the values in a particular column.
I don't think the MSHFlexGrid control allows users to edit its data in the first place. Therefore, in effect, all columns are disabled. Job done :)
In fact, you have to add custom code to enable updating e.g. add an appropriate control (textbox, combo, date picker, etc) that does allow editing, hide it at design time, then at run time detect which grid cell should have focus, move and size the control to fit the cell then make it visible then handle events to validate the input then write the contents back to the recordset...
...or you could purchase a third party control that does all this out of the box. The MSHFlexGrid that ships with VB6 is essentially a cut-down version of VSFlexGrid Pro, which I've used and thought was quite good. It has a different way of handling hierarchical data by creating groups (rather than bands) which is superior, IMO. The best thing that can be said about the MSHFlexGrid is that it is easy to bind to a hierarchical ADO recordset to simply display the results but not good if you want to do nice formatting or make the grid editable. The VSFlexGrid Pro, if you can afford it, has more power e.g. you can create data source classes to handle binding to custom data structures (ships with VB6 examples of this including ADO recordset binding) which would be invaluable IMO if you intend to make your hierarchical grid editable.
'A Shortcut way is here... NOT in a proper way. But you can try
'if you need to lock the first 3 columns please use this code:
msf2=name of MSFlexGrid
Private Sub msF2_EnterCell()
With msF2
If msF2.Col = 0 Or msF2.Col = 1 Or msF2.Col = 2 Then
msF2.Col = 3
End If
End With
End Sub

User interface for sorting a table by multiple columns

I need a user interface that allows users to sort a table according to multiple columns (e.g. sort by color and then price within color, or alternatively price and then color within price). The only such interface I'm familiar with is the dialogue box found in Excel under data > sort, but this is rather clunky and does not yield itself to quick switching between views. I would much prefer an iTunes-style interface that allows quick sorting by clicking on column headers. However, such interfaces typically only allow sorting by one column (an exception is iTunes itself which has a very limited, apparently hard-coded ability to sort by "Album by Artist" and "Album by Year" by clicking on the Album header).
I can envision an interface where each column header has some numbers, such that clicking on 1 makes the column the primary sort key, clicking on 2 the secondary key, and so on. Alternatively, clicking (or right-clicking) on a column header could bring a drop-down menu with "primary sort", "secondary sort" etc. However, I've never seen such an interface implemented, and I don't have a good intuition of usability issues that may arise.
Are there applications that allow sorting by multiple columns using the column headers? Would you be able to point me to these? Are there any useful usability results regarding such interfaces -- which work better, which less so?
Also, while I am mostly interested in the specification of the interface, any hints to pass on to the people implementing it would be appreciated, e.g. publicly available libraries that provide parts of a solution (especially Java).
Edit: Two people have suggested using an Excel-style dialogue box. This is not going to work. For my application, users need to find the "best match" among existing table entries (which is often not a perfect match). The table is too big to keep in your head, so you need to keep scanning the relevant parts, and it's useful to repeatedly sort the table in order to get multiple views. Having to go through a dialogue box with multiple options for each change of view is just too slow; by the time you're done with the box, you've forgotten the results from the previous view.
I think Outlook supported sorting by multiple columns. After you clicked a columnheader, you would then shift-click additional column headers. I no longer use Outlook so I can't verify this. Hopefully it will be a starting point for you.
I've seen the shift-click interface that caparcode mentioned in a few applications, however I can't name any right now. Here's a nice web-based example though.
I would suggest using a Ctrl-Click (or Shift-click or whatever-click) approach to let the user select multiple columns. Clicking without Ctrl will just sort by the selected column, but holding the Ctrl-key adds the column to the sorter. Clicking again changes the direction. And give a feedback about the current sorter(s) similar as in these pictures. Most of the time the users will only use the single column sorter anyway, only advanced users will want to sort by multiple columns. But you should have the behavior documented somehow in the manual and in the "did you know" thingy.
But since users don't read, there is the risk that nobody will find the feature. But for this maybe you could have a feature like Windows when first started wanting you to click the start-button once to ensure you found the button. When you see the user not using the sorter at all, show him that clicking the column header will sort. Later, when you see he's not using the multi sort feature show him once that the feature exists.
Do it the way Excel does, or rather the way real people use Excel, which almost never involves that clunky dialogue box which you rightly wish to avoid. Basically, Excel preserves your current sort order as much as it can - so if you currently have it sorted in descending order by price, and now you sort by color (using the A-to-Z button on the toolbar*, NOT the dialogue box), the prices within a color will remain in descending order.
This approach does require a bit of reverse thinking from the user, because you sort first by the least important column, but it is very intuitive once you get it. (Yeah, I know, that sounds self-contradictory, but I don't know how else to describe it.)
To implement it, you'd have to store the user's sorting history somewhere; but as far as the interface is concerned, all you'd need is an up arrow and a down arrow in each column. Or, if you only want to allow A-to-Z sorting, just make the column headings themselves into links or buttons or whatever.
* Yes, I know the default Excel toolbars don't have A-Z and Z-A as separate buttons anymore, but one of the first things you do with a new installation of Excel is customize the toolbars to add these as well as Paste Values, right? Right?
How about the following? A single droplist labeled “Sort” in top margin of the table. The dropdown lists all fields to sort. Each field appears twice, once for ascending and once for descending sorts. Beside the dropdown is a button labeled “More” or perhaps simply “+”. The user chooses the field for the primary sort key from the dropdown. The sort is instantly applied (no “Sort” command button). If a secondary sort key is desired, the user clicks the More button and another dropdown list is inserted and opened for the user to select the second key. Additional lower order keys may be added with successive clicks of the More button. Dropdowns each include a “Clear” item to delete a key.
This makes a compact, simple, and uncluttered UI for the simplest and most common case of a single sort key (unlike Excel’s Sort Dialog or having numbers to the column headers), while also supporting the sorting an indefinite number of keys (again unlike Excel’s Sort Dialog). The user can see the sort order at a glance (unlike Excel and more easily than with numbers in the columns). It avoids the clunkinest of a dialog box.
Clickable column headers is a de facto standard that is also a good idea to include along with the above. It’s good practice to do what Outlook and Windows Explorer do and make lower order keys out of former sort orders. So, for example, if the table is sorted by date and the user sorts by category, then the table is sorted first by category and then by date. A user can thus do multi-ordered sorting by picking the lowest order sort field first and working up. However, this has poor discoverability and user may find that working “backwards” is counter-intuitive, so it should be supplemented with something like the dropdowns and More button. Relying on shift-clicking or ctrl-clicking likewise has discoverability issues.
Have you taken a look at Excel? That's a perfect example on how to sort on multiple columns.
Also, I use a detailed listview sometimes, and let the user hold the Ctrl key while selecting one or more columns to sort the info. (Clicking twice on a column does a descending sort.)
Seriously, what you want, Excel does. Why not use an interface people already know how to drive. I would suggest that. Or else you're going to either have to buy from a third party, or roll your own.
Development with Office is facilitated by VSTO (Visual Studio .NET tools for Office). It's up to you how much you want to automate Excel within an inch of its life :). It can be done.
In fact that is what I had to do. I had to read spreadsheets, extract data, convert to objects, then persist to Access (don't ask). Each sheet represents one record, and each directory represents a location, you get the idea. All done using the Office PIA Interop assemblies.
Just a thought.

Resources