Custom grid -- angular-ui-grid with angular-schema-form -- not working

[anupamarachuri]

Data Grid is on of the very common scenarios for any Web Page. I am trying to create a grid using angular-schema-form. This is how my schema looks and the form. Its not working. Can you please suggest where could i be wrong?

{ "schema": { "type": "object", "title": "Grid Schema", "properties": { "grid1": { "type": "array", "description": "An Grid.", "items": [ "gridOptions", { "type": "object" } ] } } }, "form": [ { "key": "grid1", "type": "simple-grid" } ], "model": { "grid1": [ { "name": "Exert", "age": 55 }, { "name": "Tiancum", "age": 43 }, { "name": "Jacob", "age": 27 }, { "name": "Nephi", "age": 29 }, { "name": "Enos", "age": 34 } ] } }

[slyadams]

"type": "simple-grid"

This isn't currently supported in ASF's bootstrap decorator, you'd need to implement that as an addon.

[anupamarachuri]

Hi Simon,

Thanks for you reply.

I forgot to mention. I have created a custom template and registered in the bootstrap-decorator.

Under src a new file with name simple-grid.html:

ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false, 'float': form.float === true }"> <label class="control-label" ng-show="showTitle()"> {{form.title}} </label> <div name="{{form.key.slice(-1)[0]}}" ng-model="modelArray" sf-field-model="sf-new-array" sf-new-array class="gridStyle" ng-grid="{{form.grid1}}"></div> <div class="help-block" sf-message="form.description"></div> <div class="help-block" ng-show="(hasError() && errorMessage(schemaError()))" ng-bind-html="(hasError() && errorMessage(schemaError()))"></div>

and in the Bootstrap decorator the below code:

$templateCache.put("src/simple-grid.html", "<div class="form-group schema-form-simple-grid" ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false, 'float': form.float === true }"> <label class="control-label" ng-show="showTitle()">{{form.title}} <div name="{{form.key.slice(-1)[0]}}" class="gridStyle" ng-grid="{{modelData.grid1}}"> <div class="help-block" sf-message="form.description"> <div class="help-block" ng-show="(hasError() && errorMessage(schemaError()))" ng-bind-html="(hasError() && errorMessage(schemaError()))">");

I am not sure what else I need to do to make it working.

[anupamarachuri]

Hi All,

Can you please help with this? I also tried the below JSON Schema and did not work:

{ "schema": { "type": "object", "title": "Grid Test", "properties": { "Offerings": { "type": "array", "title": "Offerings Info", "items": { "type": "object", "properties": { "name": { "title": "Name", "type": "string" }, "email": { "title": "Email", "type": "string", "pattern": "^\S+@\S+$", "description": "Email will be used for evil." } } } } } }, "form": [ { "key": "Offerings", "type": "array", "items": [ "Offerings[].name", "Offerings[].email" ] } ] }

[Anthropic]

Have you tried using bootstrap grid css styles, I think they are supported aren't they? Then just put that inside an array.

[anupamarachuri]

I tried a month ago but did not work.. Did it work for you?

[Anthropic]

@anupamarachuri I made an add-on for work that makes a basic data table, but unfortunately not of a high enough level of quality that I would release it into the wild

[sinqinc]

@Anthropic I'm trying to implement a very basic data table in a module I made. Could you share your code?