Skip to Content (Press Enter)
UserImage.jpg
Sourav Sandhu
190Views
12Comments
Popup open after clicking on grid cell
Question
Beginner
DataGrid
Best Practices
OutSystems 11
Traditional Web
Application Type
Traditional Web

Hi Team,

How to open a popup whenever user clicking on data grid web cell.

I have used a Grid Column Link. But unable to fulfil my requirement as I am not getting how to open modal/popup. Because Transition have only 3 options

Suggest something else or may let me know how to use this Grid Column Link


Thanks,

0
0
21 Dec 2022
Copy Link
2022-12-05 07-28-20
Nihil Gujar

Hello,

You can create a boolean variable, use a link to open an action, add an if widget inside of that, and then check to see if the boolean variable's value is false or not. If so, use the assign widget and set the value to true.

"Add that local variable to popup "


0
0
21 Dec 2022
Copy Link
UserImage.jpg
Sourav Sandhu

Hi @Nihhhil ,

Thanks for the answer.

But I need to  use in grid web. When user will click on cell then popup will be opened.

Your suggestions will be appreciated.

Thanks

0
0
21 Dec 2022
Copy Link
2022-12-05 07-28-20
Nihil Gujar
Hello You can use events like onclick event. Thank you
0
0
21 Dec 2022
Copy Link
2020-07-02 13-32-59
Max de Groot

Hi Sourav,

Create the link in the data grid and link it to the logic above. You can set the onclick of the cell to execute the action. 

Above stated logic can be improved by the way since you technically only need 1 assign to change the boolean value that determines if the popup is visible. Simply do: IsShowPop = not IsShowPopup



0
0
21 Dec 2022
Copy Link
UserImage.jpg
Sourav Sandhu

Hi @Max de Groot 

Thanks for the suggestion buddy.

This requirement is for TWA not for RWA. Any other suggestions do let me know.

Thanks,

0
0
22 Dec 2022
Copy Link
2020-07-02 13-32-59
Max de Groot

Replying to Sourav Sandhu's comment on 22 Dec 2022 06:02:43

Hi Sourav,

In that case I would insert a container into the cell and make it 100% height and width, remove the padding and margins from the cell itself and set them to the container instead. That way the cell will look the exact same as in regular table but you can now set an onclick destination to the container.

0
0
22 Dec 2022
Copy Link
2022-12-09 04-50-17
Shubham Doshi

Replying to Sourav Sandhu's comment on 22 Dec 2022 06:02:43

Hello Sourav,

I agree with Max, you need to enclose expression in container and remove all padding from cell and apply it to the container. Then set the OnClick action for the container.

I have added the demo OML for better understanding

OnClickDemo.oml
0
0
22 Dec 2022
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP

@Sourav Sandhu ,

everybody is assuming you are just talking about onclick on a regular input or table widget.  You did mention grid web, but you can make that much clearer by choosing that as the forge component of your question.

the answer probably lays in the sample app, take a look at the DataGridWebExample.ExtendedFeatures.GridColumnButton in combination with OutsystemsDataGridWebSample.SamplesFlow.SampleButtonColumn

you could have something else than a button, but this is the mechanism to use: make a function to generate the html you want, and then have a GridColumnAdvanced invoking that function in the Content property.

Dorine

0
0
22 Dec 2022
Copy Link
2022-04-15 04-42-41
Tanisha Mahendru

Hi @Dorine Boudry 

I am having same requirement but I am unable to understand the logic of adding a popup with some column can you share some demo if possible.

It would be a great help.


Thanks

0
0
10 Jan 2023
Copy Link
2021-09-06 15-09-53
Dorine Boudry
 
MVP

Replying to Tanisha Mahendru's comment on 10 Jan 2023 13:04:26

@Tanisha Mahendru ,

did you look at using grid column advanced ?  what part of it are you stuck ?  I suggest you share an oml with what you have so far.

Dorine

0
0
11 Jan 2023
Copy Link
2025-04-30 07-30-15
Sanjay Bankar

Hello @Sourav Sandhu To Create Pop Up in Traditional Web Application please follow following instructions.


1. You can use MODAL in Web Blocks.

For that Follow Below Steps :

  1. Add a Container in the Web block .
  2. Inside above Container Add One Button and link it to a new action & rename it open popup.
  3. Make Sure that the above action should have the following properties: Ajax Submit & Validation: none.
  4. Add another container just below above container
  5. Search for Modal in the widget box from the left hand side & drag it into the container just created.
  6. Name the Modal as Modal or something.
  7. Add a button[New screen action] inside the Modal widget to close the popup rename that button as Close
  8. The above action should have the following property: Ajax Submit & Validation as server.
  9. To Open the open the Button action Created in Step 4 and drag Run Server Action in the Button action and search for Toggle Modal from the search input in the top.
  10. Map source of WidgetID as Modal.Id[the Modal widget name we mentioned in step 8]
  11. Follow the same for Close action
  12. Use the web block in the preferred screen & test.

Regards

Sanjay Bankar

0
0
22 Dec 2022
Copy Link
2020-05-21 04-56-19
Santosh Chanveer

Hey,

1. Drag Events\EventTrigger on web block where you have grid columns

2. If you want to launch Modal/Popup on expenses(column name) , pass that jsonfield and EventId  will be Entities.Event.SingleSelection 

3. Inside OnNotify action you can toggle the Modal by using togglemodal (OutsystemsUIWeb\Modal\ToggleModal)server action . This will launch modal or close Modal if already opened(vice versa).

4. Result- whenever you click on any cell of column expenses , the modal will open.

5. If you want to access cell values in Modal please follow below link,(and go to single selction section)

https://santosh-chanveer.outsystemscloud.com/OutSystemsDataGridWebSample/Events.aspx?(Not.Licensed.For.Production)=

0
0
11 Jan 2023
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.