1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. EJ2 Grid Add/Edit Dialog size

EJ2 Grid Add/Edit Dialog size

Hi,

I am trying to change the height & width of the Add/Edit dialog in ejs-grid. I wrote code as described in this link

The dialog header is changing successfully, but the height change is not working.

function actionComplete(args) {
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) {
            var dialog = args.dialog;

            alert("height: " + dialog.height+ " | width: " + dialog.width);
            dialog.height = 800;
            //dialog.height = "800px";
            alert("height: " + dialog.height + " | width: " + dialog.width);

            dialog.header = args.requestType === 'beginEdit' ? 'Edit Employee: ' + args.rowData['EmpCode'] : 'Add New Employee';
        }
    }



Thanks
Avinash Tauro

5 Replies
MS Manivel Sellamuthu Syncfusion Team May 26, 2020 07:30 AM UTC

Hi Avinash, 

Greetings from Syncfusion support. 

We have tried to  replicate the reported issue at our end. But the Dialog height is changing successfully. Please refer the below code , sample and screenshot for more information. 
Also we would like to inform that the dialog element has the max-height property, which is calculated based on the available window height. So in the normal window, we cannot set dialog height more than 658px. 

<script> 
 
    function actionComplete(args) { 
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
            var dialog = args.dialog; 
            dialog.height = 658; 
            // change the header of the dialog 
            dialog.header = args.requestType === 'beginEdit' ? 'Record of ' + args.rowData['CustomerID'] : 'New Customer'; 
        } 
    } 
 
</script> 


Screenshot: Before applying height:  

 

After applying height: 
 
 

Please let us know, if you need further assistance. 

Regards, 
Manivel 


AV Avinash May 26, 2020 08:01 AM UTC

Hi,

Thanks for this info. Its working fine up to max dialog height of 658.

Is this max size listed anywhere in the documentation, else suggest you add this information at https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/customize-the-edit-dialog/

Thanks
Avinash Tauro



MS Manivel Sellamuthu Syncfusion Team May 27, 2020 05:30 AM UTC

Hi Avinash, 

We are happy to hear that the provided solution worked. 

Currently we do not have documentation for this, we will consider this for documentation update and it will be refreshed in any of our upcoming release.  

Please let us know, if you need further assistance. 

Regards, 
Manivel 


MR Mike Rowley August 14, 2020 05:25 PM UTC

I am adding to this post in case someone else runs across the issue, it appears this is a bug, which I reported here:
https://www.syncfusion.com/feedback/17035/grid-dialog-max-height-limited-by-the-height-of-the-grid

There is a bug where the max height of a data grid's dialog is limited by the height of the grid.  A grid with few rows makes a dialog's max height smaller than a grid with many rows.

I have taken a sample from the forums and by changing the data load function from 

GetOneRecord to GetAllRecords and back you can see the height of the add dialog is less than 658 when only one record is in the grid.

Attached is an updated project with the two data load functions which shows the issue I have run into, until the bug is fixed, any suggestions on how to avoid this, in particular when using an add dialog for the first record added to a grid, the max height can be as low as 250px.

Thanks
M


Attachment: griddialogheightbug_8571329b.zip

MS Manivel Sellamuthu Syncfusion Team August 17, 2020 02:31 PM UTC

Hi Mike, 

Greetings from Syncfusion support. 

We have validated your requirement. you maintain the same height of the Dialog regardless of the grid rows by setting the max height property of the dialog element. Please refer the below code example for more information. 

    function actionComplete(args) { 
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
            var dialog = args.dialog; 
// setting the height and max height of the dialog elements 
            dialog.height = 658; 
            dialog.element.style.maxHeight = "658px" 
        } 
    } 

Please let us know, if you need further assistance. 

Regards, 
Manivel 


Loader.
Up arrow icon