Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
TIWjQDBGrid changing UI
#21
I think I got it working correctly now.

There are several things wrong both in the demo and in IWBS source code.

Ill get back to you as soon as I get it working 100%
Reply
#22
Please update to IW 15.2.35. I'm 100% sure that your test case is working correctly now.

Several fixes and improvements in IWBootstrap regarding rendering of JS and CSS files
Reply
#23
(08-08-2021, 02:35 AM)Alexandre Machado Wrote: Please update to IW 15.2.35. I'm 100% sure that your test case is working correctly now.

Several fixes and improvements in IWBootstrap regarding rendering of JS and CSS files

Yes, almost the Alexandre, but unfortunatly it is not 100% right.
Look at the labels font/size of Form1 and Form2. They are not the same and it should.
See attachments.
The is still some kind of conflict.

If I put a IWjQDBGrid in Form2 also, it will go ok.

So now, with v15.2.35, if IWjQDBGrid.RenderFileCDNFiles is set to True, the font/size of labels and other components are sized/render correctly (like with Form1), but if we change IWjQDBGrid.RenderFileCDNFiles to False (try it with Form1) or if we don't have a IWjQDBGrid component on a Form at all (like Form2), the components fonts, aren't sized/render correctly.

With v15.2.35, my file wwwroot\files\styles.css if being ignored.

PS: After some more tests, I found that if, instead of loading my personal files on ServerController.OnConfig like this:
  ContentFiles.Add('files/styles.css');
  ContentFiles.Add('files/funcoes.js');

I change it to this:
  IWBSAddGlobalLinkFile('files/styles.css');
  IWBSAddGlobalLinkFile('files/funcoes.js');

It will work, but on Form2, after open modal form and close it, the same happens as before and even clicking on the IWSelect components won't do nothing.

Even if I set IWjQDBGrid.RenderFileCDNFiles is set to False and load jQGrid files in ServerController.OnConfig like this:
  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');
doesn't work, the grids and not rendered and with v15.2.34 was OK, as expected.

Some more digging in here, Alexandre.


Attached Files Thumbnail(s)
       
Reply
#24
> but if we change IWjQDBGrid.RenderFileCDNFiles to False

What files are you using? It doesn't have any logic because IW code has no idea where your JavaScript is coming form. This shows that the files are obviously different.
Reply
#25
> Even if I set IWjQDBGrid.RenderFileCDNFiles is set to False and load jQGrid files in ServerController.OnConfig like this:
> 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');

You shouldn't be doing this. If you set RenderCDNFiles to False you just need to add the files to your wwwfolder and that's it. You don't render them yourself. If you render them yourself you are duplicating files in the final HTML File, possibly with different versions and addresses. The result is unpredictable
Reply
#26
(08-12-2021, 11:21 PM)Alexandre Machado Wrote: > Even if I set IWjQDBGrid.RenderFileCDNFiles is set to False and load jQGrid files in ServerController.OnConfig like this:
>  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');

You shouldn't be doing this. If you set RenderCDNFiles to False you just need to add the files to your wwwfolder and that's it. You don't render them yourself. If you render them yourself you are duplicating files in the final HTML File, possibly with different versions and addresses. The result is unpredictable


I don't want or have the needs to change RenderCDNFiles to False, I just want it to work.
I understand what you said here and did it like you said.
Just to try/test what you said, I Changed RenderCDNFiles to False and put ui.jqgrid.min.css, jquery.jqgrid.min.js and jquery-ui.min.css in www folder, removed the 3 ContentFiles.Add lines, and the grids do not render, do not show at all and the label at the top where it says "Picking de entrada", are rendered with incorrect font, ignoring my-label-title css that is on my personal css file files/styles.css. Also these files (ui.jqgrid.min.css, jquery.jqgrid.min.js and jquery-ui.min.css) aren't beeing loaded, because I change jquery.jqgrid.min.js to translate the pager labels to Portuguese and it isn't happening, they are still in English.

And like I said previously, leaving RenderCDNFiles to True, the same label is displayed incorrectly in Form2, where it hasn't a IWjQDBGrid component. It isn't using my-label-title css that resides in files/styles.css. And also like I said, after open and close modal form in Form2, the parent's form (Form2) will be changed. Please try this, Alexandre.
Am I missing something here?

PS: Attached again the test case. Pay atention to the "Picking de entrada" label. It isn't in correct font/size, it's ignoring my-label-title class. Grids not rendered/presented.
Change also RenderCDNFiles to True and see what happens to that same label and after you open/close modal form on Form2. Try clicking on the IWBSSelect components after closing the modal window. Nothing happens.


