devexpress mvc datagrid edit popup menu inside texbox width and height? - asp.net-mvc

Question

How can I change textbox height and width in a popup on devexpress mvc datagrid? I am using
#(Html.DevExtreme().DataGrid().Columns(c => {
c.Add().DataField("MyField").Visible(true).AllowGrouping(true);
}
I tried c.Add().DataField("Myfield").Width(100) but it is only working in datagrid; it does not work in popup element

Answer 1

First of all you need to know that you are treating with a Form and not with a simple grid, so you basically have to configure the form EditorOptions
So in jQuery it would be like this
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": { items: [{dataField:"yourField",editorOptions:"width:100%"}]}
}
});

Answer 2

The previous answer is a little old and doesn't work now so I'll give an updated answer.
This would change the width for a field in the popup form:
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": {
items: [{
dataField:"yourField",
editorOptions: {
width: "100%"
}
]}
}
});
Also if you wanted to have more control and use groups and set things, like height, you could use:
$("#datagrid").dxDataGrid({
editing: {
mode: "popup",
allowUpdating: true,
popup: {
showTitle: true,
title: "Message",
labelLocation: "top"
},
form: {
items: [
{
itemType: "group",
caption: "My Fields",
items: [
{
dataField: "Field1",
editorOptions: {
height: 200
}
},
{
dataField: "Field2",
editorOptions: {
value: true
}
}
]
}, {
itemType: "group",
caption: "My other fields",
items: [
{
dataField: "field3",
helpText: "Example: [phone]"
}
]
}
]
}
}
});
Notice that with and without grouping both use the editorOptions to control each field.