Skip to main content
All docs
V21.2

Update a Control in a Callback of Another Control (Workarounds)

  • 5 minutes to read

A control can update only its own rendering in a callback. When you try to update a control (for instance, change settings or bind it to data) on a callback request of another control, these changes are not applied on the client. In such cases, use one of the workarounds listed below.

Update a Control When a Callback of Another Control Is Finished

Every control that supports callbacks implements the BeginCallback and EndCallback client events. Handle the EndCallback event to perform custom actions with another control when a callback is finished. Use an event argument’s command property to determine the action that initiated the callback.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="Id" ClientInstanceName="mainGrid" DataSourceID="mainSource">
    <SettingsDetail ShowDetailRow="true" />
    <Templates>
        <DetailRow>
            <dx:ASPxGridView ID="gridProducts" ClientInstanceName="gridProducts" runat="server"
                DataSourceID="productSource" KeyFieldName="Id">
                    <ClientSideEvents EndCallback="OnEndCallback" BeginCallback="OnBeginCallback"/>
            </dx:ASPxGridView>
        </DetailRow>
    </Templates>
</dx:ASPxGridView>
function OnBeginCallback(s, e) {
    command = e.command;
}
function OnEndCallback(s, e) {
    if ((command == "ADDNEWROW" || command == "UPDATEEDIT")) {
        mainGrid.Refresh();
    }
}

View Example: ASPxGridView - How to refresh a master grid when a detail grid has been updated

You can use the JSProperties property to send information from the server to the client for further use in client event handlers.

The example below demonstrates how to save an updated row’s key to the JSProperties property on the server and then use it on the client to display information about the updated row.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" DataSourceID="AccessDataSource1"
    KeyFieldName="CategoryID" OnRowUpdated="ASPxGridView1_RowUpdated">
    <ClientSideEvents EndCallback="OnEndCallBack" />
</dx:ASPxGridView>

<dx:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="clientLabel" />
protected void Page_Load(object sender, EventArgs e) {
    ASPxGridView1.JSProperties["cpIsUpdated"] = "";
}
protected void ASPxGridView1_RowUpdated(object sender, DevExpress.Web.Data.ASPxDataUpdatedEventArgs e) {
    if (e.Exception == null) {
        ((ASPxGridView)sender).JSProperties["cpIsUpdated"] = e.Keys[0];
    }
}
function OnEndCallBack(s, e) {
    if (s.cpIsUpdated != '') {
        clientLabel.SetText('The category ' + s.cpIsUpdated + ' is updated successfully');
    }
    else {
        clientLabel.SetText('');
    }
}

View Example: ASPxGridView - How to update an external control during a callback

View Example: How to show the alert message if editing is not allowed

View Example: ASPxGridView - How to refresh a master grid when a detail grid has been updated

The JSProperties property allows you to pass values of the following types: null, DBNull, ValueType, string, IDictionary, and IEnumerable. For more information, see the following topic: Passing Values Between Client and Server Sides.

The example below demonstrates how to create an array of second-level node keys on the server and send it to the client in the JSProperties property.

<dx:ASPxTreeList ID="treeList" runat="server" AutoGenerateColumns="False" ClientInstanceName="treeList"
    DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID" ParentFieldName="ReportsTo" 
    OnDataBound="treeList_DataBound">
    <Columns>
        <dx:TreeListTextColumn FieldName="LastName" VisibleIndex="0" />
    </Columns>
    <ClientSideEvents NodeClick="function(s, e) {
        if((s.cp_level2Nodeslist).indexOf(e.nodeKey)&gt; -1)
        window.location.href ='Default2.aspx?id='+e.nodeKey;
    }" />
    <SettingsBehavior AutoExpandAllNodes="True" />
</dx:ASPxTreeList>
protected void treeList_DataBound(object sender, EventArgs e) {
    ArrayList level2Nodes = new ArrayList();
    TreeListNodeIterator iterator = new TreeListNodeIterator(treeList.RootNode);
    while (iterator.Current != null) {
        if (iterator.Current != treeList.RootNode)
            if (iterator.Current.Level == 2)
                level2Nodes.Add(iterator.Current.Key);
        iterator.GetNext();
    }
    treeList.JSProperties.Add("cp_level2Nodeslist", level2Nodes);
}

