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.
Related
I am very new to UI development and learning AngularJS. I have some ready-made code where I need to make changes to AngularJS UI Grid. My column names are coming dynamically for grid and whenever there is a column called button, I needed to create file selector (input type='file') in that column. How do I do that? Please help out.
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.
Am a newbie to AngularJS. I want to create a gridview layout where each item in the grid is a bit complex layout. For example, an item may have a text, an image and a button. This has to repeat several times over the entire data fetched from the DB & displayed as a grid. A rough sketch of what am saying :
in the above image, each item in the grid has an image & a text. Imagine each item also having two or three more buttons.
Google+ layout is also similar :
I can use ng-repeat, but I want a more nice solution (similar to GridView in the Android world). Also, I want to be able to change a specific item in the grid & reload only that item without reloading the entire grid.
Can someone please help?
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.
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