Change the size of the Edit Dialog

[Ulf]

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. 

[Padmavathy Kamalanathan]

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, 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin 

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"/> 

         <Columns> 

             <ej:Column Field="OrderID"  IsPrimaryKey="true"/> 

             <ej:Column Field="CustomerID"/> 

             <ej:Column Field="EmployeeID"/> 

         </Columns> 

 </ej:Grid> 

 

     <script> 

        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) 

                } 

 

                 

              } 

        </script> 

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

Regards, 

Padmavathy Kamalanathan