Custom TextBox added to Edit dialog does not support floatLabelType: "Always"

[Derrick Morin]

Hello,

I am adding a custom TextBox to the Scheduler Editor dialog within the onPopupOpen(args: PopupOpenEventArgs) method as described in the documentation.

The TextBox is constructed as follows with floatLabelType as "Always"

                const commentsTextBox = new TextBox({

                    multiline: true,

                    value: ((args.data) as any).Comments as string,

                    floatLabelType: "Always",

                    placeholder: "Notes",

                    htmlAttributes: { maxlength: "2000", rows: "2" }

                });

When I view the Editor dialog the first time, the Label is correctly placed at the top of the field.  

When I view the Editor dialog a second time, for a different event, the label is not on top of the field.

Upon inspection of the generated HTML I see that the label is assigned the css class e-label-bottom instead of e-label-top.  

Why is this happening if I had set floatLabelType: "Always" when constructing the TextBox?  I am using the Bootstrap Theme.

Thanks

Derrick

[Ravikumar Venkatesan]

Hi Derrick, 

Greetings from Syncfusion support. 

We have validated your reported query “Custom TextBox added to Edit dialog does not support floatLabelType: 'Always'” at our end. We have resolved your issue with the help of the below code. We have prepared a sample for your reference and it can be available below. 

[app.component.ts] 

  onPopupOpen(args: PopupOpenEventArgs): void { 

    if (args.type === 'Editor') { 

      if (!args.element.querySelector('.custom-field-row')) { 

        let row: HTMLElement = createElement('div', { className: 'custom-field-row' }); 

        let formElement: HTMLElement = <HTMLElement>args.element.querySelector('.e-schedule-form'); 

        args.element.querySelector('.e-dialog-parent').appendChild(row); 

        let container: HTMLElement = createElement('div', { className: 'custom-field-container' }); 

 

        let inputEle: HTMLInputElement = createElement('textarea', { className: 'e-field e-custom-notes', attrs: { name: 'Notes' }}) as HTMLInputElement; 

        container.appendChild(inputEle); 

        row.appendChild(container); 

         

        Input.createInput({element: inputEle as HTMLInputElement, floatLabelType: 'Always',properties: {placeholder: 'Notes'}}); 

 

        inputEle.setAttribute('name', 'Notes'); 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-add-external-ej2-text-area-to-edito-u5blzg?file=app.component.ts 

Kindly try the above sample and get back to us if you would require further assistance. 

UG(Add TextBox Programmatically): https://ej2.syncfusion.com/angular/documentation/textbox/how-to/add-textbox-programmatically/#add-textbox-programmatically 

UG(Adding Floating label to TextBox Programmatically): https://ej2.syncfusion.com/angular/documentation/textbox/how-to/add-textbox-programmatically/#add-textbox-programmatically 

Note: Refer to the below UG links for how to add TextBox Programmatically in Angular 

Regards, 

Ravikumar Venkatesan 

[Derrick Morin]

that works great!  thanks.   

If I wanted to add a NumericTextBox instead of a simple TextBox how would I do that?

Derrick

[Vengatesh Maniraj]

Hi Derrick, 

You are most welcome. 

And, we checked your requirement “NumericTextBox instead of normal TextBox” and we prepared the sample to render the NumericTextBox with the below code snippet. 

 onPopupOpen(args: PopupOpenEventArgs): void { 

    if (args.type === "Editor") { 

      // Create required custom elements in initial time 

      if (!args.element.querySelector(".custom-field-row")) { 

        let row: HTMLElement = createElement("div", { 

          className: "custom-field-row" 

        }); 

        let formElement: HTMLElement = <HTMLElement>( 

          args.element.querySelector(".e-schedule-form") 

        ); 

        args.element.querySelector(".e-dialog-parent").appendChild(row); 

        let container: HTMLElement = createElement("div", { 

          className: "custom-field-container" 

        }); 

        let inputEle: HTMLInputElement = createElement( 

          "input" 

        ) as HTMLInputElement; 

        container.appendChild(inputEle); 

        row.appendChild(container); 

        let nmeric: NumericTextBox = new NumericTextBox({ 

          value: 10 

        }); 

        nmeric.appendTo(inputEle); 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-add-external-ej2-text-area-to-edito-wywcup?file=app.component.ts 

Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 

Vengatesh  

[Derrick Morin]

Yes, the example shows me how to dynamically add a NumericTextBox to the Edit dialog but I could not get it to properly bind to the data source (I am using UrlAdaptor).  It would  display an existing just fine but would not save the value in the NumericTextBox back to the data source.  As a result, I had to revert back to using TextBox.

[Vengatesh Maniraj]

Hi Derrick, 

Thanks for the update. 

To store the numeric values in your database, we have to maintain the separate field in the event object. If we are not maintaining the field, the UI changes do not store in the database. So we suggest you please add an additional field in the event database like the below code snippet.  

  { 

    Id: 1, 

    Subject: "Server Maintenance", 

    StartTime: new Date(2018, 1, 11, 10, 0), 

    EndTime: new Date(2018, 1, 11, 11, 30), 

    EventType: "maintenance", 

    City: "Seattle", 

    CategoryColor: "#1aaa55", 

    Number: 10 

  } 

  

onPopupOpen(args: PopupOpenEventArgs): void { 

    if (args.type === "Editor") { 

      // Create required custom elements in initial time 

      if (!args.element.querySelector(".custom-field-row")) { 

        let row: HTMLElement = createElement("div", { 

          className: "custom-field-row" 

        }); 

        let formElement: HTMLElement = <HTMLElement>( 

          args.element.querySelector(".e-schedule-form") 

        ); 

        args.element.querySelector(".e-dialog-parent").appendChild(row); 

        let container: HTMLElement = createElement("div", { 

          className: "custom-field-container" 

        }); 

        let inputEle: HTMLInputElement = createElement("input", { 

          className: "e-field", 

          attrs: { name: "Number" } 

        }) as HTMLInputElement; 

        container.appendChild(inputEle); 

        row.appendChild(container); 

        let nmeric: NumericTextBox = new NumericTextBox({ 

          value: parseInt( 

            (args.data as { [key: string]: Object }).Number as any, 

            10 

          ) 

        }); 

        nmeric.appendTo(inputEle); 

        inputEle.setAttribute("name", "Number"); 

      } 

    } 

  } 

Sample: https://stackblitz.com/edit/ej2-angular-schedule-add-external-ej2-text-area-to-edito-wywcup?file=app.component.ts 

In the above sample, we are storing the number value in the events data source by maintaining the filed as Number.  

 

Kindly check the above sample and get back to us if you need any further assistance. 

Regards, 

Vengatesh