Current filter:
                                You should refresh the page.
                                Support Center

                                GridView - How to specify a custom EditForm Template

                                0

                                This example illustrates how to:
                                - Specify a custom EditForm Template via the GridViewSettings.SetEditFormTemplateContent method;
                                - Define the UploadControl Extension inside this template for uploading files when creating/editing a row (Note that UploadControl should be wrapped with a form to be able to post a selected file);
                                - Edit the in-memory datasource.

                                See Also:
                                E3530: How to bind GridView with standard in-memory data sources (DataTable, List<T>)
                                E3983: GridView - How to edit in memory data source

                                You must  log in  or  register  to leave comments
                                Select file
                                • GridViewPartial.cshtml
                                • HomeController.cs
                                • Users.cs
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2011 vol 2.13 - v2013 vol 2.9
                                @model List<Sample.Models.User>
                                @Html.DevExpress().GridView(
                                    settings => {
                                        settings.Name = "gridView";
                                        settings.KeyFieldName = "ID";
                                
                                        settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };
                                
                                        settings.SettingsEditing.Mode = GridViewEditingMode.EditFormAndDisplayRow;
                                        settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Home", Action = "AddNew" };
                                        settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Home", Action = "Update" };
                                        settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Home", Action = "Delete" };
                                
                                        settings.CommandColumn.Visible = true;
                                        settings.CommandColumn.NewButton.Visible = true;
                                        settings.CommandColumn.DeleteButton.Visible = true;
                                        settings.CommandColumn.EditButton.Visible = true;
                                
                                        settings.Columns.Add("NickName");
                                        settings.Columns.Add(
                                            column => {
                                                column.Caption = "Avatar";
                                                column.HeaderStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                                                column.SetDataItemTemplateContent(c => {
                                                    string url = (string)DataBinder.Eval(c.DataItem, "AvatarUrl");
                                                    ViewContext.Writer.Write(
                                                        !string.IsNullOrEmpty(url) ? "<img src=\"" + Url.Content(url) + "\"/>"
                                                                                   : "<center>Click Edit to load a New Avatar</center>"
                                                    );
                                                });
                                            }
                                        );
                                        settings.SetEditFormTemplateContent(
                                            c => {
                                                var user = ViewData["UserInfo"] != null ? ViewData["UserInfo"] : c.DataItem;
                                                Session["UserID"] = DataBinder.Eval(user, "ID") != null ? DataBinder.Eval(user, "ID") : Model.Count + 1;
                                
                                                ViewContext.Writer.Write("<div style=\"padding: 4px 0px; font-size: 8pt\">");
                                                Html.DevExpress().Label(
                                                    edtSettings => {
                                                        edtSettings.Text = "NickName";
                                                        edtSettings.AssociatedControlName = "NickName";
                                                        edtSettings.ControlStyle.Font.Bold = true;
                                                    }
                                                ).Render();
                                                Html.DevExpress().TextBox(
                                                    edtSettings => {
                                                        edtSettings.Name = "NickName";
                                                        edtSettings.ShowModelErrors = true;
                                                        edtSettings.Width = System.Web.UI.WebControls.Unit.Pixel(200);
                                                    }
                                                )
                                                .Bind(DataBinder.Eval(user, "NickName"))
                                                .Render();
                                                ViewContext.Writer.Write("</div>");
                                
                                                ViewContext.Writer.Write("<div style=\"padding: 4px 0px; font-size: 8pt\">");
                                
                                                Html.DevExpress().Label(
                                                    edtSettings => {
                                                        edtSettings.Text = "Avatar";
                                                        edtSettings.ControlStyle.Font.Bold = true;
                                                    }
                                                ).Render();
                                
                                                ViewContext.Writer.Write("<br />");
                                                ViewContext.Writer.Write(
                                                    "<div style=\"margin-top: 2px\">" +
                                                        "Allowed ContentTypes: image/jpeg<br />" +
                                                        "Maximum File Size: 4Mb" +
                                                    "</div>"
                                                );
                                                ViewContext.Writer.Write("<br />");
                                
                                                using(Html.BeginForm("ImageUpload", "Home", FormMethod.Post)) {
                                                    Html.DevExpress().UploadControl(
                                                        ucSettings => {
                                                            ucSettings.Name = "uploadControl";
                                                            ucSettings.ShowUploadButton = true;
                                                            ucSettings.AddUploadButtonsSpacing = 0;
                                                            ucSettings.AddUploadButtonsHorizontalPosition = AddUploadButtonsHorizontalPosition.InputRightSide;
                                                            ucSettings.CallbackRouteValues = new { Controller = "Home", Action = "ImageUpload" };
                                                            ucSettings.ValidationSettings.Assign(Sample.Controllers.UploadControlHelper.ValidationSettings);
                                                            ucSettings.ClientSideEvents.FileUploadComplete = "function(s, e) { if(e.isValid) { avatarUrl.SetValue(e.callbackData) } }";
                                                        }
                                                    ).Render();
                                                }
                                                Html.DevExpress().Label(
                                                    edtSettings => {
                                                        edtSettings.Text = "Avatar Url:";
                                                        edtSettings.AssociatedControlName = "avatarUrl";
                                                    }
                                                ).Render();
                                                Html.DevExpress().TextBox(
                                                    edtSettings => {
                                                        edtSettings.Name = "avatarUrl";
                                                        edtSettings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
                                                    }
                                                )
                                                .Bind(DataBinder.Eval(user, "AvatarUrl"))
                                                .Render();
                                                ViewContext.Writer.Write("</div>");
                                                ViewContext.Writer.Write(
                                                    "<div style=\"text-align: right; padding: 2px 2px 2px 2px\">" +
                                                        string.Format("<a href=\"#\" onclick=\"{0}.UpdateEdit()\">Update</a>&nbsp;", settings.Name) +
                                                        string.Format("<a href=\"#\" onclick=\"{0}.CancelEdit()\">Cancel</a>", settings.Name) +
                                                    "</div>"
                                                );
                                            }
                                        );
                                    }
                                ).Bind(Model).GetHtml()

                                To start a chat you should create a support ticket


                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners