Edit rows in Table Grid control

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

    image

  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.

    image

  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.

1 Like