CODEWITHSUNDEEP
asp.netajaxgridview
Jim
Jim

Reputation: 4669

How do you get a single column of a gridview to auto-update without refreshing the whole page?

I have a gridview with multiple columns, but only one of the columns should dynamically change. Each row has a "status" value that I require a database call to update. I have written a function to do that call, but the current approach I've written to update it refreshes the entire page. This is obtrusive, since refreshing removes state (selected values in other areas of the page, scrolled location, etc).

Here is the code I've written to try to set this up:

<div class = "my_gridview">
    <asp:Timer ID = "timer_1" OnTick = "timer_1Tick" runat = "server" Interval = "25" />
        <asp:UpdatePanel ID = "update_panel" UpdateMode = "Conditional" runat = "server">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID = "timer_1" EventName = "Tick" />
        </Triggers>
        <ContentTemplate>
            <asp:GridView ID="my_gridview" runat="server" AutoGenerateColumns = "False" 
                GridLines="None" Width="100%" AllowSorting="True" 
                CssClass="table table-bordered x-condensed cameraDetails" OnRowDataBound = "my_list_RowDataBound"
                EmptyDataText = "There are no generated heatmaps">
                <Columns>
                    <asp:TemplateField meta:resourceKey = "StringSourceID">
                    <HeaderTemplate>
                        <asp:Label ID = "srcTitleLbl" runat="server" Text = "Source" />
                    </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID = "srcLbl" runat="server" CssClass="LinkBtn_Type" meta:resourceKey="srcLblResource" />
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField meta:resourceKey = "StringStatus">
                    <HeaderTemplate>
                        <asp:Label ID = "statusTitleLbl" runat="server" Text = "Status" />
                    </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID = "statusLbl" runat="server" CssClass="LinkBtn_Type" meta:resourceKey="statusLblResource" />
                        </ItemTemplate>
                    </asp:TemplateField>

                </Columns>
            </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>

How can this be done where it doesn't refresh the entire page?

Upvotes: 1

Views: 1225

Answers (1)

Karl Anderson
Karl Anderson

Reputation: 34844

UpdatePanels do a partial postback, but that still goes through the page lifecycle, which causes the removal of state. You can investigate persisting things like item selection (checkboxes, rows, etc.), but you will most likely spend a lot of time creating this and maintaining it will be a nightmare.

To truly avoid the page lifecycle and achieve the user experience you are describing, then use a client-side solution, like plain JavaScript, KnockoutJS, Backbone or AngularJS. These approaches will leave your page state alone while sending/retrieving data to the server and then, potentially, update portions of the page.

Upvotes: 2

Related Questions