Dynamic Grid control

The dynamic grid control allows the user to display a data entry grid where they can have different controls in each column.

Step1
Select the Designer.

Step2
Create a new form and open the form designer.

Step3
As shown in the below figure, in the ‘Data’ from the ‘Toolbox’, select the Control ‘Dynamic Grid’ then drag and drop it to the form and change the properties.

Step4
Click on the dynamic grid control and select datasource in the popup and click New Datasource Configuration.

Step5
Select SQL as Datasource type and click OK.

Step6
In Dynamic configuration window, select the DB.

Step7
Select the required table and the columns.

Step8
Add extra columns if required.

Step9
Select the command from combobox and click on add button.

Step10
Map the controls to the fields and click on Next button.

Step11
Select the trigger and click on Finish button.

Step11
Click the finish button

Step11
Preview the from,enter a value and click on the submit button.

Step13

And the record you have inserted is saved to table.

Step14
Click on the combo box, select Select option and click on the Add button.

Step15
Map the controls to the fields and enter a criteria for the selection

Step 16
Select the needed trigger and click the Finish button

Step 17
Click on the Finish button.

Step 18
Enter the ID of the record in the textbox and the execute command will work.

Step 19
Click on the combo box, select Update option and click on the Add button

Step 20
Map the controls to the fields and enter a criteria for the updation.

Step 21
Select the needed trigger.

Step 22
Click on the Finish button.

Step23

After selection of values, update any value and click the below Update button to execute the command for Update.

Step 24
The current record in the table gets updated.

Step 25
Click on the combo box, select Delete option and click on the Add button.

Step 26
Add the criteria and click OK

Step 27
Select the required trigger.

Step28
Select the form preview and click on the – symbol of the record that is to delete and click on Delete button.

Step29
The deletion is completed and the grid is reloaded with the updated list after deletion.

Allow Paging Property

For enabling the paging in dynamic grid control take the property window and check the option ‘Allow Paging’ and the give Page Size. Then the grid automatically adjust with a new page when 21st record (row) is encountered.

Dynamic Height Property

This is used to adjust the height of dynamic grid control and it is used by the way we are setting maximum height according to the Page Size given and then check the option ‘Dynamic Height / Width’ and then it will automatically adjust with the number or rows in the grid.

To insert a new row in dynamic grid
To insert a new row in the dynamic grid you can done it by clicking on Insert Item link button which is in the bottom of the grid control or the ‘+’ sign button in the right side of the grid control (see figure).

When click on this buttons new row is added in the grid.

Prevent New Row

When we check this option in property window the default options to add a new row will be disabled.

By rule

When we enable this property,the default options to add new row will be invisible

Export To Excel feature
This feature used to export the entire data in the grid to an Excel sheet. For this we need to check the option ‘Export To Excel’ in the property tab.

When loading the form with this property enabled you can see that one icon of Excel sheet symbol in the bottom of the grid and clicking on that the webpage will throw a popup with option to save the data in the grid as an excel sheet.

Webpage will ask to save data in the sheet as an excel sheet.Option to Save/Open it in Excel.

Fill-data Trigger:

The fill-data trigger in the dynamic grid will trigger the actions which is written in the trigger of dynamic grid.
By default the option will be ‘on completed’ and which means all the will trigger once when the grid get filled.
But there is another two options in this feature (see below figure)

• On each row
• On each Cell

When you select ‘On each row’ option it will trigger the actions those written in the trigger of dynamic grid when each row is triggered. That is when you are tab out from one row to another.
When you select ‘On each cell’ option it will trigger the actions when each cell is triggered that is when we tab out from one cell to another.

Link text
We can replace the default link text of dynamic grid control using the Link text option in the property window. You can type the new string in the ‘Link text’ option in property window (see below image)

Then this will be the new link text for the grid.

This can be also done by rule. When triggering this rule the text will be changed as given.

DynamicGrid.Action
This rule will defines the action of dynamic grid. The actions could be ‘Add’ or ‘Remove’.

In the above example when new row is added and then the decision DynamicGrid1.Action=’Add’ will become true and that actions written in the true section of decision will execute.
This can be also set as DynamicGrid1.Action=’Remove’ in the decision and when a remove action is occurred in the dynamic grid it will be trigger the rules written in the decision.

DynamicGrid1.TotalRowCount
To get the total row count of the grid we are using this function. It can be set to any variable or can be check the value of row count in decisions and so on.

DynamicGrid.ColIndex
This function used to get the column index. When we need to trigger an action or set a value based on column index we are using this function. Write the rule in the trigger of dynamic grid to achieve this.

In the above example when the column with index 2 is triggered, then the action write on the decision DynamicGrid1.ColIndex=2 will be executed.
And in another way we are using it when we need to set values to grid according to the column index.

