Toggle region at runtime

[Davide]

Hello,
I'm trying to add some fun factor to my interface.
I'm working on a frame which has a grid on the left (align:alClient) and a region on the right (align: alRight).
Now when you click a row on the grid I make the region visible and when I click a button on the region I hide it.
To make the region visible I'm using the following code :
ARegion.Width := 300;
ARegion.Visible := true;
IWFrameRegion.AjaxReRender();
and the opposite to hide it

I would like to add some easing effect on the region when it appear and desappear.
Is it possible and how ?

Thank you,
Davide

PS
I tried using the Layout component which already has toggle method for its panels but the grid (with align: alClient) didn't align right on the center panel.

[Jorge Sousa]

Hi

ARegion.Width := 300;
ARegion.Visible := true;
IWFrameRegion.AjaxReRender();

You don't need to use .AjaxReRender for applying changes to these common properties like Region.Width, Region.Visible
When you change this properties, Intraweb takes care of generating the necessary javascript, to be executed in the browser, when these properties change in an ajax/async event.

There are however some operations or property changes that aren't supported in ajax/async events, ie, there's is no javascript generation for that methods/prop changes.

The trick to check is (unfortunatelly), try first without .AjaxReRender, if the changes are applied in browser, and maybe check the browser console to analyse ajax response, and if the changes aren't execute, then we use .AjaxReRender.

But we've to realize that, when using .AjaxReRender, that will rerender the respective control as an whole, in the case, the whole region, which always implies more traffic and more execution time in browser.

Now, about what you intend to you, in this case we need a little help from jQuery itself, because jQuery effects are applied to setting the css style display to none (hide) and block(show). while Intraweb works with css style visibility hidden / visible.

Here's the code. Have fun!

Code: Select all

procedure TIWForm5.IWAppFormCreate(Sender: TObject);
begin
  // Define the effects
  IWCGJQRegion1.JQEffects.Effect:= jqeExplode;
  IWCGJQRegion1.JQEffects.EffectOptionsExplode.Mode:= jqmShow;
  IWCGJQRegion1.JQEffects.EffectOptionsExplode.Pieces:= 10;
end;

procedure TIWForm5.IWCGJQButton1JQButtonOptionsClick(Sender: TObject; AParams: TStringList);
var // Toggle visibily with effects
  js: string;
begin
  if IWCGJQRegion1.Tag = 0 then
  begin
    js:= Format('$("#%s").hide(%s);',[IWCGJQRegion1.HTMLName,IWCGJQRegion1.JQEffects.JSon.AsJSon]);
    IWCGJQRegion1.Tag:= 1; { Invisible }
  end
  else
  begin
    js:= Format('$("#%s").show(%s);',[IWCGJQRegion1.HTMLName,IWCGJQRegion1.JQEffects.JSon.AsJSon]);
    IWCGJQRegion1.Tag:= 0; { Visible }
  end;
  WebApplication.CallBackResponse.AddJavaScriptToExecute(js);
//  IWCGJQRegion1.Visible:= not IWCGJQRegion1.Visible;
end;


[jredoc]

Hello

In the second post in this thread the following was stated.

You don't need to use .AjaxReRender for applying changes to these common properties like Region.Width, Region.Visible
When you change this properties, Intraweb takes care of generating the necessary javascript, to be executed in the browser, when these properties change in an ajax/async event.

Based on the above I have two questions regarding a grid that:
a) is placed on an IWCGJQRegion with the grid having Grid.JQOptions.AdjustHeightToRows := True; and
b) In the IDE both the grid and region are larger than required.

1. At run time, the grid will automatically shrink to the appropriate size based on the available rows when the frame is created. However, if the resultant grid size is smaller at run time then at design time, the following button click will not reduce the IWCGJQRegion height relative to the run time grid height, rather only to the design time grid height. Does anyone know what I am missing?

procedure TIWCGFrame_Meds.IWCGJQButton2JQButtonOptionsClick(Sender: TObject; AParams: TStringList);
begin
IWCGJQRegionPtMeds.Height := IWCGJQGridPtMeds.Height + 5;
end;

2) I would like the height of the IWCGJQregion to be reset to the correct height relative to the grid it contains when the frame is created and not by having the user depress a button. I have tried Grid.JQOptions.OnLoadComplete, Grid.OnRender etc to no avail. Is there a mechanism to accomplish this in code?

TIA

John

[Alexander Bulei]

Hi John,

Can you explain better what are you need?

AdjustHeightToRows property - will adjust the height automatically.

Best Regards.