Workflow - AngularJS Components - Grid

Published on Monday, 4 September 2017

In this Article I will run through how to enable AngularJS when using a Grid Component.

Table Of Contents

Firstly you will need to enable AngularJS in your Project.

Once you have created a new Project, go to the main Project Project and tick "Use AngularJs Capability".

Add a Form Component onto your Project.

LogicBase.Components.FormBuilder.FormBuilderComponent
https://www.symantec.com/connect/articles/form-builder

Then drag a Grid Component onto your Form.

Logicbase.Components.FormBuilder.InfragisticsComponents.WebGrid.GridComponent
https://www.symantec.com/connect/content-external/workflow-id_Logicbase.Components.FormBuilder.InfragisticsComponents.WebGrid.GridComponent/workflow

Right Click and "Edit Component".

Click on the "General" tab.

Tick "Use Angular JS".

AngularJS - Component - Edit - Use AngularJS

Configure your component to get some Data then run the Project.

If you create a clone of the example, but turn off AngularJS and run both you will see the difference in the Grid.

AngularJS - Grid Comparison

You will see there are extra options against the Column Headings.

AngularJS - Grid - Dropdown Options

You can Filter any row

AngularJS - Grid - Dropdown Options - Filter

Filter
Is equal to
Is not equal to
Starts with
Contains
Does not contain
Ends with

Not much work needed for a lot of extra functionality.

Protirus