Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » CallbackPanel, TabStrip, MultiPage and PageView...

CallbackPanel, TabStrip, MultiPage and PageView... Options
Previous Topic · Next Topic
Troy
Posted: Wednesday, July 25, 2007 11:43:53 AM
Rank: Member
Groups: Member

Joined: 5/31/2007
Posts: 13
Hello,

There are two things here:

1. It does not appear that the CallbackPanel is actually doing a partial page update.
2. When clicking on a TabItem in the TabStrip, it does not fire the MultiView.PageSelected event, however, if I programmaticaly selected the tabstrip index (TabStrip.SelectedIndex) it does fire the event.

Here are some code declarations:
Code: HTML/ASPX 
<%@ control language="C#" autoeventwireup="true" codebehind="Setup.ascx.cs" inherits="EdcMembers.Controls.Wizards.Setup" %><%@ register assembly="EasyDailyCash.Validators" namespace="EasyDailyCash.Validators" tagprefix="cc1" %><%@ register assembly="EO.Web" namespace="EO.Web" tagprefix="eo" %><%@ register assembly="SD.LLBLGen.Pro.ORMSupportClasses.NET20" namespace="SD.LLBLGen.Pro.ORMSupportClasses" tagprefix="llblgenpro" %>
<eo:callbackpanel id="CallbackPanel1" runat="server" triggers="{ControlID:_TabStrip;Parameter:}">
<eo:tabstrip id="_TabStrip" runat="server" controlskinid="None" multipageid="_MultiView">
   <topgroup>
      <items>
         <eo:tabitem itemid="_Introduction" pageviewid="_Introduction" text-html="Introduction"></eo:tabitem>
         <eo:tabitem itemid="_Step1" pageviewid="_Step1" text-html="Step 1" raisesserverevent="True"></eo:tabitem>
         <eo:tabitem itemid="_Step2" pageviewid="_Step2" text-html="Step 2"></eo:tabitem>
         <eo:tabitem itemid="_Step3" pageviewid="_Step3" text-html="Step 3"></eo:tabitem>
         <eo:tabitem itemid="_Step4" pageviewid="_Step4" text-html="Step 4"></eo:tabitem>
         <eo:tabitem itemid="_Complete" pageviewid="_Complete" text-html="Setup Complete"></eo:tabitem>
      </items>
   </topgroup>
   <lookitems>
      <eo:tabitem image-backgroundrepeat="RepeatX" image-mode="TextBackground" image-selectedurl="00010225" image-url="00010222" itemid="_Default" lefticon-selectedurl="00010224" lefticon-url="00010221" normalstyle-csstext="color: #606060" righticon-selectedurl="00010226" righticon-url="00010223" selectedstyle-csstext="color: #2f4761; font-weight: bold;">
         <subgroup overlapdepth="8" style-csstext="font-family: tahoma; font-size: 8pt; background-image: url(00010220); background-repeat: repeat-x; cursor: hand;"></subgroup>
      </eo:tabitem>
   </lookitems>
