Grid View for ASP.NET Web Forms - How to use the WebMethod attribute to update data in particular grid columns

This example demonstrates how to create data item templates and use the WebMethod attribute to update data in templated columns without refreshing the entire grid.

WebMethod attribute

Overview

Follow the steps below:

Specify a column's DataItemTemplate property and add a control to the template. In the control's Init event handler, specify the control's ClientInstanceName property based on the row's key value.

ASPx
<dx:GridViewDataSpinEditColumn FieldName="C2" Caption="Numeric (Live)">  
    <DataItemTemplate>  
        <dx:ASPxLabel ID="labelC1" runat="server" Text='<%# Eval("C2") %>' OnInit="labelC1_Init" />  
    </DataItemTemplate>  
</dx:GridViewDataSpinEditColumn>  
<dx:GridViewDataCheckColumn FieldName="C4" Caption="Boolean (Live)">  
    <DataItemTemplate>  
        <dx:ASPxCheckBox ID="cbC4" runat="server" Value='<%# Convert.ToBoolean(Eval("C4")) %>'  
            ReadOnly="true" OnInit="cbC4_Init" />  
    </DataItemTemplate>  
</dx:GridViewDataCheckColumn>

C#
protected void labelC1_Init(object sender, EventArgs e) {  
    ASPxLabel label = sender as ASPxLabel;  
    GridViewDataItemTemplateContainer container = label.NamingContainer as GridViewDataItemTemplateContainer;  
    label.ClientInstanceName = "labelC1_" + container.KeyValue;  
}  
protected void cbC4_Init(object sender, EventArgs e) {  
    ASPxCheckBox cb = sender as ASPxCheckBox;  
    GridViewDataItemTemplateContainer container = cb.NamingContainer as GridViewDataItemTemplateContainer;  
    cb.ClientInstanceName = "cbC4_" + container.KeyValue;  
}

Send a request to the server to get new values and use the WebMethod attribute to pass the values to the client.

JavaScript
PageMethods.GetUpdatedDataFromServer(keys, onSucess, onError);

C#
[WebMethod]  
public static string GetUpdatedDataFromServer(int[] keys) {  
    ChangeAllColumnDataRandomly();  
    List<GridDataItem> GridData = GetDataSource();  
    List<GridDataItem> newDataRequiredForClient = new List<GridDataItem>();  
  
    foreach (int keyValue in keys) {  
        GridDataItem item = GridData.Find(x => x.ID == keyValue);  
        newDataRequiredForClient.Add(item);  
    }  
    var jsonSerialiser = new JavaScriptSerializer();  
    var json = jsonSerialiser.Serialize(newDataRequiredForClient);  
    return json;  
}  
public static void ChangeAllColumnDataRandomly() {  
    // ...  
}  
public static List<GridDataItem> GetDataSource() {  
    // ...  
}

Update data in templated columns on the client side or specify an error message.

JavaScript
function onSucess(result) {  
    var items = JSON.parse(result);  
    for (var i = 0; i < items.length; i++) {  
        var label = ASPxClientControl.GetControlCollection().GetByName("labelC1_" + items[i].ID);  
        label.SetText(items[i].C2);  
        var checkBox = ASPxClientControl.GetControlCollection().GetByName("cbC4_" + items[i].ID);  
        checkBox.SetChecked(items[i].C4);  
    }  
}  
function onError(result) {  
    alert('Something wrong!');  
}

Documentation

More Examples

How to display dynamic data within the ASPxGridView (Live Data) without full grid updating using the ASPxCallback control

Example Code

Default.aspx

ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v17.1, Version=17.1.17.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function RequestNewData() {
            var startIndex = gridView.GetTopVisibleIndex();
            var rowsCount = gridView.GetVisibleRowsOnPage();
            var keys = new Array(rowsCount);
            for (var i = startIndex; i < startIndex + rowsCount; i++) {
                keys[i - startIndex] = gridView.GetRowKey(i);
            }


            PageMethods.GetUpdatedDataFromServer(keys, onSucess, onError);

        }
        function onSucess(result) {
            var items = JSON.parse(result);
            for (var i = 0; i < items.length; i++) {
                var label = ASPxClientControl.GetControlCollection().GetByName("labelC1_" + items[i].ID);
                label.SetText(items[i].C2);
                var checkBox = ASPxClientControl.GetControlCollection().GetByName("cbC4_" + items[i].ID);
                checkBox.SetChecked(items[i].C4);
            }
        }

        function onError(result) {
            alert('Something wrong!');
        }
    </script>
