wszystkie wpisy

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>

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>

 

  popupControl.Show();

 

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;”>

           

           

           

           

               

           

        </dx:ASPxGridView>

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.