I have swing application in which there is MS excel like functionality. User can enter data in the columns. Most of the columns are drop down lists, so use have to select from the list.
Can this functionality be easily built in Adobe Flex or GWT?
Second complexity is depending upon what value is selected in a column, another column should show only those items which are related to selected value of first column.
Its not country city data but for simplicity I am taking this example.
For example, first column is country and the second column is city. So depending upon what country is selected the second column will show only cities under that country.
Its not just two drop down list on a page, its dropdowns of a row in a grid strructure.
Is this possible in Adobe Flex or GWT or anyother web UI framework apart from Swing?
ExtJS' EditorGridPanel for instance?
http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.EditorGridPanel
I don't think you'll get this kind of functionality out of the box from any framework. You'll have to develop your particular functionality on top of existing components.
Using GWT, the built in FlexTable & ComboBox widgets and a downloaded EditableLabel (http://gwt-widget.sourceforge.net/docs/apidocs/org/gwtwidgets/client/ui/EditableLabel.html) widget you'd be able to build the basics of what you want. How well it would work/perform all depends on how you build it and how many rows/columns you want. If you want something big and ultra slick then Flex would be a pretty safe bet, if you just want to keep it small (eg: Google Docs style) then GWT will do just fine.
All GWT widgets support attaching various listeners to them, so there would be no problem in firing actions that change cells just like you do in Swing.
Related
I am working with a big amount of data (1M - 5M), and rows in the grid should be groupable, sortable, and filterable. As ag-grid can populate table with data quickly enough, I use in-memory row model to satisfy requirements.
However, when I click column in order to sort all rows by this column, it takes some time to do this. Moreover, sequential clicking on columns while rows are still being sorted may crash grid as well as browser application.
Are there any ways to prevent user from clicking on columns (disable sorting, show loading overlay, or something like this)?
I am trying to use beforeSortChanged and afterSortChanged events to show overlay or modify DOM elements (to make grid a little bit grey and show loading circle), but it doesn't work properly: beforeSortChanged event handler seems to be stuck for a moment and then only executed.
Ag-grid is used inside Ember framework as a component.
How about using onCellClicked which is an attribute of the columnDefs. Should work in a similar manner to what you are looking for with beforeSortChanged.
I've started using SlickGrid and have to implement a kind of functionality where I need to show sub-row inside a parent row of SlickGrid.
Here's the scenario
Here's Asia, Europe is having sub categories in Services Column and these service columns are expandable/collapsible
I'm trying to customize this for first column.
Is any other link/source available to refer to accomplish the feature.
Are you aware of the grouping/aggregates example ?
http://mleibman.github.io/SlickGrid/examples/example-grouping
This offers very similar behaviour, but the exact 'cell-merging' behaviour you show is not currently available in SlickGrid. Slickgrid tends to use tree structures rather than a flat structure. That said, it may not be too hard to hack up, but it seems everyone wants a different visual layout and it becomes very hard to support them all.
If you don't need editing or scrolling, I'd suggest this would work best as an HTML table, or even a PDF.
I am trying to create grid with advanced features(filter, re-sizable, scrolling, fixed header, row formatting, cell formatting) using angular js. I have read the following grids documentation.
ng-grid
ng-table
smart-table
And, ng-grid has many features and perfect for our requirements. but I want the following 2 options also. is it possible to achieve from ng-grid?
Formatting
We have number of columns in my grid (approx 40). Most of the column data need to be formatted in cell. for eg: Adding link, change date format, Reducing length of the content with tooltip..etc., Here, I can not do this stuff inside views. But this one is handled perfectly in ng-table.
If I can not do this in view, then my javascript (using callbacks) code is going to be increased. I don't want this way because angular perfectly do dynamic views.
Also, I want Header formatting, filter formatting, row formatting should be done inside views.
Responsive using Bootstrap
Our application should work in all devices. but ng-grid not working as responsive if I view my application in tablet devices.
I'm working on the following grid angular grid - has the features you mention. Similar to ui-grid in it's basic interface, but approaches things differently, including how the grid is customized. You can add css styling at the column and cell level, as well as providing your own custom cell renderers for complete control.
Asik,
The project Angular-UI renamed the ng-Grid to UI-Grid and the website changed to http://ui-grid.info.
Now it's pure AngularJS, without jQuery, use Bootstrap 3 LESS and it's full features that fill your requirements.
Take a look in the page of Tutorials to check the power of features.
I am looking to create a grid structure using javascript or one of its libraries. My idea is as follows: I am a merchandise manager for a retailer and want to create an application to tie into the django project I have been working on to track item sales based on display location. The javascript piece would involve drawing a grid on the screen and allowing the user to draw 'areas' over the grid. Each area would contain a set number of gridboxes, each representing a pallet of goods. At the time the grid is drawn, each box is a DOM object that can be assigned to event handlers etc. When an area is drawn over a a series of these boxes, they become active and each box can be assigned different characteristics. In the end, each box would effectively represent an empty pallet that could then be assigned an item. It's position could then be correlated with sales data via my django app. I just need a way to broadcast/manage the location data using javascript.
Is there a jquery plugin or some other js library that would facilitate such a project? I have checked into Raphael and it will work, but will take more time to create. I am wondering if there is already some kind of grid based drawing tool that would facilitate the process.
Everytime I think of a javascript Grid, I always thing about the fantastic TableSorter
And if you append an editable version to it, I would would say you will have the best AWESOME project!
:o)
JQuery UI's Selectable would probably be a good place to start. It makes it easy to create a grid whose areas are selectable by dragging a box over it.
The extJS javascript framework has an editable grid, refer to http://dev.sencha.com/deploy/dev/examples/grid/edit-grid.html for a sample demo and source code
need high quality datagrid with:
pagination
CRUD - adding/deleting/updating rows by users
other nice options such as filters, optionmenu, toolbar, etc.
there seems to be several very good options in Javascript (Ext-jS, several Jquery plugins/widgets (JQGrid, Datatables, at least 6 more good open source components...) which are very well designed, implemented, documented and professional grade (and free).
however, everything i've seen to add above features to flex/AS seem to be hacks...
(there is one solution - flexicious - it isn't anywhere as good as some of the Javascript datagrids - not free either)
can someone point me to any good solutions in Flex/AS (like Javascript Datatables or JQGrid) ?
thanks.
You seem to want the world for free (AKA: Well designed, implemented, documented, and professional grade). Why would anyone go through that trouble when Adobe provides one in the Flex Framework?
Have you looked at the Flex DataGrid? How about the Advanced DataGrid? Those are your only two free options.
Pagination is a bit tricky. It depends what you actually need. If you tie it to a backend service such as LiveCycle or dbHibernate, then I understand the Flex DataGrid will do "Lazy Loading" which, basically, loads up the data as the user scrolls. To me that is good user experience for pagination. However, if you want a row of numbers, similar to what you might find on a traditional web page, you'd be stuck implementing that yourself.
Updating rows is supported through the use of itemEditors. Deleting rows can be done very easily. Creating rows is a bit more complex if you want to do it "in the grid" otherwise it's just a form you have to create.
Filters (and sorting) are almost trivial if you use a collection class as your dataProvider.
I'm not sure what you want in an option menu or a toolbar, but you can create a context menu in an itemRenderer with Flex for an option menu. And you can tie a menu control to the DataGrid.
You mentioned Flexicious, which is a commercial option.
Have you checked out ElfGrid, which is also a commercial option.