</head>
<body>

    <form id="frmMain" runat="server">

        <asp:ScriptManager runat="server" ID="scriptManager" EnablePageMethods="true">
        </asp:ScriptManager>
        <table>
            <tr>
                <td>
                    <dx:ASPxButton ID="btUpdateData" runat="server" Text="Refresh Data" AutoPostBack="false" ClientInstanceName="btUpdateData">
                        <ClientSideEvents Click="function(s, e){
                            RequestNewData();
                            }" />
                    </dx:ASPxButton>
                </td>
                <td>
                    <dx:ASPxCheckBox ID="cbRefreshAutomatically" runat="server" Text="Refresh Automatically">
                        <ClientSideEvents CheckedChanged="function(s, e){
                                timer.SetEnabled(s.GetChecked());
                                btUpdateData.SetEnabled(!s.GetChecked());
                        }" />
                    </dx:ASPxCheckBox>
                </td>
            </tr>
        </table>
        <dx:ASPxGridView ID="gridView" runat="server" KeyFieldName="ID" ClientInstanceName="gridView"
            OnRowInserting="Grid_RowInserting" OnRowUpdating="Grid_RowUpdating" OnRowDeleting="Grid_RowDeleting">
            <Columns>
                <dx:GridViewCommandColumn ShowNewButtonInHeader="true" ShowDeleteButton="true" />
                <dx:GridViewDataColumn FieldName="ID">
                </dx:GridViewDataColumn>
                <dx:GridViewDataDateColumn FieldName="C5" Caption="Date" />
                <dx:GridViewDataSpinEditColumn FieldName="C2" Caption="Numeric (Live)">
                    <DataItemTemplate>
                        <dx:ASPxLabel ID="labelC1" runat="server" Text='<%# Eval("C2") %>' OnInit="labelC1_Init"></dx:ASPxLabel>
                    </DataItemTemplate>
                </dx:GridViewDataSpinEditColumn>
                <dx:GridViewDataCheckColumn FieldName="C4" Caption="Boolean (Live)">
                    <DataItemTemplate>
                        <dx:ASPxCheckBox ID="cbC4" runat="server" Value='<%# Convert.ToBoolean(Eval("C4")) %>'
                            ReadOnly="true" OnInit="cbC4_Init">
                        </dx:ASPxCheckBox>
                    </DataItemTemplate>
                </dx:GridViewDataCheckColumn>
            </Columns>
        </dx:ASPxGridView>
        <dx:ASPxTimer ID="timer" runat="server" Enabled="false" Interval="2000" ClientInstanceName="timer">
            <ClientSideEvents Tick="function(s, e){ RequestNewData(); }" />
        </dx:ASPxTimer>
    </form>
</body>
</html>

Default.aspx.cs(vb)

C#
VB.NET

C#
using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Linq;
using DevExpress.Web.Data;
using DevExpress.Web;
using System.Web.Services;
using System.Web;
using System.Web.Script.Serialization;

public partial class _Default: System.Web.UI.Page {

    protected void labelC1_Init(object sender, EventArgs e) {
        ASPxLabel label = sender as ASPxLabel;
        GridViewDataItemTemplateContainer container = label.NamingContainer as GridViewDataItemTemplateContainer;
        label.ClientInstanceName = "labelC1_" + container.KeyValue;
    }
    protected void cbC4_Init(object sender, EventArgs e) {
        ASPxCheckBox cb = sender as ASPxCheckBox;
        GridViewDataItemTemplateContainer container = cb.NamingContainer as GridViewDataItemTemplateContainer;
        cb.ClientInstanceName = "cbC4_" + container.KeyValue;
    }

    [WebMethod]
    public static string GetUpdatedDataFromServer(int[] keys) {

        ChangeAllColumnDataRandomly();
        List<GridDataItem> GridData = GetDataSource();
        List<GridDataItem> newDataRequiredForClient = new List<GridDataItem>();

        foreach (int keyValue in keys) {
            GridDataItem item = GridData.Find(x => x.ID == keyValue);
            newDataRequiredForClient.Add(item);
        }
        var jsonSerialiser = new JavaScriptSerializer();
        var json = jsonSerialiser.Serialize(newDataRequiredForClient);
        return json;
    }
    public static void ChangeAllColumnDataRandomly() {
        List<GridDataItem> GridData = GetDataSource();
        Random random = new Random();
        int randomNumber;
        for (int i = 0; i < GridData.Count; i++) {
            randomNumber = random.Next(0, 200);
            GridData[i].C2 = randomNumber;
            GridData[i].C4 = randomNumber % 4 != 0;
        }
    }
    public static List<GridDataItem> GetDataSource() {
        var key = "34FAA431-CF79-4869-9488-93F6AAE81263";
        List<GridDataItem> GridData = (List<GridDataItem>)HttpContext.Current.Session[key];
        return GridData;
    }

