Signature not working in modal

[Farai]

When I generate a modal popup with the signature control. It does not allow me to sign. Is this a recurring problem

[YuvanShankar Arunagiri]

Hi Farai,

We have validated your reported query and prepared the sample based on your requirement. Please refer the below code snippet. The signature pad render depends on parent div element height and width. Initially, the dialog component height and width were 0. So, only signature pad render with 0 height and width. To resolve this issue, render the signature pad in Opened event of the dialog component.

<SfDialog @bind-Visible=IsPopupVisible

                               IsModal=true

                               ShowCloseIcon=true

                               CloseOnEscape=true

                               CssClass="signature-modal">

              <DialogEvents Opened="@OnOpenHandler" Closed="@OnCloseHandler"></DialogEvents>

              <DialogTemplates>

                             <Header>

                                           <span class="sub-title">Signature</span>

                                           @*<span class="sub-title">@Localizer[TextItem.Signature.ToString()]</span>*@

                             </Header>

                             <Content>

                                              @if (isOpen) {

                                                             <SignatureComponent IsSignature=@true IsNext="@IsNext" />

                                              }

                             </Content>

              </DialogTemplates>

 

‘’’’’’’’’’’’’’

public void OnOpenHandler(Syncfusion.Blazor.Popups.OpenEventArgs args)

    {

        isOpen = true;

    }

 

              public void OnCloseHandler(Syncfusion.Blazor.Popups.CloseEventArgs args)

    {

        isOpen = false;

    }

Could you please check the above code and get back to us, if you need any further assistance on this. 

Regards,

YuvanShankar A

Attachment: BlazorApp1SignatureModalDemo_aab829b1.zip

[Farai]

Can I please have a solution using Javascript (ES5)?

[YuvanShankar Arunagiri]

Hi Farai,

We have prepared the sample based on your requirement. Using open event of dialog component, we can initialize the signature component shown as below.

var dialogObj = new ej.popups.Dialog({

    header: headerImg + '<div id="dlg-template" title="Nancy" class="e-icon-settings"> Nancy </div>',

    content: ' <canvas id="signature" style="height: 90%; width: 100%;"></canvas>',

    showCloseIcon: true,

    target: document.getElementById('target'),

    width: '435px',

    open: dialogOpen,

    close: dialogClose,

    height: '76%',

});

dialogObj.appendTo('#template'); 

……………………

function dialogOpen() {

    var signature = new ej.inputs.Signature({}, '#signature');

    document.getElementById('targetButton').style.display = 'none';

}

Sample link: https://stackblitz.com/edit/7usblx?file=index.js

Get back to us if you need any further assistance on this. 

Regards,

YuvanShankar A