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

Subscribe to this post

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.

Reply | Reply with quote

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,

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

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

<ej:Column Field="CustomerID"/>

<ej:Column Field="EmployeeID"/>

</Columns>

</ej:Grid>

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

Reply | Reply with quote

CONTACT US

Change the size of the Edit Dialog

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US