Change Edit Dialog Size

[Simon]

Hi All,

Is there an *easy* way to change the size of the DataGrid "Edit" dialog?

I have seen responses on the Forums that we can create a "Template" to change the dialog, but all I really want to do is increase the Height & Width...

If a simple fix is not possible, how can I reference fields from other datasources in the "Template"? For example, I have the Grid set up to show the details of one Table, but the user can also update details from 2 other tables (one via a drop-down list & the other via the FileManager). I have handled these successfully in the Grid Column "Templates" using Linq queries, but would I also have to duplicate everything in the EditDialog "Template"?

Thanks in advance

Simon

[Jeevakanth Palaniappan]

Hi Simon, 

Greetings from Syncfusion support. 

Query : All I really want to do is increase the Height & Width of Edit dialog 

 

We have validated your query and found that you need to change the dialog width and height. You can achieve your requirement by using the Dialog parameter of GridEditSettings component. Please find the below code snippet and the sample for your reference. 

<SfGrid DataSource="@Orders" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" Height="315"> 

    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog" Dialog="DialogParams"></GridEditSettings> 

    <GridColumns> 

    .. 

    .. 

    </GridColumns> 

</SfGrid> 

 

@code{ 

 

private DialogSettings DialogParams = new DialogSettings { Width = "450px", Height="550px" }; 

 

} 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion304436807  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP. 

[Simon]

Hi Jeevakanth,

Thanks for the reply.

Unfortunately, the 'Height' attribute doesn't appear to work ('Width' is fine), as I have tried 'Width = 600px' & 'Height = 800px', but the dialog is still wider than it is high. Is there potentially another attribute that is stopping the 'Height' from working?

Also, is there a list of all attributes that are available in the DialogSettings option?

Thanks in advance.

Simon

[Jeevakanth Palaniappan]

Hi Simon, 

Query 1: Height attribute not working 

We have validated your query by defining DialogSettings with width as ‘600px’ and height as ‘800px’ but we are unable to reproduce the reported issue. I have attached the below screenshot and the sample for your reference. 

 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion682128012  

Demo Link with DialogSettings options - https://blazor.syncfusion.com/demos/datagrid/grid-dialog-template?theme=bootstrap4  

If you are still facing the issue, please share us the following details. 

1. Please share the complete code snippet
2. Do you have any custom css? If so please share the same.
3. Share the css referred in Host.cshtml and the syncfusion Nuget version.
4. If possible kindly share us the issue reproducing sample or reproduce the issue in the provided sample.

Query 2: Is there a list of attributes available in DialogSettings options 

 

You can find the list of properties in the DialogSettings class. Please refer the below screenshot as well. 

 

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP. 

[Simon]

Hi Jeevakanth,

According to the 'Elements' tab in F12, it appears that something is setting the 'max-height' to '313px'. 

I assume it's something to do with being a proportion of the wrapper (approx. 40%)? Similar to this answer https://www.syncfusion.com/forums/150447/how-the-dialogs-css-max-height-is-being-calculated

See attached image.

Regards

Simon

PS: I've searched ALL the files in my Project and nowhere is 'max-height' referenced.

Attachment: html_74fb298a.7z

[Jeevakanth Palaniappan]

Hi Simon, 

We have validated your query and we suggest you to set max-height as none to resolve your issue. Please find the below code snippet and the sample for your reference. 

<SfGrid ID="Grid"> 

.. 

.. 

</SfGrid> 

 

<style> 

    div#Grid_dialogEdit_wrapper { 

    max-height: none !important; 

    } 

</style> 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/LatestVersion1953562756  

Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP. 

[Simon]

Hi Jeevakanth,

Thanks for the reply.

All working well now.

Regards

Simon

[Jeevakanth Palaniappan]

Hi Simon, 

Thanks for the update. Please get back to us if you need further assistance. 

Regards, 

Jeevakanth SP.