DevExpress Grid加载及分页切换触发事件咨询

Hey there! I see you've already got the DOM modification code working on page load, but need to trigger it both when the grid first finishes loading AND after switching pages (since DevExpress uses AJAX callbacks for pagination, your initial $(document).ready code won't catch the new rows loaded after pagination).

The Right Event to Use: EndCallback #

For DevExpress ASPxGridView (WebForms) or MVC GridView, the EndCallback client-side event is perfect here. It fires every time a grid callback completes—this includes:

• Initial grid load
• Pagination (page switches)
• Sorting, filtering, or any other AJAX-based grid action

This means your column modification code will run every time the grid updates its DOM, which is exactly what you need.

Step 1: Register the Client Event #

First, hook up the EndCallback event to your grid:

For WebForms (ASPX Markup):

<dx:ASPxGridView ID="YourGridViewID" runat="server" ...>
    <!-- Your grid configuration (columns, data source, etc.) -->
    <ClientSideEvents EndCallback="OnGridEndCallback" />
</dx:ASPxGridView>

For MVC (Razor View):

@Html.DevExpress().GridView(settings => {
    settings.Name = "YourGridViewName";
    // Your grid configuration (columns, binding, etc.)
    settings.ClientSideEvents.EndCallback = "OnGridEndCallback";
}).Bind(Model).GetHtml()

Step 2: Update Your DOM Modification Code #

Move your existing logic into the OnGridEndCallback function, with a couple of key improvements to avoid issues:

function OnGridEndCallback(s, e) {
    // Get all target column elements
    var columnElements = document.getElementsByClassName('cssForColumn dxgv');
    
    // Use a standard for loop instead of for...in (avoids iterating over HTMLCollection properties)
    for (var i = 0; i < columnElements.length; i++) {
        var $item = $(columnElements[i]);
        
        // Prevent duplicate wrapping (in case the event fires multiple times)
        if (!$item.find('.documentColumn').length) {
            $item.wrapInner("<div class='documentColumn'></div>");
        }
    }
}

Key Notes: #

1. Why not $(document).ready alone?
   When you switch pages, DevExpress loads new rows via AJAX without reloading the entire page. Your initial ready code only runs once, so it won't process the new DOM elements added after pagination. EndCallback ensures the code runs every time the grid updates.

2. Avoid for...in for HTMLCollections
   getElementsByClassName returns an HTMLCollection, and for...in will loop through properties like length and item along with your elements. A standard for loop or for...of is safer here.

3. Prevent duplicate wrapping
   Adding the check !$item.find('.documentColumn').length ensures you don't nest multiple documentColumn divs if the event fires more than once (e.g., after sorting and then pagination).

内容的提问来源于stack exchange，提问作者Kar