</eo:tabstrip>
<eo:multipage id="_MultiView" runat="server" width="100%" style="border-left:solid 1pt #CCCCCC;border-right:solid 1pt #CCCCCC;border-bottom:solid 1pt #CCCCCC;padding:15px;" onpageselected="_MultiView_PageSelected">
   <eo:pageview id="_Introduction" runat="server" width="100%"></eo:pageview>
   <eo:pageview id="_Step1" runat="server" width="100%" ondatabinding="_Step1_DataBinding" onprerender="_Step1_PreRender">
      <table border="0" cellpadding="4" cellspacing="0" style="text-align: left" width="640">
         <tr>
            <td>
               <img alt="Step 1 - Enter Profile Information" height="24" src="images/header_step_1.gif" width="725" /><br />
               <p>
                  <font color="#000000" face="arial" size="2"><strong><asp:validationsummary id="_ValidationSummary" runat="server" headertext="You have an error:" showmessagebox="True" showsummary="False" validationgroup="Step1" />NOTE: Name, Email and Phone will be displayed on your websites</strong></font></p>
               <table cellpadding="3" cellspacing="0" style="border-right: #999999 1pt solid; border-top: #999999 1pt solid; border-left: #999999 1pt solid; border-bottom: #999999 1pt solid; font-family: Arial, Helvetica, sans-serif; background-color: #ffffff" width="100%">
                  <tr id="_ErrorRow" runat="server" visible="False">
                     <td id="TD1" runat="server" align="center" colspan="2" style="padding-right: 15px; padding-left: 15px; font-size: 12pt; padding-bottom: 15px; color: #ff0000; padding-top: 15px; background-color: yellow" valign="bottom">
                        <asp:literal id="_ErrorMessage" runat="server"></asp:literal>
                     </td>
                  </tr>
                  <tr>
                     <td colspan="2" style="font-weight: bold; border-bottom: #999999 1pt solid; background-color: #dddddd; text-align: center">Please Enter Your Information </td>
                  </tr>
                  <tr>
                     <td class="FormRequiredRight" nowrap="nowrap">Contact Email:</td>
                     <td>
                        <asp:textbox id="_Email" runat="server" validationgroup="Wizard1"></asp:textbox>
                        <asp:requiredfieldvalidator id="_rfEmail" runat="server" controltovalidate="_Email" errormessage="Email is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">First Name:</td>
                     <td>
                        <asp:textbox id="_FirstName" runat="server"></asp:textbox>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" controltovalidate="_FirstName" errormessage="First Name is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">Last Name:</td>
                     <td>
                        <asp:textbox id="_LastName" runat="server"></asp:textbox>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" controltovalidate="_LastName" errormessage="Last Name is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">Address:</td>
                     <td>
                        <asp:textbox id="_Address" runat="server"></asp:textbox>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator3" runat="server" controltovalidate="_Address" errormessage="Address is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">Address2:</td>
                     <td>
                        <asp:textbox id="_Address2" runat="server"></asp:textbox>
                     </td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">City:</td>
                     <td>
                        <asp:textbox id="_City" runat="server"></asp:textbox>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator5" runat="server" controltovalidate="_City" errormessage="City is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">Zip:</td>
                     <td>
                        <asp:textbox id="_ZipCode" runat="server"></asp:textbox>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator6" runat="server" controltovalidate="_ZipCode" errormessage="Zip Code is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">State:</td>
                     <td nowrap="nowrap">
                        <asp:dropdownlist id="_State" runat="server" datatextfield="StateName" datavaluefield="ID"></asp:dropdownlist>
                         <label for="textfield">Other:</label>
                        <asp:textbox id="_OtherState" runat="server"></asp:textbox></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">Country:</td>
                     <td>
                        <asp:dropdownlist id="_Country" runat="server" datatextfield="PrintableName" datavaluefield="ID"></asp:dropdownlist>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator8" runat="server" controltovalidate="_Country" errormessage="Country is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
                  <tr style="font-size: 12pt">
                     <td class="FormRequiredRight">Phone:</td>
                     <td>
                        <asp:textbox id="_Phone" runat="server"></asp:textbox>
                        <asp:requiredfieldvalidator id="RequiredFieldValidator7" runat="server" controltovalidate="_Phone" errormessage="Phone is Required" font-bold="True" font-size="16pt" text="«" validationgroup="Step1"></asp:requiredfieldvalidator></td>
                  </tr>
               </table>
               <asp:hiddenfield id="_Uid" runat="server" /><asp:hiddenfield id="_CurrentEmail" runat="server" />  </td>
         </tr>
      </table>
      <asp:button id="Button1" runat="server" onclick="Button1_Click" text="Button" causesvalidation="true" validationgroup="Step1" /></eo:pageview>
   <eo:pageview id="_Step2" runat="server" width="100%" onprerender="_Step2_PreRender"></eo:pageview>
   <eo:pageview id="_Step3" runat="server" width="100%"></eo:pageview>
   <eo:pageview id="_Step4" runat="server" width="100%"></eo:pageview>
   <eo:pageview id="_Complete" runat="server" width="100%"></eo:pageview>
