Skip to content

Add custom buttons to a templated column and configure the grid's cell edit functionality.

License

Notifications You must be signed in to change notification settings

DevExpress-Examples/asp-net-mvc-grid-emulate-command-button-functionality

Repository files navigation

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.

Emulate command buttons

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

Documentation

More Examples

Does this example address your development requirements/objectives?

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