Floating panel, with details view appears on demand

Last post 06-25-2007 9:08 AM by sevs. 5 replies.

Sort Posts:

  • Floating panel, with details view appears on demand

    06-20-2007, 2:37 PM
    • Member
      48 point Member
    • sevs
    • Member since 09-20-2005, 2:52 PM
    • Posts 24

    Hi all,

     I'm trying to build a relatively simple page, but I'm not sure how to go about doing what I want to.

     
    Here's the situation:  I've got a Grid View that is pulling some items from a SQL table.  Now, the entire list has very many elements in it so, to prevent the page from having to scroll to the right too much, I'd like to put just a few columns in Grid View and then add a "Select" button.  Upon clicking the select button, a panel would appear by the mouse button that would have a details view with all the details of the record just clicked (I'd also probably want to make that panel dragable).  On that panel would be a small button to close that panel to allow the user to continue on with searching through the records.  I'm having problem with figuring out where to start in getting the panel to appear and disappear and then to have it appear by the mouse.  I'd like to incorporate AJAX as much as possible when it makes sense.

     
    Any ideas or suggestions? Thanks

     

  • Re: Floating panel, with details view appears on demand

    06-20-2007, 4:58 PM
    Answer
    • Participant
      1,501 point Participant
    • revkev
    • Member since 04-14-2007, 5:42 AM
    • Posts 386

     Pretty simple task but this will take multiple steps as you have several ?'s here.

     First lets tackle the gridview > detailsview... I am assuming that you are using either VWD Express or VS...

     that should be easy man. Just make one of your column a hyperlink and pass the ID of your record to the hyperlink, that's all, then request the parameter in your details view
     

    Example, however this one is moving to another page... but what you could do since you want to use AJAX would be to add in the partial page update here once the hyperlink is selected...

    <asp:GridView   ID="LateMileStonesGridView"
         Caption = "Late"
         runat="server"
         AutoGenerateColumns="False"
         AllowSorting="True"
         CssClass="grid"
         DataKeyNames="MilestoneID"
    >
        <columns>

             <asp:TemplateField>

                  <ItemTemplate>
                           <a href="detail.aspx?milestoneid=<%#Eval("MilestoneID")%>"><%#Eval("MilestoneID")%></a>
                   </ItemTemplate>

             </asp:TemplateField>

              <asp:BoundField DataField="MilestoneTitle" HeaderText="Title" SortExpression="Title" />

        </columns>
    </asp:GridView>
     
    As you can see, the first column of the grid is a "TemplateField" where I can have anything in the column I want (in this case, it's a regular hyperlink). I pointed the hyperlink to "detail.aspx" page with a parameter "milestoneid". So far so good? and I pass the parameter a value of the id in the current row.

    Now in details.aspx's Page_Load function, I get the "milestoneid" parameter like so

    protected void Page_Load(.....)
    {
            if(!Page.IsPostBack)

            {

                   String milestoneid = Request["milestoneid"];
                   // use data access to retrieve teh detail based on the milestoneid
             }

    }


     

    Remember to "Mark As Answer" if this post has helped you! Thanks....
    And I say unto you, Ask, and it shall be given you; seek, and ye shall find; knock, and it shall be opened unto you...
    LK 11:9
    http://adventwebdesign.net
  • Re: Floating panel, with details view appears on demand

    06-22-2007, 12:41 PM
    • Member
      48 point Member
    • sevs
    • Member since 09-20-2005, 2:52 PM
    • Posts 24

    Thanks for the assistance, but what you're describing I've already done.  My problem is with getting the panel and the AJAX control to work.  The passing of the parameters is not an issue.  I can't seem to get that floating panel idea to work at all yet. 

  • Re: Floating panel, with details view appears on demand

    06-22-2007, 2:22 PM
    • Participant
      1,501 point Participant
    • revkev
    • Member since 04-14-2007, 5:42 AM
    • Posts 386

     Have you checked out the http:asp.net/learn site yet?  There is some brief tutorials that will help you troubleshoot that issue.  I imagine that your web.config is not set up properly.  Even with that, you may want to check your script manager... but definitely, I think that your web.config is not set up correctly...

     Look at the tutorial, specifically: http://www.asp.net/learn/videos/view.aspx?tabid=63&id=81

     

    thnx,
     

    Remember to "Mark As Answer" if this post has helped you! Thanks....
    And I say unto you, Ask, and it shall be given you; seek, and ye shall find; knock, and it shall be opened unto you...
    LK 11:9
    http://adventwebdesign.net
  • Re: Floating panel, with details view appears on demand

    06-22-2007, 7:40 PM
    • Contributor
      2,793 point Contributor
    • LockH
    • Member since 03-25-2007, 2:58 PM
    • Scotland, where whisky has no e.
    • Posts 576

    I did something like that by simply disabling the gridview and making the formview visible on a command event,

    then making the formview invisible and enabling the gridview on click of a "close" button on the formview.

    No Ajax or javascript involved.

     

    I think I have seen this done more elegantly using layers, change the layer of a panel to bring it to the front, much prettier, drop shadow etc.

     

    Hope that helps? 

    If a post helps to solve your problem, please click the Answer button on that post.

    I'm still confused, but now I'm confused on a higher plane.
  • Re: Floating panel, with details view appears on demand

    06-25-2007, 9:08 AM
    • Member
      48 point Member
    • sevs
    • Member since 09-20-2005, 2:52 PM
    • Posts 24

    I was thinking about doing that however there's not enough space on the page to put both so I need to have the floating panel if possible.

    I guess I didn't make myself really clear in my previous post in that, I really have no idea how to implement this sort of thing in floating panels.  Not that I have it there and the AJAX functionality won't work, but I'm not sure where to start with this.  How do I set the panel to be able to position itself by the mouse or link, over the rest of the page or how to have it appear and disappear on clicks.  Those are the sorts of problems and issues I was having.  If anyone has done something like this before successfully, I'd love to know how you did it.
     

Page 1 of 1 (6 items)