Odwołanie się do kontrolki DevExpress za pomocą javascript

Jednym z ważnych aspektów pisania efektywnego i przyjaznego dla użytkownika kodu aplikacji webowych, jest umiejętne wykorzystywanie języka javascript umieszczonego w przeglądarce. Aby efektywnie korzystać z tego języka, należy umieć odwoływać się do obiektów.
Standardowo, w języku javascript do obiektów dokumentu odwołujemy się poprzez metodę 'document.getElementById()':

<dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" Text="Get text">
</dx:ASPxButton>

<script type="text/javascript" >
     var editorClientId = "<%=ASPxButton1.ClientID%>";
     var editor = document.getElementById(editorClientId);
     //Do something
</script>

Niestety, ale taka, standardowa dla języka javascript opcja, w przypadku kontrolek DevExpressa nie zadziała. W przypadku kontrolek DevExpressa, aby odwołać się do naszych kontrolek w języku javascript mamy dwie możliwości:

a) nadać kontrolce sztywne 'client id', tak jak zostało to opisane w tej odpowiedzi supportu.. Niestety takie rozwiązanie ogranicza nas do jednej instancji tej kontrolki na stronie:

<dx:ASPxPopupControl ID="ASPxPopupControl1" runat="server" ClientInstanceName="popupControl" ></dx:ASPxPopupControl>

 <script type="text/javascript" >
  popupControl.Show();
 </script>

b) wykorzystać metodę 'ASPxClientControl.GetControlCollection().GetByName()', która jest DevExpressowym odpowiednikiem 'document.getElementById()'. Sposobów jak to zrobić jest kilka. Jeden z nich umieszczony został w dokumentacji. Inny przykład:

        <dx:ASPxGridView ID="grid" runat="server" CssClass="gridRelatedDocs" AutoGenerateColumns="False" Width="100%"
        GridLines="None" style="padding-left: 0px;padding-right: 0px;">
            <Border BorderStyle="None" BorderWidth="0px" />
            <SettingsBehavior AllowDragDrop="False" />
            <Settings ShowFilterRow="True" />
            <SettingsPager >
                <Summary Visible="False" />
            </SettingsPager>
        </dx:ASPxGridView>

<script language="javascript" type="text/javascript">
    function DoSomething() {

        var grid2 = $('.gridRelatedDocs');
        if (grid2 != null && grid2[0] != null) {
            var grid = ASPxClientControl.GetControlCollection().GetByName(grid2[0].id);
            //grid.DoSomething
        }
    }
 </script>

Generalnie sposób nr. 2 jest bardziej przyjazny i uniwersalny. Wprawdzie najpierw musimy ustalić id elementu w hierarchii struktury drzewa DOM, ale posiadając już standardowy, 'javascriptowe' id obiektu możemy się nim posługiwać w standardowy sposób. Wykorzystanie rozwiązania z 'ASPxClientControl.GetControlCollection().GetByName'  pozwala na umieszczenie wielu kontrolek tego samego typu na jednej stronie asp.net.