    #region Standard data
    protected List<GridDataItem> GridData
    {
        get
        {
            var key = "34FAA431-CF79-4869-9488-93F6AAE81263";
            if (!IsPostBack || Session[key] == null)
                Session[key] = Enumerable.Range(0, 100).Select(i => new GridDataItem
                {
                    ID = i,
                    C1 = i % 2,
                    C2 = i * (i % 3),
                    C3 = "C3 " + i,
                    C4 = i % 4 != 0,
                    C5 = new DateTime(2013 + i, 12, 16)
                }).ToList();
            return (List<GridDataItem>)Session[key];
        }
    }
    protected void Page_Load(object sender, EventArgs e) {
        gridView.DataSource = GridData;
        gridView.DataBind();
    }
    protected void Grid_RowInserting(object sender, ASPxDataInsertingEventArgs e) {
        InsertNewItem(e.NewValues);
        CancelEditing(e);
    }
    protected void Grid_RowUpdating(object sender, ASPxDataUpdatingEventArgs e) {
        UpdateItem(e.Keys, e.NewValues);
        CancelEditing(e);
    }
    protected void Grid_RowDeleting(object sender, ASPxDataDeletingEventArgs e) {
        DeleteItem(e.Keys, e.Values);
        CancelEditing(e);
    }
    protected GridDataItem InsertNewItem(OrderedDictionary newValues) {
        var item = new GridDataItem() { ID = GridData.Count };
        LoadNewValues(item, newValues);
        GridData.Add(item);
        return item;
    }
    protected GridDataItem UpdateItem(OrderedDictionary keys, OrderedDictionary newValues) {
        var id = Convert.ToInt32(keys["ID"]);
        var item = GridData.First(i => i.ID == id);
        LoadNewValues(item, newValues);
        return item;
    }
    protected GridDataItem DeleteItem(OrderedDictionary keys, OrderedDictionary values) {
        var id = Convert.ToInt32(keys["ID"]);
        var item = GridData.First(i => i.ID == id);
        GridData.Remove(item);
        return item;
    }
    protected void LoadNewValues(GridDataItem item, OrderedDictionary values) {
        item.C1 = Convert.ToInt32(values["C1"]);
        item.C2 = Convert.ToDouble(values["C2"]);
        item.C3 = Convert.ToString(values["C3"]);
        item.C4 = Convert.ToBoolean(values["C4"]);
        item.C5 = Convert.ToDateTime(values["C5"]);
    }
    protected void CancelEditing(CancelEventArgs e) {
        e.Cancel = true;
        gridView.CancelEdit();
    }
    public class GridDataItem {
        public int ID { get; set; }
        public int C1 { get; set; }
        public double C2 { get; set; }
        public string C3 { get; set; }
        public bool C4 { get; set; }
        public DateTime C5 { get; set; }
    }
    #endregion

}

Visual Basic
Option Infer On

Imports System
Imports System.Collections.Generic
Imports System.Collections.Specialized
Imports System.ComponentModel
Imports System.Linq
Imports DevExpress.Web.Data
Imports DevExpress.Web
Imports System.Web.Services
Imports System.Web
Imports System.Web.Script.Serialization

