Changing grid with button click

[pshuey]

Is there a way to change the location of a field in a multi-line grid row without returning to the rpg program? I am thinking of having a button with javascript in the onclick property that would change the location of the field with the applyProperty function and then redisplay the grid. I have the code written, but it does not change the grid. I can get it to change fields outside of the grid. I have tried both render() and refresh().

[Scott Klement]

The location of a field? Meaning you want to bind a given field it to a different property? I don't think a binding can be changed at run-time, but you could copy the value from one property to another.

Or, did you mean you wanted to change the location of a widget (rather than a field), i.e. change the top/left property so that it's positioned differently? In that case, you wouldn't want to re-render the grid, just the one widget. With most widgets, you re-render them by applying the "field type" property. Though, that might not even be needed here? In fact, if you change the dom's style.top/style.left properties you can definitely move it without re-rendering anything.

A bit more clarification of what you're trying to do would be helpful. An example of your code that's not working might help, too.

[pjshuey]

It is the location of a textbox within a grid that I am trying to move. The grid has one column containing about 20 textboxes. Based on the click of a button, I would like to change the location of some of the textboxes within the grid row/column. Does that make more sense?

[Scott Klement]

Yep. You'll need to change each widget's top/left property as I explained in my earlier message.

[Scott Klement]

I feel like we aren't communicating very effectively here... mostly because there's nothing visual to see (no screenshots, no code, etc)

Since it sounds like you're unable to post your code (no worries -- many companies don't allow their code to be given away) I will throw together an example for you. It might take some time since I have to write the whole thing from the ground up... but I'll see what I can come up with.

[Scott Klement]

Okay, so here is what I came up with. My screen looks like this:

moveLines1.png (67.46 KiB) Viewed 1820 times

The fields come from the PUISAMPLES/CUSTMASTP file that is distributed with Profound UI. The idea is that if you click the move lines button, the city/state/zip widgets will move to the top line, and the address lines will shift down. Unless, of course, they are already laid out that way, in which case they'll move back :-)

The one "gotcha" I ran into has to do with whether widgets exist or not. For performance reasons, Profound UI does not create the HTML elements for grid widgets until they've been paged onto the display. So anything that wasn't on the display when the user clicked the button cannot be moved -- so it skips those, and the user can move them later after they've been displayed, if they wish.

The JavaScript code to move the fields looks like this:

Code: Select all

var widgetsToMove   = ["lblCSCITY", "CSCITY", "CSSTATE", "CSZIP"];
var widgetsToAdjust = ["lblCSADR1", "CSADR1", "CSADR2"];

var rows = getObj("SFL").grid.getRecordCount();

for (var row=0; row<rows; row++) {

    // move the city/state/zip fields

    for (var i=0; i<widgetsToMove.length; i++) {
      var widgetId = widgetsToMove[i] + "." + row;
      var widget = getObj(widgetId);
      if (widget) {
        var top = parseInt(widget.style.top);
        if (top == 5) top = 45;
        else top = 5;
        widget.style.top = top + "px";
      }
    }
 
    // check the label position for this row to see if we're 
    //  shifting the other fields up or down.
    
    var moveBack = false;
    var widget = getObj("lblCSADR1." + row);
    if (widget) {
      top = parseInt(widget.style.top);
      if (top != 5) moveBack = true;
    }

    // shift the fields the appropriate direction
    
    for (var i=0; i<widgetsToAdjust.length; i++) {
      widgetId = widgetsToAdjust[i] + "." + row;
      widget = getObj(widgetId);
      if (widget) {
        top = parseInt(widget.style.top);
        if (moveBack) top -= 20;
        else top += 20;
        widget.style.top = top + "px";
      }
    }
    
}

You can download the complete DDS (custaddrd.dspf). RPG code (custaddrr.rpgle) and PF (custmastp.pf, in case you don't have it already) from the forum message attachments below.