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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Change the size of the Edit Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

150954 Jan 25,2020 02:50 PM UTC Jan 27,2020 11:58 AM UTC ASP.NET Web Forms 1
loading
Tags: Grid
Ulf
Asked On January 25, 2020 02:50 PM UTC

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 [Syncfusion]
Replied On 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"/> 
         <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 



CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon