Current filter:
                                You should refresh the page.
                                  • This KB Article has detailed instructions on how to use the jQuery/jQuery UI with DevExpress ASP.NET controls.
                                    If you have any non-described/specific issue related to this subject, please create a corresponding ticket in our Support Center.
                                    We will do our best to provide you with an appropriate solution and update the listed cases.

                                1 Solution

                                Creation Date Importance Sort by

                                1. Accessing a programmatic object on the client side

                                Our ASP.NET controls offer a special technique to manipulate them on the client side.
                                To enable the corresponding client-side programmatic object, specify the ClientInstanceName property of the required control.

                                The list of the available client-side members is available via the type definition named starting with "ASPxClient" prefix:
                                The ASPxClientGridView type for the ASPxGridView type, and so on:
                                Refer to the Client-Side Functionality Overview help topic for more information.

                                To get direct access to the client-side programmatic object in the global context, use a value of the ClientInstanceName (in WebForms) and Name (in MVC) properties rather than jQuery selectors, especially the ID Selector:

                                WebForms:

                                [ASPx]
                                <dx:ASPxTextBox ID="txtServer" ... ClientInstanceName="txtClient"> </dx:ASPxTextBox>


                                MVC:

                                [C#]
                                @Html.DevExpress().TextBox(settings => { settings.Name = "txtClient"; }).GetHtml()


                                Issue:

                                [JavaScript]
                                //var text = $("#txtServer").GetText();


                                Solution:

                                [JavaScript]
                                var text = txtClient.GetText();


                                2. Using the jQuery document.ready event handler

                                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 employed for handling the state when DOM is fully loaded.

                                When using DevExpress ASP.NET Controls, it is recommended to handle the events mentioned below rather than use the jQuery $(document).ready event handler:

                                - The client-side ASPxClientControl.Init event of the required DevExpress ASP.NET control to ensure that a corresponding client-side control's programmatic object is initialized;
                                - The client-side ASPxClientGlobalEvents.ControlsInitialized event that is raised after client object models of all DevExpress web controls contained within the page have been initialized.

                                The E3325: ASPxTextBox - How to attach the jQuery AutoComplete plugin Code Central example illustrates this technique in action:


                                Issue:

                                [JavaScript]
                                /* $(function() { txt.SetText('...'); }); */


                                Solution:

                                Control Events:

                                WebForms:

                                [ASPx]
                                <dx:ASPxTextBox ID="textBox" runat="server" ...> <ClientSideEvents Init="OnTextBoxInit" /> </dx:ASPxTextBox>

                                MVC:

                                [C#]
                                @Html.DevExpress().TextBox(settings => { ... settings.Properties.ClientSideEvents.Init = "OnTextBoxInit"; }).GetHtml()

                                [JavaScript]
                                function OnTextBoxInit(s, e) { s.SetText('...'); }


                                Global Events:

                                WebForms:

                                [ASPx]
                                <dx:ASPxTextBox ID="textBox" runat="server" ClientInstanceName="txt" ...> </dx:ASPxTextBox>

                                [ASPx]
                                <dx:ASPxGlobalEvents ID="globalEvents" runat="server"> <ClientSideEvents ControlsInitialized="OnControlsInitialized" /> </dx:ASPxGlobalEvents>

                                [JavaScript]
                                function OnControlsInitialized(s, e) { txt.SetText('...'); }


                                MVC:

                                [C#]
                                @Html.DevExpress().TextBox(settings => { settings.Name = "txt"; }).GetHtml()

                                 

                                [JavaScript]
                                MVCxClientGlobalEvents.AddControlsInitializedEventHandler(function (s, e) { txt.SetText('...'); });


                                3. Applying jQuery selectors / effects to elements inside an AJAX updateable container (ASPxGridView, ASPxTreeList, etc.)

                                When some jQuery selectors are attached to the HTML content inside an AJAX updateable container (for example, 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).

                                To avoid this issue, perform the following steps:

                                - Handle the client-side ASPxClientGridView.Init (ASPxClientControl.Init) event instead of using the jQuery $(document).ready function and map the required jQuery CSS selectors to ASPxGridView's HTML elements;

                                - Handle the client-side ASPxClientGridView.EndCallback event and restore the same jQuery CSS selectors: map them to just updated ASPxGridView's HTML elements.

                                The E3324: ASPxGridView - How to apply jQuery selectors to DataCells' content Code Central example illustrates this technique in action:

                                WebForms:

                                [ASPx]
                                <dx:ASPxGridView ...> ... <ClientSideEvents Init="OnInit" EndCallback="OnEndCallback" /> </dx:ASPxGridView>

                                MVC:

                                [C#]
                                @Html.DevExpress().GridView(settings => { ... settings.ClientSideEvents.Init = "OnInit"; settings.ClientSideEvents.EndCallback = "OnEndCallback"; }).GetHtml()

                                [JavaScript]
                                function OnInit(s, e) { AttachSelectors(); } function OnEndCallback(s, e) { AttachSelectors(); } function AttachSelectors() { ... }


                                4. HTML elements traversing / Finding DOM objects

                                Our ASP.NET controls produce a set of HTML elements with a specific structure in a document hierarchy.
                                We provide special client-side methods and suggest using them rather than jQuery selectors to manipulate these elements:

                                - Use the client-side ASPxClientControl.GetMainElement method to get a root HTML element of a corresponding control.

                                - Use the client-side ASPxClientEdit.GetInputElement method to get an input element of a corresponding control.

                                The E3325: ASPxTextBox - How to attach the jQuery AutoComplete plugin Code Central example illustrates this technique in action:

                                - Apply the jQuery UI Autocomplete Widget to the input element of the ASPxTextBox control (the demonstration of the ASPxClientEdit.GetInputElement method);

                                - Align the widget’s popup element with the main element of the ASPxTextBox control (the demonstration of the ASPxClientControl.GetMainElement method).

                                WebForms:

                                [ASPx]
                                <dx:ASPxTextBox ID="textBox" runat="server" ...> <ClientSideEvents Init="OnTextBoxInit" /> </dx:ASPxTextBox>

                                MVC:

                                [C#]
                                @Html.DevExpress().TextBox(settings => { ... settings.Properties.ClientSideEvents.Init = "OnTextBoxInit"; }).GetHtml()

                                [JavaScript]
                                var availableTags = [...]; function OnTextBoxInit(s, e) { $(s.GetInputElement()).autocomplete({ source: availableTags, position: { my: "left top", at: "left bottom", of: s.GetMainElement() } }); }


                                5. Using default jQuery CSS rules

                                UI widgets are distributed with the *.css file with default/pre-defined CSS rules. Usually a name of this *.css file is “jQuery-UI-X.css” (where “X” is the jQuery UI version). This file contains a set of CSS rules that affect all input elements inside widgets.
                                Exclude the following CSS rule to avoid applying the default CSS rules for all input elements inside widgets:

                                jQuery-UI-X.css:


                                Issue:

                                [CSS]
                                /*Component containers*/ /*...*/


                                Solution:

                                [CSS]
                                /* ... .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana, Arial, Sans-Serif; font-size: 1em; } ... */


                                6. Adjusting appearance on the client side

                                When applying any jQuery UI plugin to a container with our controls, and transforming the specified HTML markup for the plugin’s layout, the layout of our controls can be corrupted.
                                Our controls offer a special API to adjust their dimensions explicitly on the client side and correctly display them.

                                Use the:

                                1) ASPxClientControl.AdjustControl method to adjust a specific DevExpress ASP.NET control on a page;

                                2) static ASPxClientControl.AdjustControls method to adjust all DevExpress ASP.NET controls on the page;

                                3) static ASPxClientControl.AdjustControls(object container) method to adjust all DevExpress ASP.NET controls inside the specified container.

                                These methods can be useful when the visibility and layout of the container is dynamically changed on the client side (for instance, a container DIV element's DISPLAY attribute changes from NONE to an empty string), and it is required to recalculate the size of controls:

                                WebForms:

                                [ASPx]
                                <div id="tabs"> <ul> <li><a href="#tabDX">DX</a></li> </ul> <div id="tabDX"> <dx:ASPxPanel ID="panel" runat="server" ClientInstanceName="pn"> <Border BorderColor="Black" BorderStyle="Solid" BorderWidth="1px" /> <PanelCollection> <dx:PanelContent runat="server"> <dx:ASPxDateEdit ID="de" runat="server"> </dx:ASPxDateEdit> </dx:PanelContent> </PanelCollection> </dx:ASPxPanel> </div> </div>

                                MVC:

                                [C#]
                                <div id="tabs"> <ul> <li><a href="#tabDX">DX</a></li> </ul> <div id="tabDX"> @Html.DevExpress().Panel(settingsPanel => { settingsPanel.Name = "pn"; settingsPanel.ControlStyle.Border.BorderColor = System.Drawing.Color.Black; settingsPanel.ControlStyle.Border.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid; settingsPanel.ControlStyle.Border.BorderWidth = System.Web.UI.WebControls.Unit.Pixel(1); settingsPanel.SetContent(() => { Html.DevExpress().DateEdit(settingsDateEdit => { settingsDateEdit.Name = "de"; }).Render(); }); }).GetHtml() </div> </div>

                                [JavaScript]
                                $(function() { $("#tabs").tabs(); AdjustDXControls(); }); function AdjustDXControls() { //1 pn.AdjustControl(); //2 ASPxClientControl.AdjustControls(); //3 ASPxClientControl.AdjustControls(pn.GetMainElement()); }


                                7. Using AJAX-based plugins

                                There is an issue when using our controls within jQuery ajax-based plugins:
                                When these plugins operate containers, they cause multiple evaluating of all script blocks (including our client-side programmatic objects) inside these containers. As a result, the client-side functionality of our controls can be broken.

                                We have discussed this issue in greater detail in the following Support Center reports:
                                B144365: ASPxEditors Controls stop working when used with the jQuery UI Dialog
                                B142903: ASPxGridView - Problem with the jQuery Sortable plugin

                                To prevent our script blocks from multiple evaluating, it is necessary to include a small script patch (well-known in our base as the "PatchJQuery" script) in either of the following places:
                                - The end of the main jQuery script file;
                                - After applying the corresponding jQuery UI plugin.

                                The E3836: How to use ASPxGridView with the jQuery UI Sortable plugin Code Central example illustrates this technique in action.
                                In this example, a correction/patch script is placed into a separate "ApplyFix.js" file for demonstration purpose:

                                 

                                [JavaScript]
                                var isDXScript = function(script) { return script && script.id && script.id.indexOf("dx") === 0; } if ($.clean) { var originalClean = $.clean; $.clean = function(elems, context, fragment, scripts) { var execResult = originalClean.call($, elems, context, fragment, scripts); if (scripts && scripts.length) { for (var i = scripts.length - 1; i >= 0; i--) { if (isDXScript(scripts[i])) scripts.splice(i, 1); } } return execResult; }; }

                                If possible, we suggest that you replace the problematic jQuert UI widget with a corresponding DevExpress navigation/layout control (the ASPxDocking Suite in this case) to avoid such an issue.

                                P.S.

                                We have presented the following webinars about mastering ASP.NET applications with the use of DevExpress ASP.NET AJAX controls together with the jQuery and jQuery UI libraries:
                                Julian on JavaScript: Using jQuery with DevExpress ASP.NET Controls (Part 1)
                                Julian on JavaScript: Using jQuery with DevExpress ASP.NET Controls (Part 2)

                                The following blogs summarize information about presented samples:
                                Webinar wrap-up: Julian on JavaScript–using jQuery with DevExpress ASP.NET controls

                                See Also:
                                Frequently Asked Questions (FAQ) for the ASP.NET Product Line

                                Show all comments
                                • Hector Badillo 08.07.2013

                                  Excellent tutorial!

                                • Mohammad Farahani 02.04.2015

                                  i need to add jquery library to XAF
                                  no MVC or webform

                                • Dennis (DevExpress Support) 02.04.2015
                                  @Mohammad: I've already answered you on how to do this in your original ticket. Please use that ticket for further correspondence on the subject. Thanks.
                                • Dev Kosty 1 06.12.2015

                                  Is this still the go to resource for this jQuery integration stuff? I ask because it's dated 4 years ago... both DevEx and jQuery have grown a little in MVC-land since then ;)

                                • Mike (DevExpress Support) 06.15.2015

                                  Hello,

                                  To process your recent post more efficiently, I created a separate ticket on your behalf: T255297: jQuery and DevExpress MVC integration. This ticket is currently in our processing queue. Our team will address it as soon as we have any updates.

                                • john rohner 09.30.2016
                                  DevEx goes to lengths to avoid saying that you can use this jquery to access values:

                                  $('#cboName input').val()

                                  instead of cboName.GetValue();

                                • Vladimir (DevExpress Support) 10.03.2016

                                  Hello,

                                  While this approach can work in the case of simple components, it won't operate correctly in the case of more complex components such as ASPxComboBox or ASPxGridLookup. So, we still recommend using the public client-side API of our controls to manage them on the client.

                                • Kevin Sermijn 02.02.2017
                                  How do you escape special characters in a name 

                                  normal jquery this works.

                                  var nr = ....;

                                  $("#Input\\.Secundairen\\[" + nr + "\\]\\.S_Nominaal_Sec_I").val(...);

                                  Devexpress....

                                  Input.Secundairen[" + nr + "].S_Nominaal_Sec_I.GetValue();

                                  does not work.

                                • Vladimir (DevExpress Support) 02.03.2017

                                  Hello,

                                  I've created a separate ticket on your behalf (T479018: How to get an element, if a DevExpress MVC extension contains special symbols). It has been placed in our processing queue and will be answered shortly.