Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TIWjQDBGrid changing UI
#11
(07-30-2021, 06:04 AM)Alexandre Machado Wrote: Are you using local files?

If so, your files are outdated. Delete them and use CDN files, or download the same files pointed by the new CDN addresses.

Anything from the old "Katunga" repo is oudated.

I'M not using local files.

(07-30-2021, 06:05 AM)Alexandre Machado Wrote: All addresses you pointed out are wrong.

What IWBootstrap version is that? The new version released with IW 15.2.33 doesn't reference those files anymore.

Ok, can you point me the loads that I MUST do to have accurate IWBoostrap functionality, please? 
I can't find any documentation about this.

What should be the values to these global bootstrap variables?

gIWBSLibJQueryJs :=
gIWBSLibBootstrapCss :=
gIWBSLibBootstrapJs :=
gIWBSLibPolyFillerJs :=
gIWBSLibIWBSCss :=
gIWBSLibIWBSJs :=
gIWBSLibDynamicTabsCss :=
gIWBSLibDynamicTabsJs :=
gIWBSLibSummerNoteCss :=
gIWBSLibSummerNoteJs :=

And regarding to this, when I open a modal form, the modal parent's form is refreshing/render and because of that, the layout is changed, as I metioned.
So, how to avoid that after I open a modal form, the parent form is reload/refreshed ?

PS: The is something wrong when IWjQDBGrid.RenderCDNFiles is set to True (the default). Is I set it to False, this doesn't happend and everything is OK.
But than, if I do the same on both modal form and parent form, the grids won't refresh/render.
Reply
#12
Hi Alexandre,
I had the liberty to attach a simple TestCase for you to take a look and see what's happening.

1. Two buttons on the main form (Form3)
2. Form1 with a TIWjQDBGrid component with some records. See the theme/appearance of component TIWBSSelect and TIWBSButton. They are not flat.
3. Form2 without a TIWjQDBGrid component. See the theme/appearance of component TIWBSSelect and TIWBSButton. They are flat and I think, the normal behaviour of Bootstrap 3.
4. And on Form2, when you hit/press the button in front of "Picking nº 1", that opens a modal form with a TIWjQDBGrid with some records. After you close that modal form, see the theme/appearance of Form2 of component TIWBSSelect and TIWBSButton. They are not flat, they change their appearance.

And another strange thing, or maybe I'm missing something, is that the only way for me to show the records on that modal form is doing 2 IWjQDBGrid1.Refresh;, one on the TIWFrame1.IWFrameRegionAsyncShow and another using a TIWTimer, after activating TIWAppForm(Parent).RenderAsyncEnabled := True; (for the Form2, because it is the modal form parent). See the calling code to open the modal form and the code inside of the modal form.

Have a look Alexandre, please.
There must be something wrong here.
Appreciate.


Attached Files
.zip   TestCase.zip (Size: 493.24 KB / Downloads: 3)
Reply
#13
(07-30-2021, 10:45 AM)Comograma Wrote:
(07-30-2021, 06:04 AM)Alexandre Machado Wrote: Are you using local files?

If so, your files are outdated. Delete them and use CDN files, or download the same files pointed by the new CDN addresses.

Anything from the old "Katunga" repo is oudated.

I'M not using local files.

(07-30-2021, 06:05 AM)Alexandre Machado Wrote: All addresses you pointed out are wrong.

What IWBootstrap version is that? The new version released with IW 15.2.33 doesn't reference those files anymore.

Ok, can you point me the loads that I MUST do to have accurate IWBoostrap functionality, please? 
I can't find any documentation about this.

What should be the values to these global bootstrap variables?

gIWBSLibJQueryJs :=
gIWBSLibBootstrapCss :=
gIWBSLibBootstrapJs :=
gIWBSLibPolyFillerJs :=
gIWBSLibIWBSCss :=
gIWBSLibIWBSJs :=
gIWBSLibDynamicTabsCss :=
gIWBSLibDynamicTabsJs :=
gIWBSLibSummerNoteCss :=
gIWBSLibSummerNoteJs :=

