UpdatePanel and refreshing Repeaters

Question

I have a repeater that displays products, and the footer is input fields where you can choose a product from a db and add it to the repeater. The first field of the add line in the footer is a RadComboBox (with product names) and I want to update the other input fields with info from the db when SelectedIndexChanged for that combobox.

The problem is finding those other controls in my code-behind function.

protected void ProductSelected(Object source, EventArgs e) 
    {
        RadComboBox temp = (RadComboBox)source;

        Product p = session.Query<Product>()
            .Where(x => x.Name == temp.SelectedItem.Text)
            .FirstOrDefault();


            var repParent = temp.Parent;
            //var repParent = ((UpdatePanel)temp.NamingContainer.FindControl("UpdateHardwareLine")).ContentTemplateContainer;

            ((TextBox)repParent.FindControl("AddPartNumber")).Text = p.PartNumber;
            ((TextBox)repParent.FindControl("AddPartCost")).Text = p.Cost.ToString();
            ((TextBox)repParent.FindControl("AddUnitPrice")).Text = p.Price.ToString();
            ((TextBox)repParent.FindControl("AddQuantity")).Text = p.DefaultQuantity.ToString();

    }

I've tried this 2 ways. At first I put the UpdatePanel in the footer of the repeater, and I changed repParent to the commented version. This produced some really weird results where it updated the input fields, but now they're above my entire repeater o_0?

Then I pulled the updatepanel out of the repeater, and it updates, but it refreshes the entire page. I would settle for just updating the footer, but it'd be neat to get those add/delete buttons working in the same update panel. How should I go about setting this up so it just refreshes for whats in this well?

as requested;

<asp:Repeater ID="repHW" runat="server" OnItemCommand="rep_ItemCommand">
        <HeaderTemplate>
            <table style="width:100%; padding-bottom:10px" id="HWtable">
                <tr style="font-weight: bold"><td>Product</td><td>Part Number</td><td>Cost</td><td>Unit Price</td><td>Quantity</td><td>Price</td><td>Delete</td></tr>
        </HeaderTemplate>
        <ItemTemplate>
            <tr>
                <asp:HiddenField ID="Category" Value="Hardware" runat="server"/>
                <td><asp:Label ID="Product" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Product.Name") %>' /></td> <!--TODO: make this clickable to edit -->
                <td><asp:Label ID="PartNumber" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Product.PartNumber") %>' /></td>
                <td><asp:Label ID="PartCost" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Product.Cost") %>' /></td>
                <td><asp:Label ID="UnitPrice" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Product.Price") %>' /></td>
                <td><asp:Label ID="Quantity" runat="server" Text='<%# Eval("Quantity") %>' /></td>
                <td><asp:Label ID="Price" runat="server" Text='<%# Eval("Total") %>' /></td>
                <td><asp:Button class="btn btn-danger" ID="DeleteHardware" runat="server" Text="Delete" CommandName="Delete" CommandArgument='<%# Container.ItemIndex %>'/></td>
            </tr>
        </ItemTemplate>
        <FooterTemplate>
            <tr>
                <asp:UpdatePanel ID="UpdateHardwareLine" updatemode="Conditional" runat="server" ChildrenAsTriggers="true">
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="AddProduct" EventName="SelectedIndexChanged" />
                    </Triggers>
                    <ContentTemplate>
                        <asp:HiddenField ID="AddCategory" Value="Hardware" runat="server"/>
                        <td><telerik:RadComboBox runat="server" ID="AddProduct" ClientIDMode="static" Filter="Contains" EnableLoadOnDemand="true" AutoPostBack="true" OnSelectedIndexChanged="ProductSelected" OnDataBinding="LoadProductsByCategory"/></td>
                        <td><asp:TextBox runat="server" ID="AddPartNumber" ClientIDMode="static"/></td>
                        <td><asp:TextBox runat="server" ID="AddPartCost" ClientIDMode="static"/></td>
                        <td><asp:TextBox runat="server" ID="AddUnitPrice" ClientIDMode="static"/></td>
                        <td><asp:TextBox runat="server" ID="AddQuantity" ClientIDMode="static"/></td>
                        <td><asp:Button class="btn btn-success" ID="AddHardware" runat="server" Text="Add" CommandName="Add" CommandArgument='<%# DataBinder.Eval(Container, "ItemIndex") %>' onClientClick="return EmptyFieldCheck('Hardware');"/></td>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </tr></table>    
        </FooterTemplate>
    </asp:Repeater>

Can you show us the relevant markup of the Repeater, its footer and the UpdatePanel? — ConnorsFan, Mar 26 '16 at 02:13
@ConnorsFan updated the OP. It's changed a few times obviously as I've tinkered, but this is how it sits now — Jordan Wayne Crabb, Mar 28 '16 at 14:46
The UpdatePanel is implemented as a `div` or a `span`, depending on the `RenderMode` property (default is `div`). You cannot insert that kind of element between a `` and its `` children. — ConnorsFan, Mar 28 '16 at 14:52

ConnorsFan · Answer 1 · 2016-03-28T15:08:47.770

You could display the content of the footer in a separate table. Something like this:

<FooterTemplate>
    <tr>
        <td colspan="7">
            <asp:UpdatePanel ID="UpdateHardwareLine" updatemode="Conditional" runat="server" ChildrenAsTriggers="true">
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="AddProduct" EventName="SelectedIndexChanged" />
                </Triggers>
                <ContentTemplate>
                    <table style="width:100%;">
                        <tr>
                            <asp:HiddenField ID="AddCategory" Value="Hardware" runat="server"/>
                            <td><telerik:RadComboBox runat="server" ID="AddProduct" ClientIDMode="static" Filter="Contains" EnableLoadOnDemand="true" AutoPostBack="true" OnSelectedIndexChanged="ProductSelected" OnDataBinding="LoadProductsByCategory"/></td>
                            ...
                        </tr>
                  </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </td>
    </tr>
</FooterTemplate>

The challenge would be to get that inner table aligned properly with the outer one. You would probably need to set CellPadding="0" and CellSpacing="0" for both tables as a first step.

Okay, I will mess with that. Would it be advised to use one updatepanel for the well and put it outside the repeater if I wanted to update on the add/delete buttons also? (see screenshot) — Jordan Wayne Crabb, Mar 28 '16 at 15:09
Sorry, I don't understand what the "well" is (my English is somewhat limited). If you talk about your current footer, it could certainly be outside of the Repeater, since it does not display totals or other info that is usually found in a footer. — ConnorsFan, Mar 28 '16 at 15:20

UpdatePanel and refreshing Repeaters

1 Answers1