Partial Public Class _Default
    Inherits System.Web.UI.Page

    Protected Sub labelC1_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim label As ASPxLabel = TryCast(sender, ASPxLabel)
        Dim container As GridViewDataItemTemplateContainer = TryCast(label.NamingContainer, GridViewDataItemTemplateContainer)
        label.ClientInstanceName = "labelC1_" & container.KeyValue
    End Sub
    Protected Sub cbC4_Init(ByVal sender As Object, ByVal e As EventArgs)
        Dim cb As ASPxCheckBox = TryCast(sender, ASPxCheckBox)
        Dim container As GridViewDataItemTemplateContainer = TryCast(cb.NamingContainer, GridViewDataItemTemplateContainer)
        cb.ClientInstanceName = "cbC4_" & container.KeyValue
    End Sub

    <WebMethod> _
    Public Shared Function GetUpdatedDataFromServer(ByVal keys() As Integer) As String

        ChangeAllColumnDataRandomly()
        Dim GridData As List(Of GridDataItem) = GetDataSource()
        Dim newDataRequiredForClient As New List(Of GridDataItem)()

        For Each keyValue As Integer In keys
            Dim item As GridDataItem = GridData.Find(Function(x) x.ID = keyValue)
            newDataRequiredForClient.Add(item)
        Next keyValue
        Dim jsonSerialiser = New JavaScriptSerializer()
        Dim json = jsonSerialiser.Serialize(newDataRequiredForClient)
        Return json
    End Function
    Public Shared Sub ChangeAllColumnDataRandomly()
        Dim GridData As List(Of GridDataItem) = GetDataSource()
        Dim random As New Random()
        Dim randomNumber As Integer
        For i As Integer = 0 To GridData.Count - 1
            randomNumber = random.Next(0, 200)
            GridData(i).C2 = randomNumber
            GridData(i).C4 = randomNumber Mod 4 <> 0
        Next i
    End Sub
    Public Shared Function GetDataSource() As List(Of GridDataItem)
        Dim key = "34FAA431-CF79-4869-9488-93F6AAE81263"
        Dim GridData As List(Of GridDataItem) = DirectCast(HttpContext.Current.Session(key), List(Of GridDataItem))
        Return GridData
    End Function

    #Region "Standard data"
    Protected ReadOnly Property GridData() As List(Of GridDataItem)
        Get
            Dim key = "34FAA431-CF79-4869-9488-93F6AAE81263"
            If Not IsPostBack OrElse Session(key) Is Nothing Then
                Session(key) = Enumerable.Range(0, 100).Select(Function(i) New GridDataItem With { _
                    .ID = i, _
                    .C1 = i Mod 2, _
                    .C2 = i * (i Mod 3), _
                    .C3 = "C3 " & i, _
                    .C4 = i Mod 4 <> 0, _
                    .C5 = New Date(2013 + i, 12, 16) _
                }).ToList()
            End If
            Return DirectCast(Session(key), List(Of GridDataItem))
        End Get
    End Property
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        gridView.DataSource = GridData
        gridView.DataBind()
    End Sub
    Protected Sub Grid_RowInserting(ByVal sender As Object, ByVal e As ASPxDataInsertingEventArgs)
        InsertNewItem(e.NewValues)
        CancelEditing(e)
    End Sub
    Protected Sub Grid_RowUpdating(ByVal sender As Object, ByVal e As ASPxDataUpdatingEventArgs)
        UpdateItem(e.Keys, e.NewValues)
        CancelEditing(e)
    End Sub
    Protected Sub Grid_RowDeleting(ByVal sender As Object, ByVal e As ASPxDataDeletingEventArgs)
        DeleteItem(e.Keys, e.Values)
        CancelEditing(e)
    End Sub
    Protected Function InsertNewItem(ByVal newValues As OrderedDictionary) As GridDataItem
        Dim item = New GridDataItem() With {.ID = GridData.Count}
        LoadNewValues(item, newValues)
        GridData.Add(item)
        Return item
    End Function
    Protected Function UpdateItem(ByVal keys As OrderedDictionary, ByVal newValues As OrderedDictionary) As GridDataItem

        Dim id_Renamed = Convert.ToInt32(keys("ID"))
        Dim item = GridData.First(Function(i) i.ID = id_Renamed)
        LoadNewValues(item, newValues)
        Return item
    End Function
    Protected Function DeleteItem(ByVal keys As OrderedDictionary, ByVal values As OrderedDictionary) As GridDataItem

        Dim id_Renamed = Convert.ToInt32(keys("ID"))
        Dim item = GridData.First(Function(i) i.ID = id_Renamed)
        GridData.Remove(item)
        Return item
    End Function
    Protected Sub LoadNewValues(ByVal item As GridDataItem, ByVal values As OrderedDictionary)
        item.C1 = Convert.ToInt32(values("C1"))
        item.C2 = Convert.ToDouble(values("C2"))
        item.C3 = Convert.ToString(values("C3"))
        item.C4 = Convert.ToBoolean(values("C4"))
        item.C5 = Convert.ToDateTime(values("C5"))
    End Sub
    Protected Sub CancelEditing(ByVal e As CancelEventArgs)
        e.Cancel = True
        gridView.CancelEdit()
    End Sub
    Public Class GridDataItem
        Public Property ID() As Integer
        Public Property C1() As Integer
        Public Property C2() As Double
        Public Property C3() As String
        Public Property C4() As Boolean
        Public Property C5() As Date
    End Class
    #End Region

End Class

DevExpress Support Team

last modified 3 years ago

Modified: December 20, 2021 8:08 PM

Platform: ASP.NET Web Forms

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.