And regarding to this, when I open a modal form, the modal parent's form is refreshing/render and because of that, the layout is changed, as I metioned.
So, how to avoid that after I open a modal form, the parent form is reload/refreshed ?

PS: The is something wrong when IWjQDBGrid.RenderCDNFiles is set to True (the default). Is I set it to False, this doesn't happend and everything is OK.
But than, if I do the same on both modal form and parent form, the grids won't refresh/render.

The links to those files are referenced in IWBSGlobal.pas

procedure IWBSLibSetCDNS;
begin
  gIWBSLibJQueryJs := 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';

  gIWBSLibBootstrapCss := 'http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css';
  gIWBSLibBootstrapJs := 'http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js';

  gIWBSLibPolyFillerJs := 'https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js';

  gIWBSLibSummerNoteCss := 'https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css';
  gIWBSLibSummerNoteJs := 'https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js';

  // Content kept in Github/Atozed repo, delivered via cdn.jsdelivr.net
  gIWBSLibIWBSCss := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/iwbs.min.css';
  gIWBSLibIWBSJs := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/iwbs.min.js';

  gIWBSLibDynamicTabsCss := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/dyntabs/bootstrap-dynamic-tabs.min.css';
  gIWBSLibDynamicTabsJs := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/dyntabs/bootstrap-dynamic-tabs.min.js';
end;

These files are the same used in the latest version of IWjQGrid. another thing is: If you are rendering jQuery, from IWBoostrap you must turn off the ServerController option which renders jQuery, otherwise you will end up with 2 references.

If you are still having problems I suggest you provide a test case showing exactly what is not working.
Reply
#14
(08-03-2021, 04:49 AM)Alexandre Machado Wrote:
(07-30-2021, 10:45 AM)Comograma Wrote:
(07-30-2021, 06:04 AM)Alexandre Machado Wrote: Are you using local files?

If so, your files are outdated. Delete them and use CDN files, or download the same files pointed by the new CDN addresses.

Anything from the old "Katunga" repo is oudated.

I'M not using local files.

(07-30-2021, 06:05 AM)Alexandre Machado Wrote: All addresses you pointed out are wrong.

What IWBootstrap version is that? The new version released with IW 15.2.33 doesn't reference those files anymore.

Ok, can you point me the loads that I MUST do to have accurate IWBoostrap functionality, please? 
I can't find any documentation about this.

What should be the values to these global bootstrap variables?

gIWBSLibJQueryJs :=
gIWBSLibBootstrapCss :=
gIWBSLibBootstrapJs :=
gIWBSLibPolyFillerJs :=
gIWBSLibIWBSCss :=
gIWBSLibIWBSJs :=
gIWBSLibDynamicTabsCss :=
gIWBSLibDynamicTabsJs :=
gIWBSLibSummerNoteCss :=
gIWBSLibSummerNoteJs :=

And regarding to this, when I open a modal form, the modal parent's form is refreshing/render and because of that, the layout is changed, as I metioned.
So, how to avoid that after I open a modal form, the parent form is reload/refreshed ?

PS: The is something wrong when IWjQDBGrid.RenderCDNFiles is set to True (the default). Is I set it to False, this doesn't happend and everything is OK.
But than, if I do the same on both modal form and parent form, the grids won't refresh/render.

The links to those files are referenced in IWBSGlobal.pas

procedure IWBSLibSetCDNS;
begin
  gIWBSLibJQueryJs := 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js';

  gIWBSLibBootstrapCss := 'http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css';
  gIWBSLibBootstrapJs := 'http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js';

  gIWBSLibPolyFillerJs := 'https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js';

  gIWBSLibSummerNoteCss := 'https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.css';
  gIWBSLibSummerNoteJs := 'https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote.min.js';

  // Content kept in Github/Atozed repo, delivered via cdn.jsdelivr.net
  gIWBSLibIWBSCss := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/iwbs.min.css';
  gIWBSLibIWBSJs := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/iwbs.min.js';

  gIWBSLibDynamicTabsCss := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/dyntabs/bootstrap-dynamic-tabs.min.css';
  gIWBSLibDynamicTabsJs := 'https://cdn.jsdelivr.net/gh/Atozed/iwbs@v1.1/dyntabs/bootstrap-dynamic-tabs.min.js';