DynamicGrid1.RowIndex
This function is used to get the row index.

In the example when the row with index 2 is triggered the decision gets true value and the message box will trigger.
We can also use this to set values based on row index value of the dynamic grid.

GridGetValue
This function is used to get the grid value from a grid control.

Syntax: GridGetValue(GridControlName,Row Index,Column Index).

The First argument is the grid name. The Second argument is the Row index of the grid cell. The third argument is the Column index of the grid cell.

Example:
Textbox1.Value= GridGetValue(dynamicGrid1, 2, 1)
The function will return the value in the row index 2 and Column index 1.

GridSetValue
This function is used to set the Grid Cell value.

Syntax: GridSetValue(GridControlName,Row Index,Column Index,Value)

GridControlName is the name of the grid. The user will have to specify the column index and the row index of the cell to which the value has to be set.

Example:GridSetValue(dynamicgrid1, 5, 2, “Test”)
The function will change the cell value to “Test”.

GridRowAdd
This function is used to add rows to a Dynamic Grid.

Syntax: GridRowAdd(Grid Name, Number of Rows)
Grid Name is the name of the grid. The user will have to specify the number of rows that has to be added to the grid.

Example:GridRowAdd(dynamicgrid1, 5)
The function will add 5 rows to the given Dynamic Grid. This rule can be set to a button click trigger or checking any decision to trigger this.

GridRemoveFile
Syntax:

This function is remove file from a file-upload control inside a Dynamic grid control.

GridRowDetailsGetValues

Syntax:

GridControlName is the name of the grid. The user will have to specify the row index and ControlNameWithProperty. The controlNameWithProperty should be the control name with the property.
Example:GridRowDetailsGetValues(dynamicgrid1,1,TextBox1.Style)
The function will return the property of the control.

GridRowDetailsSetStyle
This function is used to set the control details to a grid row.

Syntax:

GridControlName is the name of the grid. The user will have to specify the row index and “DetailView Control Name”. The “DetailView Control Name” should be control name with the property.
Example:GridRowDetailsSetStyles(dynamicgrid1,1, TextBox1.label.Style.Bgcolor,Green)
The function will set Green as the label style.

GridRowDetailsSetValues
This function is used to set value to a grid row.

Syntax:

GridControlName is the name of the grid. The user will have to specify the row index and “DetailView Control Name”. The “DetailView Control Name” should be control name with the property.
Example:GridRowDetailsSetValues(dynamicgrid1,1, TextBox1.value,25)
The function will set 25 as the TextBox1 value.

GridSetColVisible
This function is used to set the visibility of a column.

Syntax:

GridControlName is the name of the grid. The user will have to specify the column index to which this property has to be set. Visible should be either true or false.

Example:GridSetColVisible(dynamicgrid1, 2, false)
The function will hide the second column in the dynamic grid.

GridSetCellStyle
This function is used to set the cell style of search control.

Syntax:

ControlName is the name of search control.
PropertyName is the name of the property BGColor/FontColor/FontWeight/FontStyle/FontSize/FontFamily.
RowIndex is the Index of the row.
Column Index is the Index of the column
Value is the value based on the PropertyName.

Example:
GridSetCellStyle(Search1,FontColor,3,1, #FFFF6BC7)

GridSetColumnHeader
This function is used to set the text for the Grid column header.

Syntax:

GridControlName is the name of the control. Column Index is the index of the column that needs to be renamed. Header Text is text that has to replace the current column text.

Example:Textbox1.Value= GridSetColHeader(dynamicgrid1, 2, ”Subject”)
The function will change the second column header with the text “Subject”.

GridsetRowMode
This function is used to set mode for grid (Insert/Update)

Syntax:

GridControlName is the name of Grid control.
RowIndex is the Index of the row.
Mode is the mode to be set. Either Insert/Update.

Example:
GridSetRowMode(Search1,1,Update)

GridSetRowStyle
This function is used to set the row style of a search control.

Syntax:

ControlName is the name of search control.
PropertyName is the name of the property BGColor/FontColor
RowIndex is the Index of the row.
Column Index is the Index of the column
Value is the value based on the PropertyName.

Example:GridSetRowStyle(Search1,BGColor,1,Black)

GridSum
This function gives the calculate sum of the specified column in a dynamic grid.

Syntax:

Control name defines the name of the dynamic grid.
Column number defines the column index of the desired column.
Is Pagewise indicated whether the value has to be retrieved pagewise or not. Is Pagewise should be either true or false.

Example:
vValue=GridSum(DynamicGrid1,1,true)
this will set sum of the values in the column 1 to the variable vValue.