Grid View for ASP.NET MVC - How to use template editors to update grid data

This example demonstrates how to create a templated column, add an editor to the template, and call the jQuery.ajax method to get the editor's value and pass it to the server.

Note
In v13.2 and higher, you can use the batch edit functionality to edit grid data on the client and send it to the server on a single request: Grid in Batch Edit Mode.

Overview

Call a column's SetDataItemTemplateContent method and add an editor to the template. Assign a client-side ValueChanged event handler to the editor and pass the row's key value and the column's field name as parameters.

column.SetDataItemTemplateContent(c => {
    Html.DevExpress().ComboBox(cmbSettings => {
        cmbSettings.Name = "cmb" + c.KeyValue;
        <!-- ... -->
        cmbSettings.Properties.ClientSideEvents.ValueChanged = String.Format("function (s, e) {{ OnValueChanged(s, '{0}', {1}, '{2}'); }}",
            c.Column.FieldName, c.KeyValue, Url.Action("UpdateValue", "Home", null));
    }).Bind(DataBinder.Eval(c.DataItem, c.Column.FieldName)).Render();
});

In the editor's ValueChanged event handler, call the jQuery.ajax method to get the new editor's value and pass it to the server.

function OnValueChanged(s, fieldName, keyValue, url) {
    $.ajax({
        type: "POST",
        url: url,
        data: { key: keyValue, field: fieldName, value: s.GetValue() },
        beforeSend: function () {
            $(".status").text("Request has been sent");
        },
        success: function (msg) {
            $(".status").html(msg);
        }
    });
}

Files to Review

• HomeController.cs (VB: HomeController.vb)
• Script.js (VB: Script.js)
• GridViewPartial.cshtml (VB: GridViewPartial.vbhtml)

Documentation

• Gid View Templates

More Examples

• Grid View for ASP.NET Web Forms - How to use template editors to update grid data

Does this example address your development requirements/objectives?

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