end;

These files are the same used in the latest version of IWjQGrid. another thing is: If you are rendering jQuery, from IWBoostrap you must turn off the ServerController option which renders jQuery, otherwise you will end up with 2 references.

If you are still having problems I suggest you provide a test case showing exactly what is not working.

I did that, test case on my last post!!
I also and already tried with the links you provided and the same happens. 
Also I have JavaScriptOptions.RenderjQuery := False; in IWSevercontroller.OnConfig.
Take a look at the test case, please.
Thanks, Alexandre!!
Reply
#15
I'll have a look and get back to you.

Thanks
Reply
#16
Your test application doesn't work as you expect, but it is nothing related to the version of JavaScript files, nor their URLs.

It doesn't work because you are creating the grid at runtime and rendering it parented to a IWBS region/Frame. IWBS handles things in a "hacky" way which won't work as expected in this case. It works like that because it was developed when IW wasn't able to render controls dynamically created during an async call, so IWBS implemented its own mechanism.

I'll see what can be done in this case and let you know
Reply
#17
BTW, all you need to do in order to render CDN files for IWBS is calling

procedure TIWServerController.IWServerControllerBaseConfig(Sender: TObject);
begin
IWBSLibSetCDNS;
end;

It will set all the links to the correct URL.
Reply
#18
(08-04-2021, 05:57 AM)Alexandre Machado Wrote: BTW, all you need to do in order to render CDN files for IWBS is calling

procedure TIWServerController.IWServerControllerBaseConfig(Sender: TObject);
begin
  IWBSLibSetCDNS;
end;

It will set all the links to the correct URL.

Ok, thanks!

(08-04-2021, 05:34 AM)Alexandre Machado Wrote: Your test application doesn't work as you expect, but it is nothing related to the version of JavaScript files, nor their URLs.

It doesn't work because you are creating the grid at runtime and rendering it parented to a IWBS region/Frame. IWBS handles things in a "hacky" way which won't work as expected in this case. It works like that because it was developed when IW wasn't able to render controls dynamically created during an async call, so IWBS implemented its own mechanism.

I'll see what can be done in this case and let you know
On Form1 I'm not creating the grid at runtime at all, I'm just creating the form, that's it. And the behaviour is not what expected. I'm only using BS components.

On Form2, Yes, the grid it's on a region/Frame.

Just to help, if I set IWjQDBGrid.RenderCDNFiles to False and load the grid's css and js at runtime in ServerController:
  ContentFiles.Add('https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css');
  ContentFiles.Add('https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js');
  ContentFiles.Add('https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css');

everything works like a charm, as it should, as expected, both Form1 and Form2 before and after open/close the modal form. 
Something to investigate.
Reply
#19
In form 1 it works as expected.

Make sure that you do what I did (using the CDN) and clear the browser cache.
Reply
#20
(08-04-2021, 11:59 AM)Alexandre Machado Wrote: In form 1 it works as expected.

Make sure that you do what I did (using the CDN) and clear the browser cache.

Forgive me but it doesn't. I clear browser's cache, cookies, etc...

The buttons are not flat, neither the IWBSSelects if I use the plugin
IWBSAddGlobalLinkFile('https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css');
IWBSAddGlobalLinkFile('https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js');

See attached images. 
Image "01 - notOK (Form1).jpg" if not OK, the buttons are not flat as it should.
Image "02 - OK (Form2).jpg is OK, buttons are flat.

I attached also the test case exactly how I last tested it here.
Tested in 3 browser with same result: Edge, Chrome and IE.

Also if you change something on the test case, send it to me so that I can test it here exactly how you did it!!


Attached Files Thumbnail(s)
       

.zip   TestCase.zip (Size: 1,015.28 KB / Downloads: 3)
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)