The +?+?++Editable Row+?+?+? control is listed under the +?+?++Composite Rich Controls+?+?+? section of the palette on the Page Structure tab within FormMaker.
This control provides a table like structure that allows the user to insert, edit, and remove rows of data from the table. The information in the table is read only by default, but the user can click an +?+?++edit+?+?+? button on the right hand side of each row to make that row editable. They then have the option of accepting or discarding the changes made to the row. Each row also has a delete button at the side to remove that row, and controls are provided at the bottom of the table to insert new entries into the table.
To add the control to the page, simply drag it from the palette onto your page in the same way as you would for any other control.
This will add a number of components onto your page, which by default provide a table structure containing two text box fields (table_field1 and table_field2).
You can add additional fields into the table by dragging them from the palette or from a data source, and you can rename/remove these two default text boxes if required.
The table can contain different types of data entry controls as needed, including select boxes, radio buttons, and checkboxes.
If you have added fields from a data source you will probably need to change the bindings for the +?+?++EditableTable+?+?+? repeat (and possibly the contained controls) to ensure the correct data is displayed on and submitted from the page. This can be done from the Data Bindings tab in the standard way.
This control makes use of additional JavaScript and CSS files to provide the required functionality, and you will see that these files automatically get linked to your page when you add the control.
Please note, that as this control uses JavaScript, the functionality will be limited if scripting is not supported in the users browser. In this case they will only be able to edit the existing values, they will not be able to add or delete rows. If you need to support the situation where script is not available for any reason, then you will need to implement alternative methods of providing this functionality.
Also, see:
http://www.hyfinity.net/wmforum/showthread.php?tid=45
Customising Functionality
It is also possible to customise the functionality of the control. This is done by adjusting the parameters contained in the +?+?++table_init+?+?+? custom field. If you select this field on the +?+?++Field Details+?+?+? tab you will see that it contains a script fragment that initiates the control, and also specifies a number of configuration options. These settings can be adjusted as needed, with the available options being detailed below:
As of WebMaker version 3.1.2, the allow_add, allow_delete, and allow_edit parameters can also be set to a function reference. In this case, the specified function will be called when needed to determine whether the relevant capability should be enabled.
For allow_add, the defined function will be passed the id of the table as a parameter, where as the allow_edit and allow_delete functions will be given the id of the table, and the id of the relevant row within the table. Each function must return a boolean value to indicate whether the capability should be enabled.
This allows you to dynamically make decisions about when these capabilities should be enabled. For example, only allowing certain rows to be edited, or preventing some users from being able to insert new records.
This control provides a table like structure that allows the user to insert, edit, and remove rows of data from the table. The information in the table is read only by default, but the user can click an +?+?++edit+?+?+? button on the right hand side of each row to make that row editable. They then have the option of accepting or discarding the changes made to the row. Each row also has a delete button at the side to remove that row, and controls are provided at the bottom of the table to insert new entries into the table.
To add the control to the page, simply drag it from the palette onto your page in the same way as you would for any other control.
This will add a number of components onto your page, which by default provide a table structure containing two text box fields (table_field1 and table_field2).
You can add additional fields into the table by dragging them from the palette or from a data source, and you can rename/remove these two default text boxes if required.
The table can contain different types of data entry controls as needed, including select boxes, radio buttons, and checkboxes.
If you have added fields from a data source you will probably need to change the bindings for the +?+?++EditableTable+?+?+? repeat (and possibly the contained controls) to ensure the correct data is displayed on and submitted from the page. This can be done from the Data Bindings tab in the standard way.
This control makes use of additional JavaScript and CSS files to provide the required functionality, and you will see that these files automatically get linked to your page when you add the control.
Please note, that as this control uses JavaScript, the functionality will be limited if scripting is not supported in the users browser. In this case they will only be able to edit the existing values, they will not be able to add or delete rows. If you need to support the situation where script is not available for any reason, then you will need to implement alternative methods of providing this functionality.
Also, see:
http://www.hyfinity.net/wmforum/showthread.php?tid=45
Customising Functionality
It is also possible to customise the functionality of the control. This is done by adjusting the parameters contained in the +?+?++table_init+?+?+? custom field. If you select this field on the +?+?++Field Details+?+?+? tab you will see that it contains a script fragment that initiates the control, and also specifies a number of configuration options. These settings can be adjusted as needed, with the available options being detailed below:
| [tr][td]Configuration Option[/td][td]Description[/td][/tr] | ||||
| [tr][td]validate[/td][td]Boolean value indicating whether the user+?+?+?s data should be validated before inserting new rows | or accepting the changes to existing rows.[/td][/tr] | |||
| [tr][td]allow_add[/td][td]Boolean value indicating whether the user should be able to add new rows to the table. If this is false | then the new entry row at the bottom of the table will not appear. | |||
| From WebMaker 3.1.2 this option can also accept a function reference as detaield below.[/td][/tr] | ||||
| [tr][td]allow_delete[/td][td]Boolean value indicating whether the user should be able to delete rows from the table. If this is false | then the delete row buttons will not be shown. | |||
| From WebMaker 3.1.2 this option can also accept a function reference as detaield below. | ||||
| [/td][/tr] | ||||
| [tr][td]allow_edit[/td][td]Boolean value indicating whether the user should be able to edit rows in the table. If this is false | then the edit buttons will not be shown. | |||
| From WebMaker 3.1.2 this option can also accept a function reference as detaield below. | ||||
| [/td][/tr] | ||||
| [tr][td]change_function[/td][td]Function reference (or name) that should be called whenever any change is made. This function will be passed two parameters | a string indicating the type of change - 'insert' | 'remove' | 'edit' | and the id of the row being changed |
| [/td][/tr] |
As of WebMaker version 3.1.2, the allow_add, allow_delete, and allow_edit parameters can also be set to a function reference. In this case, the specified function will be called when needed to determine whether the relevant capability should be enabled.
For allow_add, the defined function will be passed the id of the table as a parameter, where as the allow_edit and allow_delete functions will be given the id of the table, and the id of the relevant row within the table. Each function must return a boolean value to indicate whether the capability should be enabled.
This allows you to dynamically make decisions about when these capabilities should be enabled. For example, only allowing certain rows to be edited, or preventing some users from being able to insert new records.