</eo:multipage>
</eo:callbackpanel>
     


I even tried to Set the RaisesServerSideEvent = true on the individual TabStipItems... That did not work either.

So, here are my questions:

1. How can I get this configuration to actually do partial page updates?

2. How can I get the TabStrip to fire the MultiView.PageSelected event when a user clicks on a tab?
Back to top
 
eo_support
Posted: Wednesday, July 25, 2007 11:50:43 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,301
Hi,

Thanks for posting your question here. I believe the root of both problems is that you did not set the TabStrip's RaisesServerEvent to true. The default value is false, in which case the TabStrip does everything on the client side and nothing goes back to the server at all. So obviously in this case no server side event handler will ever be called.

Try to set the TabStrip's RaisesServerEvent to true and both should work.

Thanks
Back to top
 
Troy
Posted: Wednesday, July 25, 2007 12:21:35 PM
Rank: Member
Groups: Member

Joined: 5/31/2007
Posts: 13
eo_support wrote:
Hi,

Thanks for posting your question here. I believe the root of both problems is that you did not set the TabStrip's RaisesServerEvent to true. The default value is false, in which case the TabStrip does everything on the client side and nothing goes back to the server at all. So obviously in this case no server side event handler will ever be called.

Try to set the TabStrip's RaisesServerEvent to true and both should work.

Thanks


Thanks for the quick response. Okay, you solution indeed fixed Question #2, which the MultiView.PageSelected event now fires.

However, the CallbackPanel is still not work, as I still get a Page_Load event firing every time I click a different tab.

Couple things to note: this combination is actually in a UserControl which is added to the Default.aspx page... I wanted the callback, because I am trying to dynamically load the user control into the page, and do not want the page to reload until I tell it to do so since the control is dynamic injected.

Can you use a CallbackPanel in a User Control?
Back to top
 
eo_support
Posted: Wednesday, July 25, 2007 12:48:44 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,301
Hi,

An AJAX callback always calls Page_Load. Page_Load is an integrated step of your page's life cycle and it's neither possible nor correct to skip it and calls other code in the page.

What special about an AJAX callback is, it does not update the entire page. The whole flow is like this:

1. You trigger an AJAX callback on the client side (for example, by clicking the TabStrip);
2. The whole page is being posted back to the server as if a normal postback. However this postback is done on the background so your current page stays in your browser;
3. The server side executes the whole page life cycle and generates page output as if it is a normal post back. In fact, your server code may not even be aware of (or does not care) this is an AJAX callback;
4. Our control intercept the page output and strips out the part that is inside the CallbackPanel and transfer only that part, not the whole page output to the client;
5. The client side code apply this output;

There are two primary reasons why the whole page must be executed:

1. While you only want to update a certain region of your page, your code might rely on or interact with controls outside of the update reagion. So while other controls' output won't be used, they still have to be there;
2. One of the major goal for our CallbackPanel is to make it as easy to use as possible. By making it working the same way as if there was no CallbackPanel at all, you can achieve partial page updating with minimal amount of coding --- in fact no special coding is needed in most cases, you simply drop it in, set the trigger and you are all set.

Hope this helps.

Thanks
Back to top
 
Troy
Posted: Wednesday, July 25, 2007 2:33:35 PM
Rank: Member
Groups: Member

Joined: 5/31/2007
Posts: 13
Hi, thanks for the explanation, yes it does help. I added a literal field and output the date in the Page_Load on if !IsPostBack, and indeed it does not update that field.

If I dynamically inject the user control into the page, I simply have to add it back in the Page_Load event and it seems to keep state and all perfectly! So with that, considered this closed.

I must say, I love the support and the toolset you have built, excellent work!
Back to top
 
eo_support
Posted: Wednesday, July 25, 2007 2:37:33 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,301
That's great! Thanks for the update and appreciate your compliments! Please feel free to let us know if you have any other questions.
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.