Current filter:
                                You should refresh the page.
                                Support Center

                                ASPxGridView - How to apply jQuery selectors to DataCells' content

                                0

                                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.

                                • Suraj Babu 09.06.2012

                                  Thank You Very Much. I was facing same problem and it got resolved.

                                You must  log in  or  register  to leave comments
                                Select file
                                • Default.aspx
                                • SelectorStyles.css
                                Select language
                                • C#
                                • VB.NET
                                Select version
                                • v2013 vol 1.4 - v2013 vol 2.9
                                • v2011 vol 1.4 - v2012 vol 2.16
                                <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
                                <%@ Register Assembly="DevExpress.Web.v11.1, Version=11.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
                                    Namespace="DevExpress.Web.ASPxPopupControl" TagPrefix="dx" %>
                                <%@ Register Assembly="DevExpress.Web.ASPxGridView.v11.1, Version=11.1.4.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
                                    Namespace="DevExpress.Web.ASPxGridView" 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>
                                    <link rel="Stylesheet" type="text/css" href="Styles/SelectorStyles.css" />
                                    <script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
                                    <script type="text/javascript">
                                        function OnInit(s, e) {
                                            AttachSelectors();
                                        }
                                        function OnEndCallback(s, e) {
                                            AttachSelectors();
                                        }
                                        function AttachSelectors() {
                                            //http://api.jquery.com/hover/
                                            $(".container").hover(
                                                //handlerIn
                                                function() {
                                                    $(this).css("border", "dashed 2px #000000");
                                                    $(this).animate({ opacity: 0.1 }, 500);
                                                    
                                                    popup.SetContentHtml($(this).html());
                                                    popup.ShowAtElement($(this)[0]);
                                                },
                                                //handlerOut
                                                function() {
                                                    $(this).css("border", "solid 2px #000000");
                                                    $(this).animate({ opacity: 1.0 }, 500);
                                                    popup.Hide();
                                                }
                                            );
                                        }
                                    </script>
                                </head>
                                <body>
                                    <form id="mainForm" runat="server">
                                    <div>
                                        <b>Hover the "Description" field DataCell to invoke jQuery animation effects</b>
                                        <br />
                                        <br />
                                        <dx:ASPxGridView ID="gv" runat="server" AutoGenerateColumns="False" DataSourceID="ds"
                                            KeyFieldName="CategoryID">
                                            <Columns>
                                                <dx:GridViewDataTextColumn FieldName="CategoryID" ReadOnly="True" VisibleIndex="0">
                                                    <EditFormSettings Visible="False" />
                                                </dx:GridViewDataTextColumn>
                                                <dx:GridViewDataTextColumn FieldName="CategoryName" VisibleIndex="1">
                                                </dx:GridViewDataTextColumn>
                                                <dx:GridViewDataTextColumn FieldName="Description" VisibleIndex="2">
                                                    <DataItemTemplate>
                                                        <div class="container">
                                                            <%#Eval("Description")%>
                                                        </div>
                                                    </DataItemTemplate>
                                                </dx:GridViewDataTextColumn>
                                            </Columns>
                                            <ClientSideEvents Init="OnInit" EndCallback="OnEndCallback" />
                                        </dx:ASPxGridView>
                                    </div>
                                    <dx:ASPxPopupControl ID="popupControl" runat="server" ClientInstanceName="popup"
                                        CloseAction="CloseButton" HeaderText="Description" PopupHorizontalAlign="OutsideRight"
                                        RenderMode="Lightweight">
                                    </dx:ASPxPopupControl>
                                    <asp:AccessDataSource ID="ds" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT [CategoryID], [CategoryName], [Description] FROM [Categories]">
                                    </asp:AccessDataSource>
                                    </form>
                                </body>
                                </html>

                                To start a chat you should create a support ticket


                                If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

                                FOLLOW US

                                DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, Silverlight, ASP.NET, WinForms, HTML5 or Windows 8, DevExpress tools help you build and deliver your best in the shortest time possible.

                                Copyright © 1998-2014 Developer Express Inc.
                                All trademarks or registered trademarks are property of their respective owners