Multi Columns Form

Radzen Studio Angular
1

Thank you for the multi column form!
This is a great improvement!!

Will play around with it for the next days.

Im very happy to see this awful new feature!

Kind Regards
Thomas

2
  1. The Checkbox in multi column is on the wrong position. It is right from the label but It must be under the label like input fields.
  2. When a leave a page with multi columns and come back to the page the multi column properties is reset to

please see Video

Regards
Thomas

3

Hi Thomas,

We will address the checkbox position issue. However we cannot reproduce the second one. Going back to a page with multicolumn form seems to work fine in multiple tests. Anything that we could be missing?

4

For a quick fix use this CSS (put it in client\src\styles.css):

.form-label {
  display: block;
}
5

HI Atanas,
i send you my meta dir per mail. Hope that helps

Regards
Thomas

6

Hi Thomas,

We haven’t received anything yet. How big is the attachment? Can you try sending it again?

Regards,
Atanas

7

Hi Atanas,
its about 1 MB. I have send it again right now.

Regards
Thomas

8

I have reinstalled Radzen. Then imported the app and all works fine for now.
Seems to be somethinmg that the import has corrected.

Thomas

9

Hi Atanas,
thank you for the quick fix!
But i will wait for the (next ?) update for the correct checkbox positioning. This is a test app so its not urgent.

Btw… is it possible to position the label on top of input fields? even if there is a page that only have 1 column? Looks weird if the most pages have the label on top and a few pages with 1 column have the label to the left.:thinking:

Kind Regards
Thomas

10

Hi Atanas,
i got a problem here when running the app…

webpack-internal:///…/…/…/compiler/esm5/compiler.js:24882 Uncaught Error: Template parse errors:
Can’t bind to ‘columns’ since it isn’t a known property of ‘rz-form’.

  1. If ‘rz-form’ is an Angular component and it has ‘columns’ input, then verify that it is part of this module.
  2. If ‘rz-form’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
  3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. (" <rz-tabs-item [selected]=“true” text=“Artikel”>
    <rz-form #form0 cancelText=“Abbrechen” [ERROR ->][columns]=“2” [data]=“artikeldata” deleteText=“Löschen” [style]="{‘fontWeight’:‘normal’,‘width’:'1061"): ng:///AppModule/AddArtikelComponent.html@7:49
    at syntaxError (webpack-internal:///…/…/…/compiler/esm5/compiler.js:706)
    at TemplateParser.parse (webpack-internal:///…/…/…/compiler/esm5/compiler.js:24882)
    at JitCompiler._parseTemplate (webpack-internal:///…/…/…/compiler/esm5/compiler.js:34835)
    at JitCompiler._compileTemplate (webpack-internal:///…/…/…/compiler/esm5/compiler.js:34810)
    at eval (webpack-internal:///…/…/…/compiler/esm5/compiler.js:34711)
    at Set.forEach ()
    at JitCompiler._compileComponents (webpack-internal:///…/…/…/compiler/esm5/compiler.js:34711)
    at eval (webpack-internal:///…/…/…/compiler/esm5/compiler.js:34581)
    at Object.then (webpack-internal:///…/…/…/compiler/esm5/compiler.js:695)
    at JitCompiler._compileModuleAndComponents (webpack-internal:///…/…/…/compiler/esm5/compiler.js:34580)

It looks like it has something to do with columns but im not sure…
Can you help please?

Kind regards
Thomas

11

The label position is before inputs for single column forms in order to keep the existing behavior and to preserve vertical space (allow as many fields as possible in a form).

For multicolumn forms the labels are above the fields in order to preserve horizontal space and allow as many columns as possible to fit.

We may consider adding a setting to force certain label position for a future version of Radzen.

12

This error would happen if you have an older version of the Radzen components in your application. Check if the client directory contains a node_modules directory. If it does - delete it. This should address the problem.

13

Hi Atanas,
the “label on top” is a situation that will occur rarely. A manual workaround were absolutly sufficent.
Can i achieve the label on top in case of 1 column with some manually written code or css?

Regards
Thomas

14

Hi Atanas,
i had a folder node-modules. I deleted it. App runs! Thank you for the quick solution!

Question: now there is a shortcut to node-modules. Should it always be a shortcut? I mean… if there is a real node-modules folder in the client folder… should i always delete it so that radzen can create a shortcut ?

Kind Regards
Thomas

15

The following CSS should do the trick (put it in client\src\styles.css):

.form-row .col-sm-3 {
  max-width: 100%;
  flex: 0 0 100%;
}
16

The node_modules should be a link normally and Radzen will create it when you run the application and delete it afterwards. I guess you have run npm install at some point which created a physical node_modules directory. In that case Radzen tries to use the existing one.

The node_modules directory is where NodeJS keeps its modules. Radzen comes with a default one which is always up to date. However in advanced cases one may manually install the modules by runing npm install. In that case the developer is responsible for updating the node_modules on a regular basis. Unless you have custom node modules or have other reasons to maintain your own version of node_modules we recommend keeping the d

17

HI Atanas,
i think that the “real” node-modules folder in my client folder comes from an pull from git.
I have tested deleting the app folder and pull it from git. Surly the node-module folder will be created as a normal folder.
I think that is just how it is. Nothing to worry about if one has in mind what you say about the node-module folder.
And for version control i think there is no other way.

That brings me to another thought… I also can not version radzen.
What if i must get an older version from an app from version control? For the older version i need the matching Radzen version. Perhaps its a good idea to make older Radzen versions available?! Like a download from an archive folder?

Something to have in mind i think.

Regards
Thomas

18

Hi Thomas,

Radzen applications include a .gitignore file which should exclude the node_modules directory by default. It is very odd that pulling from git creates a node_modules directory.

Older versions of Radzen are available right now. However once you download it it will try to autoupdate. We always try to keep Radzen backwards compatible though. The latest version should be able to convert an older application by applying a set of “migrations”.

Best regards,
Atanas

19

Hi Atanas.
you are absolutly right. the node_modules folder isnt on git.
I tested it and it works like this:

  1. Push newly generated Radzen app to git with VS 2017
  2. Delete Radzen app folder
  3. Start VS 2017 and pull app from Git
  4. No “node_modules” folder in client folder.
  5. In VS 2017 press “rebuild application” or “debug”
  6. Now VS will update all NPM Packages and creates a “real” node_modules folder in the client folder. (That takes about 15 minutes)

I tested it once yesterday evening.
I will do further tests at hte weekend.

Kind Regards
Thomas