Dialog buttons size not visible properly when we apply editsettings in the ejs-grid which is inside

[satish ratan patil]

I have a scenario, where i want to show a grid within an ejs-dialog -> on button click event.

file.html Code

<ejs-dialog #creditSumDialog id="creditSumDialog"
isModal="true" showOnInit="true" [visible]="false" [target]="targetElement"
style="max-width: 650px; width:auto; height: 600px !important; min-height: 250px !important; margin: 0 15px">
<ng-template #content>
<div>
<ejs-grid id="machineSelectorGrid" #machineSelectorGrid [dataSource]="ipsOuTimeModel" [allowSorting]="true"
[allowResizing]="true" style=" height:auto; width:auto" [toolbar]="toolbar" [editSettings]="editSettings">
<e-columns>
<e-column field="id" headerText="Id" width="70" [allowEditing]="false" [visible]="false"></e-column>
<e-column field="name" headerText="{{ 'Machine.ShiftName'| translate }}"
width="auto"></e-column>
<e-column field="validFrom" headerText="{{ 'Machine.ValidFrom'| translate }}"
width="auto"></e-column>
</e-columns>
</ejs-grid>
</div>
</ng-template>
</ejs-dialog>

file.ts code

public toolbar: ToolbarItems[];
public editSettings: EditSettingsModel;

this.toolbar = ['Add', 'Delete'];
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Bottom'};

public onClickOpenShiftModelDialog(args: any){
this.shiftModelDialogTitle = this._translatePipe.transform('Credits.CreditSumTitle');
// this.loadCreditSum(this.fromDate);
this.creditSumDialog.buttons = [
{
click: this.onClickOpenShiftModel.bind(this),
buttonModel: {
content: this._translatePipe.transform('Button.Ok')
}
},
{
click: this.onClickHideShiftModelDialog.bind(this),
buttonModel: {
content: this._translatePipe.transform('Button.Cancel'),
isPrimary: true
}
}
];
this.creditSumDialog.show();
}
public onClickHideShiftModelDialog() {
this.creditSumDialog.hide();

}
public onClickOpenShiftModel() {
this.creditSumDialog.hide();
}

I can see the dialog buttons properly until we don't have "editsettings" for the grid.Please refer attached screenshot

But when we apply the "editsettings" in the grid then dialog buttons size are not visible properly. Please refer attached screenshot

Attachment: Buttons_After_Editsetting_779bbcee.zip

[Indrajith Srinivasan]

Hi Satish, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. We have tried to reproduce the reported issue with the shared code blocks, placing the Grid inside the Dialog with editSettings configured but unfortunately we couldn’t find any issues as reported. We have also shared the ensured sample from our end. 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-gfbv8w?file=app.component.html  

 

Can you please share us the following details, 

 

• From where is the onClickOpenShiftModelDialog is called ?
• Can you please share us the video demo of the issue reproducing scenario?
• If possible, can you replicate the issue in the above shared sample and revert back to us?

 

The above details will be helpful for us to further validate on the reported issue. 

  

Regards, 

Indrajith 

[satish ratan patil]

I have tried with your sample code still facing the same issue.I am calling from one of the html file and files are attached. Please refer attached .html, .ts and .css file for the same.  Do we have any Syncfusion version dependency for this issue("@syncfusion/ej2": "18.2.47"). If it is so, then let me know if i need to update or not.

Attachment: Sample_b59cf617.zip

[Indrajith Srinivasan]

Hi Satish, 

 

Good day to you, 

 

Since you are able to reproduce the reported issue with the shared sample code blocks. We suspect that the reported issue occurs, due to empty content passed for the dialog buttons buttonModel content. Can you check the below line in your application, whether the content is passed for the dialog buttons ? 

 

 

public onClickOpenShiftModelDialog() { 

    //    this.loadCreditSum(this.fromDate); 

    this.creditSumDialog.buttons = [ 

      { 

        click: this.onClickOpenShiftModel.bind(this), 

        buttonModel: { 

          content: this._translatePipe.transform('Button.Ok') 

        } 

      }, 

      { 

        click: this.onClickHideShiftModelDialog.bind(this), 

        buttonModel: { 

          content: this._translatePipe.transform('Button.Cancel'), 

          isPrimary: true 

        } 

      } 

    ]; 

    this.creditSumDialog.show(); 

  } 

 

Regards, 

Indrajith 

[satish ratan patil]

Yes the content is passed to dialog buttons. I have attached the sample code in reply as well. In the same code, if remove editsettings from the grid in html file then it is showing the buttons properly. When we apply editsettings then buttons are no visible properly. It would be good if we can have a call for the same so that I can show it to you.

Attachment: Sample_d8b4408b.zip

[Indrajith Srinivasan]

Hi Satish, 

 

We have created a new incident under your Direct trac account to follow up with this query. We suggest you to follow up with the incident for further updates. Please log in using the below link.  

 

https://www.syncfusion.com/account/login 

 

Regards, 

Indrajith