Serenity: Dynamically change "Required" property of a field on clientside

[JohnRanger]

Hi all,

I have a form where I have a Checkbox which Change certain behaviors within this form (textarea field where CSV Content can be pasted).

Normally, there is only one column within the textarea field allowed but when the Checkbox is checked, an additional column is required (The function is to Import periphery assets like Monitors. Normally, this only accepts serialNumbers but optionally, it should accept serialNumber in first column and Inventory Label in 2nd column).

For this, I have an addtitional field where the CSV separator (e.g. Semicolon, colon, pipe, etc) can be Chosen.

All this works fine (including dynamically Change the Placeholder and the title on the CSV Content/TextArea field and Show/hide the CSV separator field) but I also want to make the CSV separator Dropdown box mandatory when the Checkbox is checked and "not mandatory" when the Checkbox is not checked.

I have played around on Client side with form.CsvDelimiterId.GetGridField().RemoveValidationRule("") etc but didn't figure out how I can:

1) Store the current "mandatory" status of a form field
2) remove the "mandatory" flag on a form field
3) Restore the stored "mandatory" status from step 1 onto the form field.

How can this be achieved?

Thanks for your Feedback

and with Kind regards,

John

[volkanceylan]

You may toggle required flag of a field like this:

form.CsvDelimiterId.Element.ToggleClass("required", form.SomeCheckbox.Value);

You should call this code in AfterLoadEntity and attaching click event of your checbox, e.g.:

form.SomeCheckbox.Click(e => { ... })

do this in dialog constructor

[JohnRanger]

Hi JaiQ,

thanks for your valuable Feedback. This works great.

One Thing I have seen is that - although the Validation when clicking the save button works as expected - the Label of the toggled field does not show the red * to indicate that the field is a required field.

I have looked around the porperties of a form field and the .element part of it but didn't find a method which would allow me to "refresh" the Label of the field or to set it.

How would I also set the red * when form.CsvDelimiterId.Element.ToggleClass("required", true)?

(It has something to do with <sup title="this field is required">*</sup> but how to add or remove this I didn't find out).

Thanks for your help and

with Kind regards,

John

[volkanceylan]

You should set it to required for sup (*) to be generated first.

Then, form.XyzField.GetGridField().Find("sup").Toggle(true)

[JohnRanger]

Hi JaiQ,

works perfect. Thank you very much!

For the benefit of other Readers, here the whole solution which works for me.

In xyzRow.cs:

...
[DisplayName("Db.Delivery.DataImport_Clients.CsvDelimiterId"), Column("CSV_Delimiter_ID"), ForeignKey("[dbo].[CSV_Delimiter]", "CSV_Delimiter_ID"), LeftJoin("jCsvDelimiter")] // , TextualField("CsvDelimiterName")
        [LookupEditor("Stammdaten.CSVDelimiter")]

--->     [Required(true)]   <---

        public Int32? CsvDelimiterId
        {
            get { return Fields.CsvDelimiterId[this]; }
            set { Fields.CsvDelimiterId[this] = value; }
        }
...

All the rest is done within xyzDialog.cs.

Within protected override void LoadEntity: (AlsoImportInventoryLabel is the Checkbox field which should only be available to the user when creating the Import the first time)

            // *** hide this control when in edit mode  ***
            if (IsEditMode)
            {
                form.AlsoImportInventoryLabel.GetGridField().Toggle(IsNew);
            }

Within AfterLoadEntity:

...
       // *** Set visibility of the CsvDelimiterId field when loading/displaying the Dialog ***
       if (form.AlsoImportInventoryLabel.Value == false)
       {
                form.CsvDelimiterId.GetGridField().Toggle(false);
       }


                // *** Please note that JaiQ/Volkan Ceylan recommends to put this into the constructor ***

                // *** Change Event handling for the Checkbox ***
                form.AlsoImportInventoryLabel.Change(e =>
                {
                    if (form.AlsoImportInventoryLabel.Value == true)
                    {
                        var isChecked = false;
                        // *** Display a warning / confirm Dialog when the Checkbox is being checked ***
                        var warning = new LocalText("Dialogs.Delivery.DataImport_PeripheryAssets.WarningAlsoImportInventoryLabel.Confirm");
                        Q.Confirm(warning.ToLocaleString(), () =>
                        {

                            isChecked = true;
                            PlaceholderText = PH_IncludingInventoryLabelCSVcontent;

                            form.AlsoImportInventoryLabel.Value = isChecked;

                            form.CsvContent.Element.Property("title", PlaceholderText);  // *** Change the title of the CsvContent field ***
                            form.CsvContent.Element.Property("placeholder", PlaceholderText);  // *** Change the placeholder of the CsvContent field ***

                            form.CsvDelimiterId.Element.ToggleClass("required", true);  // *** Make the CsvDelimiterId field a mandatory field ***
                            form.CsvDelimiterId.GetGridField().Find("sup").Toggle(true); // *** Switch on the red * in front of the Label ***
                            form.CsvDelimiterId.GetGridField().Toggle(true); // *** Make CsvDelimiterId visible ***


                        }, new ConfirmOptions { HtmlEncode = false }
                        );

                        form.AlsoImportInventoryLabel.Value = isChecked;

                    }
                    else
                    {
                        PlaceholderText = PH_normalCSVcontent;

                        form.CsvContent.Element.Property("title", PlaceholderText); // *** Set different title ***
                        form.CsvContent.Value = "";  // *** Clear CsvContent ***
                        form.CsvContent.Element.Property("placeholder", PlaceholderText); // *** Set different placeholder ***

                        form.CsvDelimiterId.Element.ToggleClass("required", false); // *** Remove the mandatory requirement for this field ***
                        form.CsvDelimiterId.GetGridField().Find("sup").Toggle(false); // *** Remove the red * in front of the Label ***
                        form.CsvDelimiterId.GetGridField().Toggle(false); // *** finally make this field disapear from the form (make it invisible)
                   }
               });

Not super pretty code but I hope this helps someone else to get the idea.

With Kind regards,

John

[AmuthaKondusamy]

Getting error on GetGridField() and Element.ToggleClass().