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)
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 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 wanted to use Slickgrid for the grid functionality in my app but since I am using AngularJS for the most part i thought that ng-grid is the way to go but not sure whether it supports virtual scrolling (I tried to look into their documentation and did not find any thing about virtual scrolling support). It would be great if some one could also enlighten me the pros and cons using ng-grid vs slick grid if possible.
Yes, ng-grid supports row virtualization. You can see in the grid configuration options that there is a setting for virtualizationThreshold that is set to 50 by default.
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.
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.