Attached Files
.zip   TestCase.zip (Size: 614.99 KB / Downloads: 2)
Reply
#27
I managed to put the test case to work. Attached.
With RenderCDNFiles = False, hadded to the ExtraHeader of each form, these lines:

<link href="files/styles.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="funcoes.js"></script>

<link href="ui.jqgrid.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="jquery.jqgrid.min.js"></script>

and this works 100% in all forms and after open/close the modal form. Grids are rendered. See the label "Picking de entrada" (and others) font/size do not change, as it should.
This way, my css file, styles.css is not ignored. Removed all loads from ServerController.OnCreate.
Couldn't figure it out a way to put those lines only in one place (for instance, ServerController). Is it possible? Tried on HTMLHeaders of ServerController but no go.

With RenderCDNFiles = True, couldn't find a way for this to work 100%, like I said before.
See the test case, please.

PS: Strange thing is happening: where running the test case in Debug mode, it will through a error


Attached Files
.zip   TestCase RenderCDNFile = False.zip (Size: 615.83 KB / Downloads: 4)
Reply
#28
"Couldn't figure it out a way to put those lines only in one place (for instance, ServerController)."

Well, I managed to accomplished this. Removed those lines from each form and add them like this instead, in ServerController.OnCreate:
  IWBSAddGlobalLinkFile('ui.jqgrid.min.css');
  IWBSAddGlobalLinkFile('jquery.jqgrid.min.js');
  IWBSAddGlobalLinkFile('jquery-ui.min.css');

  IWBSAddGlobalLinkFile('files/styles.css');
  ContentFiles.Add('files/funcoes.js');

This way, all my forms will behave 100% and my classes aren't ignored. Using IWBSAddGlobalLinkFile instead of ContentFiles.Add, will prevent my class in files/styles.css to be ignored/overrided.

With RenderCDNFiles = True, my class will be always ignored. Can't manage to work!!
Reply
#29
Can you give me one single reason to set IWBoostrap to use CDN files and set the grid to the opposite?

Your project is missing files in the wwwroot folder, you can't have 2 boostrap.min.css/.js in the same page either.

BTW, all paths to static JS and CSS files *must* be relative to the root folder, thus it *must* start with a slash. This is documented here:

http://docs.atozed.com/Docs.dll/developm...JavaScript
Reply
#30
Please check your modified project here:

http://downloads.atozed.com/intraweb/dem...estCase.7z

A few things that I changed:

1) If you want more control over files being rendered (3rd party JS and CSS) you'd better use the PageContext property (of each form).


Example:

Code:
procedure TIWForm2.IWAppFormRender(Sender: TObject);
begin
  PageContext.AddBodyScriptFile('/files/funcoes.js');
  PageContext.AddLinkFile('/files/styles.css');
  PageContext.AddBodyScriptFile('https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/js/bootstrap-select.min.js');
  PageContext.AddLinkFile('https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.18/dist/css/bootstrap-select.min.css');
end;


This is way better than adding stuff directly to the headers or using IWBSAddGlobalxxxx() stuff (although since IW 15.2.34 IWBS code has beem modified to use the PageContext as well, so they are equivalent).

Also notice that each local file path starts with the slash '/'. This is mandatory in IW for files like this. The fact that in some cases "it just works either way" is irrelevant. The official recommendation is to prefix them all with a slash.

I suspect that you should also use a common ancestor form for this kind of stuff (And possibly other common code that you will need in your project). It is really simple to use Visual Form Inheritance in IntraWeb.

2) Some times (and this is a good example) you definitely will need to use !important and add it to your CSS rule (check the modified styles.css and compare with the one you sent me). When each control is rendered dynamically in a big project it becomes virtually impossible to control the order of the files in each form/page. That's why !important exists. Use it.

3) When jQGrid.RenderCDNFiles is false you need to provide the files yourself (you need to download the required files and add them to the wwwroot folder, so IW will use it). Differently from other IW controls, the jQGrid don't include these files (especially because it may conflict with other libraries). Maybe in a future version we will include it, but we will need to include a way for users to disable them, in case they want to user a different version of the same files.
I included the same file used when RenderCDNFiles to the wwwroot folder.

4) I kept the /files/ subfolder (under wwwroot). I recommend you to change the name of this folder. Prior to IW 14, the /files/ subfolder had a special meaning and there is some special code in IW to deal with this case. My suggestion is to separate them into /js/ , /css/ and /images/ folders, for instance. Or... leave everything inside wwwroot folder.

Cheers,
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)