Link to home
Start Free TrialLog in
Avatar of eddyperu
eddyperuFlag for United States of America

asked on

How to create a preload for a Griedview in asp.net 2.0?

HI,
I have this page:" View.aspx" This page have a "textbox" and a "button".The button's name is "Searchbtn" and the textbox's name is "Searchtxt". Also in the same page I have a panel named "panel1" which contain a griedview that I named. "GriedViewSearch".
When the page appears for first time the "Panel1" is invisble until the client input a name in the textbox and click the search button. Then the Panel1 will appear showing the GriedView with the best matches for whatever the client was looking for.
Everything happend in the page "View.aspx"  and all the controls are ASP. By the way teh griedview make a trip to the database to show whatever the client was looking for.

My problem is that the griedview take a long time to show up with the result so I need to create a control may be a gif animation or a swf animation to show  to the client while the page is going to the server and pulling the information. When the information is ready to be show and Panel1 is ready to appear then the gif animation will end and  the griedview will appear.

It is sore it off like a preload, so any ideas how to do that?

By the way I am using C#, asp.net 2.0 and Javascript

Thanks for your help!!! :) :)
Avatar of McCoin
McCoin

There are several things you can do and there are a lot of things to take into consideration.
If the query takes a long time you may want to look at optimizing the query or the database itself (for example puting indexes within the database).

You can consider using an AJAX approach to pull the data asynchronously so the user can still use the front end.
Using an animated Gif is very common and there is nothing wrong with that at all.

You could also consider Caching the data (if there isn't a significant amount of information). You could store a datatable, dataview, or something similar into a session variable or into viewstate (again if it's not too big). That way whenever you need to run a query against the data, you can just use what's in your variable instead of hitting the database again.

I hope that helps, if not, let me know and I'll see what I can do.
Avatar of eddyperu

ASKER

What do you think using the Progress Bar from AJAX, the only required to use this is to have an update Panel. Also I realized that the Textbox and the button are inside a Web User Control,  and that bring a lot of question.
1) After Wrapped my "GriedViewSearch" with an Update Panel, how Can I connect the button "Searchbtn" from my web user control to the Update Panel that contain "GriedViewSeach", remember this  GriedView is located in the view.aspx.

Would you mind to create an example how to do this...Thanks,

2)If you have time , Could you explain me more about this line:
"You can consider using an AJAX approach to pull the data asynchronously so the user can still use the front end. " , was you talking about the progress bar?

Thansk for your help one more time
I am adding my code so you can see what I am doing.
 I think that the really question is how can I trigger a button in my Web User Control to Update a Panel in my normal Page. Below you can see the logic what I am trying to do :

VIew.aspx:
    < UserControl that has a button "SearchButton" and a textbox, so the client can look for someone>
    <Update Panel, The "SearchButton" needs to come here and update this Panel>
         < GriedView, This is the information or result that is coming from a Database>
    </Update Panel is closing>

Thats it!!  Thanks for your help! :)
       
Web user Control:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ConnectingButton.ascx.cs" Inherits="ConnectingButton" %>
<asp:Button ID="SearchBtn" runat="server" Text="Button from Web User Control" />
 
Page VIEW.aspx:
  <UPC:ConnectingButton  ID="Connection" runat="server"/>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate> 
      //IN this space goes the GriedView but for now I am 
      //setting an label that catch the time from a click function
      <asp:Label id="lblTime" runat="server"></asp:Label>
      <asp:Button ID="Button1" runat="server" Text="Button in the page" 
       OnClick="Button1_Click" />
    </ContentTemplate> 
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" />
    </Triggers>         
  </asp:UpdatePanel>
  <asp:UpdateProgress ID="UpdateProgress1" runat="server">
      <ProgressTemplate>
           <img src="25-1.gif" /> Updating page ....
      </ProgressTemplate>
  </asp:UpdateProgress>
 
Code Behind C# in View.Aspx :
  protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000); 
        lblTime.Text = "Time " +
        DateTime.Now.ToString();    
    }

Open in new window

Here is a link that should give you exactly what you need.
http://msdn.microsoft.com/en-us/library/bb399001.aspx

The last example should be close to what you're looking for

I hope this helps
THanks, for your  fast anwer but That didn't help me.
They are giving examples of an update panel with a button which is in the same page triggering the update panel. I am not looking for that.

I am looking for a button that is set in a Web user Control that can trigger and Update Panel that is in the "View Page".

Thanks
No problem I'll do what I can.

There is a section in that link that is titled:
"Refreshing an UpdatePanel Control with an External Button "
which includes step by steps on how to apply the trigger.
in part it reads;
By default, a postback control (such as a button) inside an UpdatePanel control causes a partial-page update. By default, a button or other control outside an UpdatePanel control causes the whole page to be refreshed, as you have seen.

You can also configure a control outside the update panel to be a trigger that refreshes just the update panel.

Let me know if this helps

To refresh of an UpdatePanel control with an external button
Thanks for your fast answer but I think that we are talking about different issues here. I know about the update panel and the buttons that can be triggered inside the update panel or outside from the update panel. My question  is about a button that is inside a WEB USER CONTROL. You see, to trigger the update panel I need a button, this button is not in the page itself, it is inside the WEB USER CONTROL.

