Grid View for ASP.NET MVC - How to emulate command button functionality

This example demonstrates how to add custom buttons to a templated column and configure the grid's cell edit functionality.

Overview

Follow the steps below to emulate command button functionality:

1. Call a column's SetDataItemTemplateContent method and add hyperlink controls to the template to create custom New, Edit, and Delete buttons. For all buttons, handle their client-side Click events and call the corresponding grid's method to edit data.

   settings.Columns.Add(column => {
       column.Caption = "#";
       column.SetDataItemTemplateContent(c => {
           Html.DevExpress().HyperLink(hl => {
               hl.Name = "hlNew_" + c.KeyValue.ToString();
               hl.NavigateUrl = "javascript:;";
               hl.Properties.Text = "New";
               hl.Properties.ClientSideEvents.Click = string.Format("function(s, e) {{ {0}.AddNewRow(); }}", settings.Name);
           }).Render();
           ViewContext.Writer.Write(" ");
           Html.DevExpress().HyperLink(hl => {
               hl.Name = "hlEdit_" + c.KeyValue.ToString();
               hl.NavigateUrl = "javascript:;";
               hl.Properties.Text = "Edit";
               hl.Properties.ClientSideEvents.Click = string.Format("function(s, e) {{ {0}.StartEditRow('{1}'); }}", settings.Name, c.VisibleIndex);
           }).Render();
           ViewContext.Writer.Write(" ");
           Html.DevExpress().HyperLink(hl => {
               hl.Name = "hlDelete_" + c.KeyValue.ToString();
               hl.NavigateUrl = "javascript:;";
               hl.Properties.Text = "Delete";
               hl.Properties.ClientSideEvents.Click = string.Format("function(s, e) {{ {0}.DeleteRow('{1}'); }}", settings.Name, c.VisibleIndex);
           }).Render();
       });
   });

2. Call a column's SetEditItemTemplateContent and add a hyperlink control to the template to create a custom Update button. Handle the button's client-side Click event and call the grid's UpdateEdit method in the handler.

   column.SetEditItemTemplateContent(c => {
       ViewContext.Writer.Write("<div style=\"text-align: right;\">");
       Html.DevExpress().HyperLink(hl => {
           hl.Name = "hlUpdate";
           hl.NavigateUrl = "javascript:;";
           hl.Properties.Text = c.Grid.IsNewRowEditing
               ? "Add"
               : "Update";
           hl.Properties.ClientSideEvents.Click = string.Format("function(s, e) {{ {0}.UpdateEdit(); }}", settings.Name);
       }).Render();
       ViewContext.Writer.Write("</div>");
   });

Files to Review

• HomeController.cs
• Person.cs
• PersonsList.cs
• GridViewTemplatePartial.cshtml
• Index.cshtml

Documentation

• Data Editing in Grid
• Templates

More Examples

• Grid View for ASP.NET Web Forms - How to emulate command button functionality

Does this example address your development requirements/objectives?

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