ASPxGridView - How to apply jQuery selectors to DataCells' content

This example is an illustration of the K18561: Using jQuery / jQuery UI libraries with DevExpress ASP.NET Controls / MVC Extensions KB Article. Refer to the Article for an explanation.

This example illustrates how to attach jQuery selectors to ASPxGridView DataCells' content and keep selectors' functionality after grid's rendering is completely updated via a callback.

Usually when it is necessary to attach jQuery selectors to any existing HTML content, it is recommended to use the $(document).ready function that can be used for handling the state when the DOM is fully loaded. When some jQuery selectors are attached to the HTML content inside ASPxGridView, these selectors are stopped after the grid's rendering is completely updated via a callback (and the entire grid's HTML content is re-created on the client side). It is necessary to execute the required jQuery selectors explicitely by handling the client-side ASPxClientGridView.EndCallback event that is raised on the client side after a callback's server-side processing has been completed. It is also recommended to handle the client-side ASPxClientControl.Init (ASPxClientGridView.Init) event (rather than the use of the jQuery $(document).ready function) to enure that the corresponding client-side control's programmatic object is initialized.

Refer to the Client-Side Functionality Overview topic in our documentation to learn more about the common concepts of the client-side API of the DevExpress ASP.NET Controls.