THAT IS COMPLETE DIFFERENT from the tutorial that you gave me. I know that I  need to change in somehowy this:
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" />
    </Triggers>

Where ControlID="Button1" need to be change for the BUtton ID that is inside the web user control. I was thinking that It can be domto do some javascript, but I don't know how.

Is this make sence?....Would you mind to write an example.It is more easy for me to understand it that way THANKS :)

I'll go ahead and try and pull in some additional help for you. I'll post a question that directs to your question and see if anyone has a more solid solution for you.
Thanks!! :)
Your UserControl needs to define an Custom Event for this to take place.  Then inside the btnClick event handler in the UserControl, you raise the custom event, which is then bubbled up to the main page.

Then you attach this custom event to the AsyncPostBackTrigger.

If you post your usercontrol code, specifically the button click event, I'll show you what I mean.
Thanks!
This is my Web User contro code in the Server side:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class ConnectingButton : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void SearchBtn_Click(object sender, EventArgs e)
    {
 

    }
}

There is only one button(This button is the one that it will trigger the update Panel from the page View.aspx).

Now in my view.aspx page:
Page VIEW.aspx:
  <UPC:ConnectingButton  ID="Connection" runat="server"/>
  <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
      //IN this space goes the GriedView but for now I am
      //setting an label that catch the time.
      <asp:Label id="lblTime" runat="server"></asp:Label>
      <asp:Button ID="Button1" runat="server" Text="Button in the page"
       OnClick="Button1_Click" />
    </ContentTemplate>
    <Triggers>
     <asp:AsyncPostBackTrigger ControlID ="Button1" EventName="Click" />
    </Triggers>        
  </asp:UpdatePanel>
  <asp:UpdateProgress ID="UpdateProgress1" runat="server">
      <ProgressTemplate>
           <img src="25-1.gif" /> Updating page ....
      </ProgressTemplate>
  </asp:UpdateProgress>
 
Code Behind C# in View.Aspx :
  protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblTime.Text = "Time " +
        DateTime.Now.ToString();    
    }
 
Also, all the way to the top of this question you can find my code with more details.

Thanks for your help,. Would you mind use mi code to write me an example.
Thanks one more time :)
One more thing the "Button1" that you see in my code, is an example that I set there for purpose of testing. You can erase it, and try to trigger that "UPdate Panel" and the "Progress bar" using the button from the Web user Control, the name of the button is "SearchBtn".
Thanks
Your usercontrol should look like this

public partial class ConnectingButton : System.Web.UI.UserControl
{
    public event EventHandler MyClickEvent;
    protected void OnMyClickEvent(EventArgs e)
    {
        if (MyClickEvent != null)
        {
            MyClickEvent(this, e);
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void SearchBtn_Click(object sender, EventArgs e)
    {
            OnMyClickEvent(new EventArgs());
    }
}


Your asyncpostbacktrigger now looks like this,
<asp:asyncpostbacktrigger controlid="Connection" eventname="MyClickEvent" />

I tested this and it should work for you.
Sorry for bother you again, I am a rookie in this coding world. Would you mind to explain more about the "MiCLickEvent"?
I don' quite understand this. The button in my webusecontrol is "SearchBtn" this button need to update the "UpdatePanel1" that is in view.aspx page.

 In the code that I sent you there is a Label in my view.aspx page. I also add a button "BUtton1" in the page(view.aspx).
This is the server side code for a Button1 click event::
    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        lblPassword.Text = "Page refreshed at " +
        DateTime.Now.ToString();    
    }
     
I want that the "SearchBtn" from my Web User control do this...How??

Thansk, and more time thanks for your time :)
ASKER CERTIFIED SOLUTION
Avatar of raterus
raterus
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That is awesome, THanks..one more question and please tell me if you think that  I need to open another forum for this question.I will glad to do it.
There are 2 panels, one of them is going to have the  progress bar and the other panel in this case the will contating the label with the DateTime.Now:
So it will looks like this :
<asp:panel1>
            <ProgressTemplate>
                <img src="25-1.gif" />
                Updating page ....
            </ProgressTemplate>
</asp:panel1>
<asp:panel2>
      <asp:Label id="lblTime" runat="server"></asp:Label>
</asp:panel2>
It is possible for the ProgessTemplate to execute the giff and when It finish to show the Label with the date. The trick that I want to do is that <panel1> and the <panel2> need to be in the same position of the screen, one on top of the other, so the gift animation will end and the Label appear in the same position.
Thanks, You got my points :):) Wonderful work



Yeah, that's probably something for your next question, I really don't have any experience there, and it is a new question!  Also, make sure you put it in the "ASP.Net Programming Zone", this question isn't there and should have been.
Thank you so much for your time and for your help!
eddy
excellent
Hey, how about McCoin, certainly he should get some points too.

Actually, I reread your original question, and it seems I didn't even answer that, but another question that was raised during the process.  If McCoin helped you at all he should get something!
Thanks Raterus!
You are right, he was really helpful, Is there a way to share your points, Now Ithat I hgave it to you?
Sorry about that McCoin!!1
Thanks, I'm sorry I wasn't able to help more.