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:
- 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
Clickevents and call the corresponding grid's method to edit data.Razorsettings.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(); }); }); - 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
Clickevent and call the grid'sUpdateEditmethod in the handler.Razorcolumn.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
Documentation
More Examples
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
Sample/Controllers/HomeController.cs
C#using System.Web.Mvc;
using DevExpress.Web.Mvc;
using Sample.Models;
namespace Sample.Controllers {
public class HomeController : Controller {
PersonsList list = new PersonsList();
public ActionResult Index() {
return View(list.GetPersons());
}
public ActionResult GridViewTemplatePartial() {
return PartialView(list.GetPersons());
}
[HttpPost, ValidateInput(false)]
public ActionResult EditingAddNew([ModelBinder(typeof(DevExpressEditorsBinder))] Person person) {
if (ModelState.IsValid)
list.AddPerson(person);
return PartialView("GridViewTemplatePartial", list.GetPersons());
}
[HttpPost, ValidateInput(false)]
public ActionResult EditingUpdate([ModelBinder(typeof(DevExpressEditorsBinder))] Person personInfo) {
if (ModelState.IsValid)
list.UpdatePerson(personInfo);
return PartialView("GridViewTemplatePartial", list.GetPersons());
}
public ActionResult EditingDelete(int personId) {
list.DeletePerson(personId);
return PartialView("GridViewTemplatePartial", list.GetPersons());
}
}
}
Sample/Models/Person.cs
C#using System;
using System.ComponentModel.DataAnnotations;
namespace Sample.Models {
public class Person {
public Person() {
PersonID = 0;
FirstName = string.Empty;
MiddleName = string.Empty;
LastName = string.Empty;
}
public Person(int id, String firstName, string middleName, String lastName) {
this.PersonID = id;
this.FirstName = firstName;
this.MiddleName = middleName;
this.LastName = lastName;
}
[Key]
public int PersonID { get; set; }
[Required(ErrorMessage = "First Name is required")]
public string FirstName { get; set; }
public string MiddleName { get; set; }
[Required(ErrorMessage = "Last Name is required")]
public string LastName { get; set; }
}
}
Sample/Models/PersonsList.cs
C#using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace Sample.Models {
public class PersonsList {
public List<Person> GetPersons() {
if(HttpContext.Current.Session["Persons"] == null) {
List<Person> list = new List<Person>();
list.Add(new Person(1, "David", "Jordan", "Adler"));
list.Add(new Person(2, "Michael", "Christopher", "Alcamo"));
list.Add(new Person(3, "Amy", "Gabrielle", "Altmann"));
list.Add(new Person(4, "Meredith", "", "Berman"));
list.Add(new Person(5, "Margot", "Sydney", "Atlas"));
list.Add(new Person(6, "Eric", "Zachary", "Berkowitz"));
list.Add(new Person(7, "Kyle", "", "Bernardo"));
list.Add(new Person(8, "Liz", "", "Bice"));
HttpContext.Current.Session["Persons"] = list;
}
return (List<Person>)HttpContext.Current.Session["Persons"];
}
public void AddPerson(Person person) {
List<Person> list = GetPersons();
person.PersonID = list.Count + 1;
list.Add(person);
}
public void UpdatePerson(Person personInfo) {
Person editedPerson = GetPersons().Where(m => m.PersonID == personInfo.PersonID).First();
editedPerson.FirstName = personInfo.FirstName;
editedPerson.MiddleName = personInfo.MiddleName;
editedPerson.LastName = personInfo.LastName;
}
public void DeletePerson(int personId) {
List<Person> persons = GetPersons();
persons.Remove(persons.Where(m => m.PersonID == personId).First());
}
}
}
Sample/Views/Home/GridViewTemplatePartial.cshtml
Razor@model List<Sample.Models.Person>
@Html.DevExpress().GridView(
settings => {
settings.Name = "grid";
settings.KeyFieldName = "PersonID";
settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewTemplatePartial" };
settings.SettingsEditing.Mode = GridViewEditingMode.Inline;
settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Home", Action = "EditingAddNew" };
settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Home", Action = "EditingUpdate" };
settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Home", Action = "EditingDelete" };
/*Command Column Emulation*/
settings.Columns.Add(column => {
column.Caption = "#";
/*DataItemTemplate*/
/*New - Edit - Delete Buttons*/
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();
});
/*DataItemTemplate*/
/*EditItemTemplate*/
/*Update Button Only - No Cancel Button*/
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>");
});
/*EditItemTemplate*/
});
/*Command Column Emulation*/
settings.Columns.Add("FirstName");
settings.Columns.Add("MiddleName");
settings.Columns.Add("LastName");
}
).Bind(Model).GetHtml()
Sample/Views/Home/Index.cshtml
Razor@model List<Sample.Models.Person>
@Html.Partial("GridViewTemplatePartial", Model)