Angular ng-grid/ui-grid implementing view logics inside views - javascript

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.

Related

Angular ag-grid combine Master/Detail with Row Pinning

I am using Angular 10 together with ag-grid to create table. In my project I need to use expandable rows(Master/Detail feature) and row pinning (Row Pinning). Both of these features are working well separately, but when row is pinned, it is impossible to expand it (chevron icon disappears). I've googled for the solution, but didn't find anything.
I've prepared stackblitz example, which reproduces my problem:
https://stackblitz.com/edit/angular-vkx5eq
I'll be grateful if you could tell me if my requirements can be achieved using ag-grid and provide working solution based on code example, which I've prepared.

Reduce the number of $watches created by ui-grid

)
first i just wanted to say thanks for this great project.
we integrated ui-grid as part of our table-grid , and for some unknown reason the amount of watches generated by the ui-grid is huge for the amount of data we trying to process.
for example :
grid - 9 columns table with 20 rows of simple text based cells without any custom cell template
inspecting the $watches we getting amount of 960 watches.
trying to debug this issue we printed each element that has watch on him and most of the times we got this kind of elements :
[div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Z, context: div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Z]0: div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Zcontext: div#1445359168448-19-uiGrid-001Z-cell.ui-grid-cell.ng-scope.ui-grid-coluiGrid-001Zlength: 1__proto__: n[0]
watchers 4
and each cell element got 2-4 watches.
we used simple data structure with basic columnDefs (field + display name) .
in most of our cases we don't need to watch for chances in specific grid cells.
is there anything we can do to reduce the number of $watches created by ui-grid ?
thanks in advance,
elad.
As a conclustion - using the row*col $$watchers is used as part of performance boost to use Scrolling virtualization. any way to dismiss this behivor didnt work.
we have decided to use another approachby using smart table
its lightweight and we love its idea not to encapsulate/hide the Table/Grid layout creation but instead its aset of directives (plugins) allow you to compose you table behavior in a declarative way.
using declarative way = using angular ng-repeat and see the table template directly its much simple and less much easy to give to CSS dev to add the style.
still we cannot use it as a complex grid infrastructure need for a CRM solution - for this reason we still looking for solution - maybe Telerik UI Table
elad.

Kendo Grid or UI-Grid

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)

Displaying sub-data rows inside a row in SlickGrid Table

I've started using SlickGrid and have to implement a kind of functionality where I need to show sub-row inside a parent row of SlickGrid.
Here's the scenario
Here's Asia, Europe is having sub categories in Services Column and these service columns are expandable/collapsible
I'm trying to customize this for first column.
Is any other link/source available to refer to accomplish the feature.
Are you aware of the grouping/aggregates example ?
http://mleibman.github.io/SlickGrid/examples/example-grouping
This offers very similar behaviour, but the exact 'cell-merging' behaviour you show is not currently available in SlickGrid. Slickgrid tends to use tree structures rather than a flat structure. That said, it may not be too hard to hack up, but it seems everyone wants a different visual layout and it becomes very hard to support them all.
If you don't need editing or scrolling, I'd suggest this would work best as an HTML table, or even a PDF.

MS excel like functionality in web ui with more complexity?

I have swing application in which there is MS excel like functionality. User can enter data in the columns. Most of the columns are drop down lists, so use have to select from the list.
Can this functionality be easily built in Adobe Flex or GWT?
Second complexity is depending upon what value is selected in a column, another column should show only those items which are related to selected value of first column.
Its not country city data but for simplicity I am taking this example.
For example, first column is country and the second column is city. So depending upon what country is selected the second column will show only cities under that country.
Its not just two drop down list on a page, its dropdowns of a row in a grid strructure.
Is this possible in Adobe Flex or GWT or anyother web UI framework apart from Swing?
ExtJS' EditorGridPanel for instance?
http://www.extjs.com/deploy/dev/docs/?class=Ext.grid.EditorGridPanel
I don't think you'll get this kind of functionality out of the box from any framework. You'll have to develop your particular functionality on top of existing components.
Using GWT, the built in FlexTable & ComboBox widgets and a downloaded EditableLabel (http://gwt-widget.sourceforge.net/docs/apidocs/org/gwtwidgets/client/ui/EditableLabel.html) widget you'd be able to build the basics of what you want. How well it would work/perform all depends on how you build it and how many rows/columns you want. If you want something big and ultra slick then Flex would be a pretty safe bet, if you just want to keep it small (eg: Google Docs style) then GWT will do just fine.
All GWT widgets support attaching various listeners to them, so there would be no problem in firing actions that change cells just like you do in Swing.

Categories