Skip to content

Specify a custom EditForm template in the grid, add the Upload control to the template, and edit the in-memory data source.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/asp-net-mvc-grid-specify-custom-editform-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Grid View for ASP.NET MVC- How to Specify a Custom Edit Form Template

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.

Grid View for MVC - CustomEditFormTemplate

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.

Files to Look At

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)

About

Specify a custom EditForm template in the grid, add the Upload control to the template, and edit the in-memory data source.

Topics

Resources

License

Stars

Watchers

Forks

Contributors 2

  •  
  •