How to add checkbox in the grid column to pass multiple row data to the one service

[Suraj2692]

Hi everyone,

1. I want to add a checkbox into the grid to select multiple rows from the grid to pass this data to the service which has one info table input parameter.

How can I do that?

2. Also, I want to add a link to the grid column, so that when I click on a particular row link it will open a popup or replace the window of another mashup using this row id.

I am using the Thingworx 9.0 version, Please suggest me.

[emscur]

Hello @Suraj2692,

This is very much possible in ThingWorx! 

1. In order to allow for multi-selection of rows on an Advanced Grid, you must change the RowSelection property of the grid to Multiple. In run time, you can select all the rows you wish by holding down the Ctrl key on your keyboard. Then, you can bind the SelectedRows infotable property of the grid as service input. 

2. You can add a property to the Thing Template with a Link value type. Once the grid is populated, you will see a hyperlink mapping to the location you have specified in each link corresponding to each row. This could be a web address (http/https) or a location in your ThingWorx repository.

I hope you find this information helpful in developing ThingWorx solutions!

Regards,

Emmanuel

[Suraj2692]

Thanks for your reply 1. Using the CTRL key it is very difficult for the end-user, that's why I want to give a checkbox to every row so that users will select data whatever they want. I did for multiple but unable to add checkbox in the grid, how can do that 2. I want to add one link to each row so that by clicking on this link popup will open with a selected row id, I don't want to use collection or repeater here because I have more number of rows data which is not possible to show on collection it is very slow to load all data, that's why I want to use the grid. Please suggest me

[emscur]

Hello @Suraj2692,

• What kind of data are you binding to the grid widget? Is it data from a data table, or data from Things and property values (i.e. GetImplementingThingWithData...)? 
• What is the use case? Are you trying to edit the data in the grid widget and then pass that edited data to the server? Or are you simply trying to select the rows? 

Regards,

Emmanuel

[Suraj2692]

I am storing data into DB and then get all the data on the mashup so that I
will select multiple data from the grid checking the multiple checkbox and
then by submitting form it will stored the data into DB..

Use case:
I have many workouts which is stored in the DB.
Then I want create a program which include multiple workouts.
These all workouts i am showing on the grid contains check box to select
multiple workouts.
So that using select multiple workouts i will create one program.
Hope you understand the story..Please suggest.

[emscur]

Hello @Suraj2692,

You can achieve this by following the steps below:

1. Add a boolean Field Definition variable to the output Data Shape of the service returning the infotable to the grid (this will display a checkbox in all rows)
2. Set isEditable property of the grid to true
3. In run time, user will select the desired rows in the grid by checking the boxes and then click a button to submit. This button will then bind the EditedTable property of the grid to the service,
4. Service will parse all rows in infotable (from EditedTable) and verify the rows whose boolean field were set to true. If row is set to true, add it to a temporary infotable
5. The previous step will have created a new infotable with only the checked rows, which you can use to populate the database

Regarding the Link to each row, you can add a Field Definition of type hyperlink to the Data Shape, which will show as a link during run time in the grid widget, and will be clickable, row by row.

I hope you find this information helpful.

Regards,

Emmanuel

[Suraj2692]

1. The checkbox is now working using advance grid but not working on a simple grid widget

2. I followed your step about the link it is not showing on the grid, I have taken a hyperlink link field in the data shape but it is not showing on the advance grid as well as a simple grid.

I want to add a link in every row, when I click on a particular row link it will open a popup mashup with using row id.

Please suggest.

[emscur]

Hello @Suraj2692,

The links have to be on the database for this to work. So whenever you pull the data from the database, the links will come along and you will be able to use them through the grid. For example, a column in the database named Link will contain the hyperlink for each row.

Regards,

Emmanuel

[Suraj2692]

But when I click on the link I want to open as a popup with his id so that I can display all information related to id on the popup.

I have tried with the collection but I have more number of the row which is not possible to load in collection it will take to much time.

So that's why I am planning to use a two-column link in one grid which is shown in the below image

I want to add all this data into one grid which presents two links i.e EDIT and VIEW, when I click on edit it will show a popup with his member id same goes with the view link.

How can it possible in the thingworx grid.

Please suggest me the way.

[emscur · Accepted solution]

Hello @Suraj2692,

I understand the use case now. I would suggest using another mashup to edit/display the information about specific row. You can achieve this by using Navigation functions. You can create one mashup for viewing data and another one (with text boxes) for editing data. However, in this case, the edit/view button will not be in the grid, they will be outside of the grid and activated whenever you select a row in the grid.

In summary, you will need to follow these steps:

1. Create two additional mashups: one for View and another one for Edit
2. Add a mashup parameter to each of these new mashups (ID field)
3. Bind the mashup parameter to a service that will retrieve the data specific for that ID
4. Bind the output Returned Data to labels/text boxes for viewing editing purposes
5. Add a Save button to the Edit mashup and bind it to a service that will update that row in the Database/Data table with the new values in the text boxes as parameters
6. Back to the main mashup, bind the Selected Rows > ID output to the Navigation functions' ID mashup parameter (whenever you select a different row in the grid and click the View/Edit buttons, it will pull the information for that specific selected row)

Attached below is an example of the bindings that need to be done:

Here is the view for creating a new Navigation function, selecting the Target Mashup, and window type:

Thanks,

Emmanuel