View Example: ASPxTreeList: How to Get Node Level on Client-Side Events

View Example: How to show the Deleting Confirmation box after performing some server-side actions

Update Multiple Controls Nested into an ASPxCallbackPanel

The ASPxCallbackPanel control is a container area that allows you to dynamically update its content via callbacks. Call the PerformCallback(parameter) client method to initiate an update callback.

In the example below, two ASPxGridView controls are placed into an ASPxCallbackPanel. The buttons initiate the panel’s callback that updates both grids.

<dx:ASPxCallbackPanel ID="cp" runat="server" ClientInstanceName="cp" OnCallback="cp_Callback">
    <PanelCollection>
        <dx:PanelContent runat="server">
            <dx:ASPxGridView ID="gv1" runat="server" DataSourceID="ads1" KeyFieldName="CategoryID" />
            <dx:ASPxGridView ID="gv2" runat="server" DataSourceID="ads2" KeyFieldName="ProductID" />
        </dx:PanelContent>
    </PanelCollection>
</dx:ASPxCallbackPanel>
<dx:ASPxButton ID="updateBtn" runat="server" Text="Update" AutoPostBack="false">
    <ClientSideEvents Click="OnUpdateClick" />
</dx:ASPxButton>
<dx:ASPxButton ID="cancelBtn" runat="server" Text="Cancel" AutoPostBack="false">
    <ClientSideEvents Click="OnCancelClick" />
</dx:ASPxButton>
function OnUpdateClick(s, e) { cp.PerformCallback("Update"); }
function OnCancelClick(s, e) { cp.PerformCallback("Cancel"); }
protected void cp_Callback(object sender, CallbackEventArgsBase e) {
    switch (e.Parameter) {
        case "Update":
            gv1.UpdateEdit();
            gv2.UpdateEdit();
            break;
        case "Cancel":
            gv1.CancelEdit();
            gv2.CancelEdit();
            break;
    }
}

Run Demo: Callback Panel - Example View Example: How to update multiple ASPxGridViews with one button and hide default update/cancel links

Use the Equivalent Client API

In many cases, DevExpress ASP.NET controls allow you to replace server-side code with its client-side equivalent.

The example below demonstrates how to use client API to obtain the ProductName field value from a grid control’s focused row and then display a lable for that value. The processOnServer property is set to false to prevent a postback to the server.

function OnGridFocusedRowChanged(s, e) {
    grid.GetRowValues(grid.GetFocusedRowIndex(), 'ProductName', function (value) { lbl.SetText(value) });
    e.processOnServer = false;
}
<dx:ASPxLabel ID="ASPxLabel1" runat="server" ClientInstanceName="lbl" />
<dx:ASPxGridView ID="Grid" runat="server" DataSourceID="ProductsDataSource" Width="100%" 
    ClientInstanceName="grid" SettingsBehavior-AllowFocusedRow="true">
    <ClientSideEvents FocusedRowChanged="OnGridFocusedRowChanged" />
    <Columns>
        <dx:GridViewDataTextColumn FieldName="ProductName" />
        <%-- other columns --%>
    </Columns>
</dx:ASPxGridView>  

Run Demo: Grid - Using Checkboxes

Enable Postbacks

Set the EnableCallBacks property to false to turn off callbacks.

<dx:ASPxGridView ID="ASPxGridView1" runat="server" EnableCallBacks="false" />

In this case, the control initiates postbacks instead of callbacks. When an entire page is refreshed, you can update every control. To refresh only a part of the page, wrap the controls in the asp:UpdatePanel.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
<asp:UpdatePanel ID="UpdatePanel1" runat="server">  
    <ContentTemplate>  
        <dx:ASPxGridView ID="ASPxGridView1" runat="server" EnableCallBacks="false" />
        // ...
    </ContentTemplate>  
</asp:UpdatePanel>  

Run Demo: Grid - MS Update Panel View Example: FocusedRowChanged event and AJAX UpdatePanel View Example: How to change the ASPxFilterControl filter expression via UpdatePanel asynchronous postback View Example: How to reorder ASPxNavBar groups