We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change the size of the Edit Dialog

The default width of the Dialog used for editing seems to be around 300 px. I can't find an option to change that size. The textboxes inside the dialog are around 140 px with a lot of space to the right.
I don't want to create a template for the dialog box, I just want it wider. 

1 Reply

PK Padmavathy Kamalanathan Syncfusion Team January 27, 2020 11:58 AM UTC

Hi Ulf, 

Thanks for contacting Syncfusion Forums. 

QUERY: Change the size of default edit dialog of grid 
From your query we understand that you need to change the width of the edit dialog and also the width of the text box inside the edit dialog. You can achieve this requirement in the actionBegin event of grid with “beginedit” and “add” as request type. 

Please check the below help documentation, 

Inside the actionBegin event, you can access the dialog component and also components inside it and change it’s properties. Please check the below code snippet, 

<ej:Grid ID="OrdersGrid" runat="server" AllowPaging="true" > 
    <EditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"  
    EditMode="Dialog" ></EditSettings> 
<ClientSideEvents ActionBegin ="begin"/> 
             <ej:Column Field="OrderID"  IsPrimaryKey="true"/> 
             <ej:Column Field="CustomerID"/> 
             <ej:Column Field="EmployeeID"/> 
        function begin(args)  { 
          if (args.requestType == "add" || args.requestType == "beginedit") { 
               var proxy = this; 
               setTimeout(function () { 
                 $("#" + proxy._id + "_dialogEdit").ejDialog({ height: "auto", width: "290px" }); 
                 //changing the height and width of dialog 
                 $("#OrdersGridCustomerID")[0].style.width = "80px";  
                  //"OrdersGridCustomerID" is the id of customer id's textbox  
                 //- OrdersGrid is grid id, CustomerID is field name 
                 }, 100) 

If you have further queries, please get back to us. 

Padmavathy Kamalanathan 

Live Chat Icon For mobile
Up arrow icon