Greybox and AJAX.NET Issue

 

I have a GridView that displays a bunch of data.  The data is bound from a RowDataBound databound method.  All is well with this.  I can sort, page etc without an issue. 

 

If you look at the top of the image you will see the Months of a year.  These are LinkButton controls that have a CommandArgument representing the Month number and an OnClick event that calls a Method.  This method get the CommandArgument and "re-binds" the data with the Month ID passed in.  Ex.  By Default the page loads the Month ID of the current month, if you click on Dec then the Month ID is now 12 and all December data is displayed.  

All is well still.  

With this in place you get the standard PostBack operations where the page reloads.  Well I want to make this a little "slicker" so I added the an UpdatePanel to the page.  Great.  All is great.  Here is the page is structured.

<asp:Panel ID="PanelLinks" runat="server">
            <asp:UpdatePanel ID="PanelLinksForm" runat="server">
                <ContentTemplate>
                    <h1>Calendar of Events</h1>
                    <p>Check out these great upcoming events!</p>
                    <p>
                    <asp:LinkButton ID="linkJan" runat="server" CommandArgument="1" Text="Jan" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkFeb" runat="server" CommandArgument="2" Text="Feb" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkMar" runat="server" CommandArgument="3" Text="Mar" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkApr" runat="server" CommandArgument="4" Text="Apr" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkMay" runat="server" CommandArgument="5" Text="May" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkJune" runat="server" CommandArgument="6" Text="Jun" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkJuly" runat="server" CommandArgument="7" Text="Jul" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkAug" runat="server" CommandArgument="8" Text="Aug" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkSept" runat="server" CommandArgument="9" Text="Sep" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkOct" runat="server" CommandArgument="10" Text="Oct" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkNov" runat="server" CommandArgument="11" Text="Nov" onclick="link_Click"></asp:LinkButton>
                    <asp:LinkButton ID="linkDec" runat="server" CommandArgument="12" Text="Dec" onclick="link_Click"></asp:LinkButton>
                    </p>
                    <div style="height:320px; width:568px; overflow:auto;">
                        <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1"
                            AutoGenerateColumns="false"
                            AllowSorting="true"
                            AllowPaging="true"
                            PageSize="5"
                            OnRowDataBound="GridView1_RowDataBound"
                            OnPageIndexChanging="GridView1_PageIndexChanging"
                            Width="550">
                            <HeaderStyle CssClass="event-header" />
                            <RowStyle CssClass="event-item" />
                            <EmptyDataRowStyle CssClass="event-empty" />
                            <Columns>
                                <asp:TemplateField SortExpression="CreateDate" HeaderText="Date" ItemStyle-Width="70">
                                    <ItemTemplate>
                                        <asp:Literal ID="litDate" runat="server"></asp:Literal><br />
                                        <asp:Literal ID="litTime" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Concert Name" ItemStyle-Width="100">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="imgVenue" runat="server" NavigateUrl="javascript:void(0);" rel="gb_page_center[620,315]" /><br />
                                        <asp:Literal ID="litName" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Artists" ItemStyle-Width="150">
                                    <ItemTemplate>
                                        <asp:Literal ID="litArtists" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Venue" ItemStyle-Width="110">
                                    <ItemTemplate>
                                        <asp:Literal ID="litVenue" runat="server"></asp:Literal>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Artists" ItemStyle-Width="120">
                                    <ItemTemplate>
                                        <asp:HyperLink ID="linkTickets" runat="server" Text="Get Tickets Now" Target="_blank"></asp:HyperLink>
                                    </ItemTemplate>
                                </asp:TemplateField>                           
                            </Columns>
                            <EmptyDataTemplate>
                                There are no events for the month selected
                            </EmptyDataTemplate>
                            <PagerSettings Mode="NextPreviousFirstLast" PageButtonCount="5" Position="Bottom" Visible="true" />
                        </asp:GridView>
                    </div>
                </ContentTemplate>
            </asp:UpdatePanel>
        </asp:Panel>
    </div>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
    ConnectionString="<%$ ConnectionStrings:RockTheSoundDataConnectionString %>"
    SelectCommand="usp_EventTour_GetCalendarEvents" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:Parameter Name="Month" Type="Int32" />
    </SelectParameters>
</asp:SqlDataSource>

And in the master page I have the ScriptManager.

Great!  Everything works. 

So I want to get even more fancy so I incorporated a GreyBox.  For those not familar with GreyBox please check it out. You can see the GreyBox code in the TemplateField of the Concert Name.  Again, great.  When you come to the page, it loads the default data and if you click on the image it loads in the GreyBox.  Perfect!

Then something happens.  When you click on a Month it performs the new data bind for that month data and then click on the image to open the GreyBox again, kapow!  It stops working.  It now becomes just a straight link and goes to that page instead of loading the page in the GreyBox.  No clue why.  Tried to debug but running into no answer.

Anyone?

 

 

 

 

 

Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Related posts

Add comment


(Will show your Gravatar icon)  

  Country flag

[b][/b] - [i][/i] - [u][/u]- [quote][/quote]



Live preview

November 20. 2008 16:48