I want to implement Grid which loads a very huge amount of data, performing search in grid contents, pagination. The data to grid from serverside.And I want to add rows to grid, delete rows and update the inserted rows in database. I want to know which is better technology to implement grid with the above requirements. Please help me.
Adventages of ExtJs 4.2.1.883 Over Dojo 1.9.2
Better Documentation
Grid has row Grouping
Grid has rowGrouping + selectionModel (checkbox for selecting single, simple, or multiple rows) Together
Grid has rowEditor (Editing all elements of the row at once) and Dojo only has cell editing (one cell by time). This is useful if you want to pre-validate row data before send the row record to the server
Grid has row Summary
They use SASS instead pure CSS
Programming only in JavaScript (you only need index.html everything else is javascript)
Stable MVC (in Dojo you need to use Dojox/MVC which is not 100% stable)
DOM is rendered only one time, only after all JS has finished loading, while Dojo renders twice the same element (First during loading the page and them after dojo has created or modified widgets)
Disaventages of ExtJs Over Dojo
ExtJs is non-free for commercial ussage
For more exact comparison you can see this link:
http://dojofoundation.org/packages/dgrid/#featurecomparison
Althouth it only shows you dGrid vs ExtJs Grid, this could be an starting point. Furthermore, most of my development time is spent in the Grid, so the grid is the most important element in a Business application.
Note: Dojo use LESS for all it's bundled styles and Stylus for Bootstrap Style
Both projects are great. Actually dojo is greater than Extjs. But Ext JS is a relatively young framework (compared to dojo). DOJO grid loads data quicker and allows filtering and sorting of the whole dataset.
However Dojo had several attempts in pushing for some good looking themes. Unfortunately they did not get that “good looking widgets” and “pixel-perfect” layout. Widgets are still difficult to integrate.
Refer to this link for more opinions
Related
I want to implement grid hierarchy (parent row has many child rows). Please refer to the link for reference - http://demos.telerik.com/kendo-ui/grid/hierarchy. How can it be implemented using Angularjs, ngGrid in asp.net web api project?
If you use ui-grid (the 3.0 version of ngGrid), then this is the expandable feature: http://ui-grid.info/docs/#/tutorial/306_expandable_grid
Expandable still has some gremlins in it, so you'll get some compromises and work arounds (or alternatively maybe need to submit some fixes), but it is the same concept.
You could use Angular Grid. The interface is similar to ng-grid. There is a 'test drive' section to see it demonstrated, where you can group by a column, giving a parent / child rows layout.
I have a large collection of data to display in a datagrid (1000+ records). I want to have this grid to be responsive and lazy load the data with Angular bindings. The Application requirement does not allow me to use Pagination concepts.
The Test/Pan, Results, Additional Info are clickable links which would display inline contents in the same row (like detail row with variable heights).
I am not sure how to approach this kind of design inside a datagrid like using JQuery DataTables or Angular UI Grid. I am sure that it can be displayed using bootstrap table but number of bindings would be a problem doing it in Angular way with 1000+ rows. Each row would have 50+ properties.
I am not a designer and not sure how to attack it. Any expert direction would be helpful.
I have just started with angularjs. Just wanted to know that if it is possible to create a sub grid inside another ng-grid. There would be some links in a column of the grid and when I click a particular link a grid corresponding to that link should be formed inside the already existing grid.The original grid would be having say 5 columns while the new grid will have say 4 columns. So something on the lines of colspan or something similar is what I look for.
If you are open for writing Angular Directive then you can use any grid ,other than ng-grid which has subgrid feature.
I know like Kendo Grid has subgrid feature and jqgrid has subgrid feature. I wrote a Grid using Google Closure library , this also has subgrid feature.
If I understand your question, you need something like master/details inside grid, it not part of base functionality. nggrid has fixed row height, for virtual scrolling purpose. On our project we have created custom grid plugin base on nggrid
Solution that we used is:
write custom sort function, which populate duplicated rows always below main
when we click expand button we duplicate current row n-times depend on subgrid height
in main row we create css overlay container which hides duplicated rows
load overlay container content via ajax
When we click hide button, we hide overlay, and remove duplicated rows.
Please point me to an Ext JS 4 code sample of a grid with records editable via a popup form. It seems to be a common use case, but I can only find editable grids with editing in place.
My approach:
Each row in the grid has an Edit button, which shows Ext.window.Window with an item Ext.form.Panel.
When the form is submitted I have all the fields, which correspond to a record in the grid store.
I get record using:
var storeRecord = grid.getStore().getAt(index);
But when I modify properties of this record, and hide the form window, the grid does not show updated values.
Am I missing some step? Do I need to force refresh? Or maybe there is a standard way to configure the grid with an editor as a form panel?
After two days of searches, trials and errors, I found the solution:
grid.getView().refresh();
I wish there was a faster way for Ext learning curve. :(
I wanted to utilize parts of the Ext JS library to render plain table but based on a data store and record model. Do you know of any tutorials and/or other resources that would help me out getting started with it?
If you want to render a "plain HTML table", why do you need record model?
One (and easiest) approach would be to make an AJAX call (preferably using Ext Direct), and apply XTemplate to the returned JSON result.
Two other approaches would be -
Use the light weight list view component instead of grid (if light weight is your concnern)
Style the grid or list view component to "look like" plain HTML table.