Table Grid control - Properties and Keywords

[Shibam]

Choose columns that will be editable

This property helps you to choose one or more than one column from the table grid and make it editable. With this, you can edit and make changes in the columns of the table grid from the end-user side of the app after the publishing of the app.

Selected columns to edit

You can select the columns of the table grid from the dropdown.

Once selected you will see an edit icon over the selected columns of the table.

For the editable selected columns, users should provide the data formats for the respective columns. This will provide data input validation from the table grid side and also depending on the type of column format, the respective editor will open, enabling the end-users to provide correct input formats for the editable columns.

Editable columns’ data format

The format data option is available in the data-bind section of the table grid control.

Several types of formats such as email, rating, file, decimal, Textarea, and more are available for different types of input providing their respective validations.

To edit different formats of data, the table grid provides various types of editors.

1. Text editor – used for editing normal text type
   

   

   

2. Textarea – use for editing normal types of text but it can contain an unlimited number of texts.
   

   
   

3. Dropdown - it is used for providing multiple editing options as tags.
   

   
   

4. Checkbox – it is used in providing toggle type.
   

   

   

5. JSON editor- used in editing JSON data.
   

   
   

NOTE: While using Single tag/ Multi Tag you have set colors for the options which are to be available for that column.

Edited Rows’ Keyword

Once the edit is done, we can save the changes in the database or work further with the edited rows.

The edits of the table grid can be obtained by using the keyword {{tablegrid.PROPERTIES.EDITEDROWS}}. This keyword sends the whole array of the row data whose columns have been edited. This is important for the user to work with only edited columns.

Edited Rows’ Action – Save Changes

we can see the button of save changes on top of the table grid along with save_changes action.

With this you can add a server-side or client-side action on save_changes action, to act with the edited rows.

NOTE: You have to add an action of refreshing the control value in order to view the latest changes in the table grid control after saving the data in the database.

Now, let’s see how the save changes button can be used and how we can fetch the changed data using the edited columns keyword. We will be using two table grid one will have all the data with editable columns and another will have only the edited columns saved in it.

• We already have a table gird (tablegrid 1)with editable columns.
  

  

• Add another table grid control (tablegrid 2) with no bounded data.
  

  

• In the action of tablegrid 1 select save_changes and add a client-side action of Set control value. Select the tablegrid2 as control and use the edited column keyword under Enter Control Value .
  

  

• This will set the values of the whole edited rows from tablegrid1 to tablegrid2.

• Click Continue and Finish.

App preview for column edits and edited row keywords and action :

Editing Rows - Use Case

Let us take up a use case where the user wants to edit multiple rows of different columns from the table grid view using the Choose columns that will be editable option.

After successful editing of rows, on click of the save changes button, the tablegrid control returns multiple arrays of edited rows in an object.

The edits of the table grid can be obtained by using the keyword {{tablegrid.PROPERTIES.EDITEDROWS}}, but at times of multiple arrays of edited rows, we need to iterate through it. We have ITERATE TASK action from on-screen action and this will help to iterate through each of the edited columns of the tablegrid and save them in an object using a JS code editor.

In the above image, you can see that we are working with a single array of a single edited row of different columns. This will continue in a loop till the last array of edited rows.

NOTE: You can access different properties of the edited row using the ’ . ’ operator after {{tablegrid.PROPERTIES.EDITEDROWS}} keyword.

Now, you can allocate variables for the properties which we are getting as output from the JS Code editor to make it convenient while binding it as keywords in the connector query request.

Bind the query variables with their appropriate keywords saved in variables from the previous JS Code editor.

This will make changes in the tablegrid as well as in the database.

NOTE: Make sure to add a refresh control action from the On-Screen Actions to view the updated data after saving the changes in the tablegrid.

Edited Table – Keyword

This property/keyword is used to intake data alteration from the user and without changing the data source you can use the altered data from the table grid itself. So, if you make any edits in the table grid control it will not affect the backend data source but you will be able to use the edited data present in the table grid.

To use this keyword, the first thing you have to make sure that the columns of the table grid control are made editable using table grid control property section.

The keyword for this, is - {{tablegrid.PROPERTIES.EDITEDTABLE}}.

Using this keyword, you will be able to fetch and work with not only the changed data in the table grid control but also with all the rest of the table grid data.

Lets see the result of this keyword -

I have a table grid control and a JSON viewer which has a data binding with table grid control’s property of – EDITEDTABLE .

Now on preview if I make some changes with any row(s) of the table grid control, it will fetch me the whole table grid data with edited values.

This is very useful to send updates or work with updates in table grid control without changing the data source, but it is possible to make changes in the data source too with using this keyword.

Selected Rows – Keyword

This property of table grid control is for working the values of only the selected rows. This property can provide edited values too, which are currently present on the table grid but not in the data source. So, if a user makes some changes in the table grid control and not in the backend data source, then with the help of the Selected Rows property, the user can fetch the value of the selected rows with even edited data.

The keyword for this, is - {{tablegrid.PROPERTIES.SELECTEDROWS}}

Using this keyword, you will be able to fetch and work with selected rows including the edited data.

NOTE: Selected rows on edit will not fetch the edited data, the user has to edit first and then select the row(s) to fetch the edited data.

Let’s see the result of this keyword -

I have a table grid control and a JSON viewer which has a data binding with table grid control’s property of – SELECTEDROWS.

Now on preview on select of rows, after all the edits at the application/table grid control level, all the values will be fetched.