determine which tab clicked in DevExpress Pagecontrol at clientside

Question

Using the DevExpress ASPXTabControl, How do i determine which Tab has been clicked with Javascript on Client Side.

I've got multiple tabs, each containing a callback panels which loads data. This is all working however when any tab is clicked all data is loaded.

I'd like to determine which tab was clicked and only PerformCallback on the related callbackpanel.

Answer 1

As far as I understand, you have a layout when a CallbackPanel is residing inside a TabPage. If so, your task can be implemented using the following approach:

1) set the ClientInstanceName property of every ASPxCallbackPanel as follows:

"callBackPanel_" + Tab.Index.ToString();

I.e. the ClientInstanceName of every CallbackPanel depends upon the tab it is residing in.

2) handle the ASPxPageControl's ActiveTabChanged client side event as shown below:

var panel = eval("callBackPanel_" + e.tab.index.toString());
panel.PerformCallback("parameter");

Also, I suggest that you take a look at the How to create and load an active tab's content on a callback

Answer 2

Write ClientSideEvent for AspxpageControl

<ClientSideEvents EndCallback="
   function (s, e) {
    var tab = s.GetActiveTabIndex();
    switch (tab) {
        case 0:
            Page1Callback.PerformCallback();
            break;
        case 1:
            Page2Callback.PerformCallback();
            break;
        case 2:
            Page3Callback.PerformCallback();
            break;...

    }
}" />

</dx:ASPxPageControl>

this will load data on each tab when it is click for first time and after that Tab mode will on client Mode