Implementing grid hierarchy (parent row has many child rows) in Angular js - angularjs

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.

Related

Angular UI Grid Edit

I have been using KendoGrid so far for edit, filter and sorting.
Is it possible to use Angular UI Grid (http://ui-grid.info/) and achieve the result similar to these 2 demos.
These 2 demos are for KendoGrid editing row in Grid.
1. http://demos.telerik.com/aspnet-mvc/grid/editing-inline
2. http://demos.telerik.com/kendo-ui/grid/editing-popup
Yes. These all demo features are possible in Angular UI grid. go through the tutorials given this link.
click here

AngularJS approach for parent with multiple child (tab views)

![Desired sample page][1]
http://i.stack.imgur.com/FpLxg.png
I'm writing my first angular application and I have a best practices question.
This is a desktop application where the user
1. A user filters for requested data
2. The system populates the data grid
3. When a row is selected the tabs are populated based on selected row.
That's the best approach to splitting this into multiple view, directives, controllers etc?
Thank you
A few links you may find helpful:
https://google-styleguide.googlecode.com/svn/trunk/angularjs-google-style.html
https://github.com/angular/angular.js/wiki/Best-Practices

Angular + Bootstrap Responsive Design + Data Grid (DataTables/UI Grid)

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.

Which technology is better extjs or dojo?

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

Creating a plain table in Ext JS

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.

Resources