Author Topic: Datagrid library? (Read 2607 times)

JoeMurray · June 10, 2014, 12:15:06 pm

Eileen has been evaluating a grid that could be put to use for purposes like batch update. Slickgrid https://github.com/mleibman/SlickGrid and https://github.com/angular-ui/ng-grid are two that have been looked at, with developer momentum and integration with AngularJS favouring the latter.

http://ngmodules.org/modules/ng-table, https://github.com/kendo-labs/angular-kendo and http://wijmo.com/wiki/index.php/Using_Wijmo_with_AngularJS are other options.

Just wanting to encourage discussion and suggestions.

Eileen · June 10, 2014, 01:35:00 pm

I think WijMo is a paid product

totten · June 10, 2014, 02:42:38 pm

I haven't looked at all the features of these, but some observations:
- Kendo appears to be a hybrid open/commercial project. The Kendo website says that their grid widget is only available in their commercial version ("Kendo UI Professional Package").
- dhtmlx is also a hybrid open/commercial project. Their site says that they include a grid widget in both versions -- but the open-source version lacks pagination and other features.
- Webix is another hybrid open/commercial project. This one looks a bit promising - no mention of limitations in the open version, and they provide Angular bindings.

Not sure how to feel about hybrid open/commercial projects generally. It's probably safer for us to stick with pure OSS projects, but those hybrid projects do look pretty slick.

In terms of compatibility between a Javascript widget and the JS framework (like Angular), there are a few levels:
- The widget can be originally conceived to work with the framework (like ng-grid in Angular). This will probably provide the better DX (assuming that the widget's features are adequate).
- Someone may distribute bindings between the widget and the framework (eg like with Kendo, Wijmo, Webix, http://l-lin.github.io/angular-datatables/ , or the "jQuery Passthrough" in http://angular-ui.github.io/ ). You're more likely to get a widget with deep feature-set this way, and there may be a good DX, but there's an added risk of impedance mismatch, incomplete/buggy bindings, etc.
- We can write our own bindings or contribute to someone else's project. (For example, the Case Type UI currently has a custom binding to select2.) This probably sounds like more coding than the others, but it's a lot less than writing a major widget, and sometimes it's easier if you don't deal with a third-party/middleman/glue-module.

JoeMurray · June 11, 2014, 07:06:25 am

We should only consider pure OSS licensed technologies for building CiviCRM.

I like us contributing to someone else's binding library. We should make sure before going down this path that the project leads are open to this.

I have a mild other things being equal (which they never are) preference for a widget in our framework, which at the moment is Angular.

Another option is to consider contributing to the feature set of a widget designed to work in the framework. So for example, the ng-grid where the developer indicates openness to accepting code and ideas https://github.com/angular-ui/ng-grid, and so we could consider doing specific feature enhancements if something were missing.

JoeMurray · June 11, 2014, 07:48:15 am

Eileen, from my perspective the main purpose of batch update via profile is to be able to copy a value down a column. We would need to reimplement that for ng-grid. Do you have a UX pattern to suggest. Personally I found the icon we are using for that action to be understandable only when explained, and I have not found users have understood until shown. http://angular-ui.github.io/ng-grid/ has a section on Excel-like cell editting. We could try to model Excel's fill down behaviour, but it is a bit too key-board oriented for current web-centric UI patterns: http://www.mrexcel.com/forum/excel-questions/66013-filling-down-column-without-dragging-over-every-cell.html

Maybe we could replicate the existing icon UX as a first step.

Eileen · June 11, 2014, 05:12:54 pm

When I looked into slickgrid I actually was looking at a different path - being able to specify default values for a profile when setting it up (this was create not edit though). When we offer bulk editing via VBO (ie create a view of CiviCRM items & add a views builk operation to update all the items) it tends to be a updating all to 'Completed' or whatever & you just get one screen for all.

I wasn't hugely keen on the copy down because it does 'every thing under' & I don't think it allowed fill only or copy to the next 6.

Examples

https://github.com/mleibman/SlickGrid/wiki/Examples
http://teleological.github.io/slickback/

A bit on 'how stuff works' - slickgrid (& I believe the ones we are discussing all took this idea from slickgrid) maintains 2 objects - a grid object & a data object. You are not supposed to edit any html fields directly outside an editor. So, if a field is selected an editor you have defined may take over. When that editor has done it's thing the editor updates the data object & if appropriate asks the grid object to refresh part of the grid. I found it hard to get my head around at the time but I think that's the basic idea.

The implementation I did was for create batches - basically you create a batch based on a profile (can be a grant profile, contact, membership etc). It creates a table to store data for that batch based on the fields returned from profile.getfields while it's open & saves to that table using CRM.api each time you edit a field & then when you choose process it calls profile.submit api - as a transaction - so it all succeeds or it all rolls back (in theory). I'm not sure this is the best way & I DID abandon it before completion but it certainly works in some circumstances

TBH - I think if I were re-envisaging the update by profile I'd probably allow 'save & remove by line' - ie in the grid you could click next to the line you've finished & it would submit & disappear. I find batch update by profile can get people in the situation where they do lots of data entry & then lost some

mallezie · February 18, 2015, 06:30:14 am

Are there any updates on a possible future datagrid library?
I was wondering if i should use the datatable (js in smarty) or use the html created table (in smarty) when creating a custom extension.

For the moment some tables (custom searches for example) use standard tables, while some (the relationship contact tab for example) use the jquery datatable. I was wondering what would be the more futureproof approach. (Is everything going to datatables, or more to standard tables). But if i read correct there is probably gonna be a third method ;-)

CiviCRM Community Forums (archive)

News:

Author Topic: Datagrid library? (Read 2607 times)

JoeMurray

Datagrid library?

Eileen

Re: Datagrid library?

totten

Re: Datagrid library?

JoeMurray

Re: Datagrid library?

JoeMurray

Re: Datagrid library?

Eileen

Re: Datagrid library?

mallezie

Re: Datagrid library?