Page 1 of 1

Capture which grid row had a drop down change

Posted: Wed Sep 28, 2016 3:01 pm
by mwalter
I have a grid. In one of the grid columns, I have a drop down. I'd like to capture in which row the drop down change event occurred. It doesn't seem like when you change the drop down, the grid's onrowclick event fires.

Any ideas?

Re: Capture which grid row had a drop down change

Posted: Wed Sep 28, 2016 3:26 pm
by Scott Klement
onrowclick should fire when you click the mouse on a row. Sounds to me like you're looking for an "onrowchange" event, but there isn't a JavaScript event like that right now.

you could, of course, use the "onchange" event for the dropdown. You could assign the same function to be run for all input fields in a row, therefore giving you the ability to detect any/all changes on the row.

Or you could use the READC opcode from RPG to find out which rows have changed...

Re: Capture which grid row had a drop down change

Posted: Wed Sep 28, 2016 3:53 pm
by Scott Klement
To expand on the "onchange" idea I mentioned above, here's what I'm suggesting.

1) Set up a JavaScript function to be called. for the sake of example, I'm going to have a function that receives the widget id and Grid row number as parameters, and just prints them on the screen when something has been changed... so the function is really simple, like this:

Code: Select all

function myChangeFunction(widgetid, row) {
   alert("Widget " + widgetid + " changed on row " + row);
}
2) This function is placed in a JavaScript file in the IFS. I called mine as follows:

Code: Select all

/www/INSTANCE-NAME/htdocs/profoundui/userdata/custom/js/changeFunction.js
3) If you are using this from Genie (or Atrium using Genie macro or Genie URL), you need to add a <script> tag to your skin's start.html file. An easy way to edit this file is using the Genie administrator, but you can also just edit it in the IFS directly with your favorite text editor. Here's what you would add (just add it after the other script tags that are already there)

Code: Select all

<script type="text/javascript" src="/profoundui/userdata/custom/js/changeFunction.js"></script>
4) If you are running it from a mobile app, add it to the "external javascript" property of the format (/profoundui/userdata/custom/js/changeFunction.js)

5) If you are running it from the RDF session controller (i.e. the /profoundui/start or /profoundui/auth/start URLs, or Atrium's "Rich Display" launcher), nothing special is needed, stuff in userdata/custom is loaded automatically.

6) In the Visual Designer, hold down the control key and click all of the input fields in a row of your subfile. When done, you should have all input fields selected at the same time. (Be careful not to select anything else, like the grid itself, etc, just input fields in the subfile row.)

7) Set the "onchange" property to the following (since multiple widgets are selected, it will be set on all of these widgets)

Code: Select all

myChangeFunction(this.id, row)
Now whenever you make a change to any field in the row, it will run your function, which in this case prints the widgetid and row number. You can write any logic you want in JavaScript to deal with those changes (such as, perhaps, recalculating a total quantity or price or something like that -- really, anything you can think of can be done.)

Re: Capture which grid row had a drop down change

Posted: Thu Sep 29, 2016 8:53 am
by mwalter
With regards to the first option, that's what I'm doing. Here is my javascript on the dropdown's onchange event to test:
var text = get('ddEDBox#');
if (text == 'NewBox') {
window.alert('CLICK ' + text);
pui.click('btnNewBoxE');
}

I'm not getting the window alert when I change one of the dropdowns. I'll investigate the second method.

Re: Capture which grid row had a drop down change

Posted: Thu Sep 29, 2016 10:14 am
by mwalter
Scott,

I used your second method and it worked fine. Thanks.

Regards,

Mark.