This example demonstrates how to specify a custom EditForm template in the grid, add the Upload control to the template, and edit the in-memory data source.
Set up the grid control, set the GridView.SettingsEditing.Mode property to EditFormAndDisplayRow, create a templated column, and call the GridViewSettings.SetEditFormTemplateContent method to define an edit form template.
@Html.DevExpress().GridView(
settings => {
settings.Name = "gridView";
settings.KeyFieldName = "ID";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
// ...
settings.SetEditFormTemplateContent( c => {
// ...
}
}
).Bind(Model).GetHtml()Add the Upload control to the edit form template and define its settings. To allow the control to post selected files, wrap it in a form. In the FileUploadComplete event handler, assign the value obtained from the server to the text box editor.
@Html.DevExpress().GridView(
settings => {
// ...
settings.SetEditFormTemplateContent( c => {
// ...
using(Html.BeginForm("ImageUpload", "Home", FormMethod.Post)) {
Html.DevExpress().UploadControl(
ucSettings => {
// ...
ucSettings.ClientSideEvents.FileUploadComplete = "function(s, e) { if(e.isValid) { avatarUrl.SetValue(e.callbackData) } }";
}
).Render();
}
Html.DevExpress().TextBox(
edtSettings => {
edtSettings.Name = "avatarUrl";
edtSettings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
}
)
}
}
).Bind(Model).GetHtml()Update the in-memory data source.
- Grid View for MVC - How to Bind a Grid to Standard In-Memory Data Sources (DataTable, List)
- Grid View for MVC - How to Edit In-Memory Data Source
(you will be redirected to DevExpress.com to submit your response)