As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I'm working with JavaScript, JQuery and HTML. UI Of my project is completely dynamic. I am looking for a dynamic JavaScript/JQuery Grid which supports following features.
Can anybody tell me is there any good looking open sources Grid which supports the following features?
I should be able to create an instance of the grid at run-time and add to DOM.
Supports column templates (textbox, select, checkbox or any inputs or simple text)
Supports set new column template or replace existing column template at real-time.
Few input control (e.g textbox, checkbox..) present under a column may be enabled and few may be disabled.
Supports setData() at real-time.
Supports event if any input data changed by user.
It should support selection of a Row
Add row or delete row support at real-time without rendering the whole grid.
Supports Paging.
Supports sorting by any column at real-time.
Fires an event if data is sorted by user at real-time.
Grid UI must support realizable columns
Auto re-sizable (It will be great if grid is auto re-sizable according to the size of the parent element)
Definitely has good documentation.
Some useful are:
Free:
Gijgo Grid
Backgrid.js
Flexigrid
jqGridView
Ingrid
SlickGrid
DataTables
Shield UI Lite Grid
Paid:
Fancy Grid
jQuery Grid
jqxGrid
Shield UI Grid
The best entries in my opinion are Flexigrid and jQuery Grid.
you can try http://datatables.net/
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table. Key features:
Variable length pagination
On-the-fly filtering
Multi-column sorting with data type detection
Smart handling of column widths
Display data from almost any data source
DOM, Javascript array, Ajax file and server-side processing (PHP, C#,
Perl, Ruby, AIR, Gears etc)
Scrolling options for table viewport
Fully internationalisable
jQuery UI ThemeRoller support
Rock solid - backed by a suite of 2600+ unit tests
Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and
more
It's free!
State saving
Hidden columns
Dynamic creation of tables
Ajax auto loading of data
Custom DOM positioning
Single column filtering
Alternative pagination types
Non-destructive DOM interaction
Sorting column(s) highlighting
Advanced data source options
Extensive plug-in support
Sorting, type detection, API functions, pagination and filtering
Fully themeable by CSS
Solid documentation
110+ pre-built examples
Full support for Adobe AIR
My suggestion for dynamic JQuery Grid are below.
http://reconstrukt.com/ingrid/
https://github.com/mleibman/SlickGrid
http://www.datatables.net/index
Best one is :
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
Variable length pagination
On-the-fly filtering
Multi-column sorting with data type detection
Smart handling of column widths
Display data from almost any data source
DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
Scrolling options for table viewport
Fully internationalisable
jQuery UI ThemeRoller support
Rock solid - backed by a suite of 2600+ unit tests
Wide variety of plug-ins inc. TableTools, FixedColumns, KeyTable and more
Dynamic creation of tables
Ajax auto loading of data
Custom DOM positioning
Single column filtering
Alternative pagination types
Non-destructive DOM interaction
Sorting column(s) highlighting
Advanced data source options
Extensive plug-in support
Sorting, type detection, API functions, pagination and filtering
Fully themeable by CSS
Solid documentation
110+ pre-built examples
Full support for Adobe AIR
Have a look at agiletoolkit.org as this has a simple to use CRUD which supports 2,4,6,7,9,10 and 12 out of the box (uses Ajax to defender the grid when adding,deleting data and it integrates with jquery.
I would post some examples but on an iPad at the moment.
Related
How to create card tile scrolling grid like google plus, with three columns? I am using Material UI, but I cannot find such a functionality? I have tried standard Material ui grid, but it is not working.
What you're looking for is called a masonry grid. It's currently impossible to do so in pure CSS, even with the new grid layout mechanism ([1], [2]).
Material UI doesn't offer an out-of-the-box solution for masonry grids.
You might be interested in some of the many JavaScript libraries which arrange elements this way using a custom script. The most popular one which immediately comes to mind is Masonry Desandro. An alternative is Isotope, a payed library for commercial use, which also has a mode for masonry layout.
I have to include a UI Grid in my application and have a choice between Kendo UI Grid Control or the Angular Ui-Grid control. I am using Angular JS in my application. How to know the differences and which one is better over the other?
Thanks.
There are various point to keep in mind .
AngularJS has become a very popular web development framework. Now that Telerik made Kendo UI open source, this framework is a possible alternative for many web developers.
Kendo UI can be used seamlessly with AngularJS. The two frameworks have some overlapping features though. If you are using AngularJS then you probably want to use Angular's own routing mechanism and data binding.
But Better you can go ahead for Kendo Since they provided good Support and lots of Demo from where you learn lots of Example Using Online Demos . Hope it will Help you to find Better Solution
I have used both grids and I have to say that Kendo UI Grid is pretty solid and has lots of code snippets to get you where you need to be functionality wise. The last project I was on they were initially using ngwidgets grid but we ended up switching to Kendo UI after we ran into road blocks with the ngwidgets grid and also learning they were abandoning their AngularJS library in favor of their jqwidgets.
Some things to consider would be:
Need for sorting, filtering and aggregations.(Both)
Editing in grid or pop up editing.(Both can edit, Kendo has both inline and pop up)
Selection of rows, selection of multiple rows. (Both)
Column actions such as delete, edit, or custom. (Both offer but Kendo has a lot more documentation on how to implement)
Ability to create a custom row template that may include links, etc. (Both offer this but Kendo has richer templating capability)
24 hour support turnaround (Only with Kendo License, UI-Grid community supported)
I am looking for an algorithm or sample solution for drawing connection lines between rectangles. In my case rectangles are elements Gantt chart and connections show depenedencies. I am using the Raphael JS library to draw rectangles and lines. So a solution in JavaScript would be the best, but an algorithm in meta language or other JS similar will be nice also.
I have found an example that looks nice but maybe someone knows something else.
In my case there are a few relevant requirements:
only horizontal and vertical lines are allowed
lines should not cross each other
lines should not cross rectangles
I hope to achieve something similar to this:
It's look like you are looking for javascript gantt charts. Check out this one's:
http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml
Editable chart
Full control with JavaScript API
Multi-browser/multi-platform support
Loading from XML
Serialization to XML
Movable/resizable activities
Built-in edit menu, plus custom dhtmlxMenu support
Extended properties pop-up
Optional tree view
Customizable task subscription
Percent-complete shadings
Dependency arrows
Fast and smooth rendering
Built-in constraint checking
Print-friendly mode
http://www.bryntum.com/products/gantt/
Built entirely on web standards - HTML/CSS/JavaScript
Use with any server (PHP, Java, ASP.NET)
Supports dependencies, lead/lag and critical path
Export to PDF/PNG, MS Project import
Project, task and resource calendars
Unit tested with Siesta
http://gxt-scheduler.com/
Built entirely on web standards - HTML/CSS/GWT
Integrates with any type of backend
Fully themeable, requiring only basic HTML/CSS knowledge
Drag & drop and resize items easily
Supports all major browsers
http://gantter.com/
google drive integration
FREE cloud-based project scheduling
http://gantt.twproject.com/
in-place editing
drag&drop
zooming
do/undo
multiple dependencies
full editing
dates shortcuts
css skin
multiple browser
resources editing
multiple assignment
milestones
export data in JSON format
resize & scroll
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I want an easy to use grid framework for my current web project. These are the features i would appreciate:
fluid grid layout: boxes that can be aligned horizontally (side by side), each having the same height (for example a 3-column layout), working with 100% width
responsiveness: adapts automatically when resizing the browser window
mobile devices: shows an alternate fitting layout for pads and mobile phones
text size: optionally adjust text sizes dynamically (for example full width headlines)
image size: optionally adjust images sizes dynamically (for example full width image galleries)
breakpoints: optionally define width values which trigger events which alter the layout (for example removing buttons if the width is fallen below a threshold)
Update
I found many grids, but narrowed it down to the following three promising frameworks that might be a good fit for my requirements:
Foundation
Semantic Grid
Golden Grid System
Here are all the others:
CSS Grid (not fluid)
320 and Up (not fluid)
Columnal (not fluid)
Skeleton (not fluid)
SimpleGrid (not fluid)
Less Framework (not fluid)
Bootstrap (non-semantic classes)
Breakpoints.js (only breakpoints, too similar to media queries)
Adaptive images (only images)
FitText (only text)
Gridset (commercial)
HTML5 Boilerplate (old)
Normally, i would test them myself before asking here so that i can formulate more specific questions. But due to the vast amount of frameworks i'd like to hear some pointers where to begin.
How are your experiences with these or other similar frameworks?
Do you recommend a specific framework that matches my requirements?
Solution
I ended up using Foundation which is clearly the winner in this race - in my humble opinion.
Update 2
Bootstrap 3 is a real competition now, because it supports semantic grid classes too. And it supports SASS as well as LESS.
I have used columnal priorly and it does provide most of the functionality that you want apart from the breakpoints feature.
It is easy to use and is adaptive. In mobile screens the grids degrades to a stack so all the column contents are shown one under the other.
However for the intelligent adaption feature, as you have outlined in the breakpoints feature : I would very strongly recommend you to use the CSS 3 media queries directly because that is exactly what they are meant for and they are not difficult to use. The CSS frameworks which provide these features under the sheets utilize media queries only.
Taking a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive , Bootstrap's fluid grid does provide some convenient shortcuts for setting css properties for specific screen sizes which are not present in columnal.
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.