Link to home
Start Free TrialLog in
Avatar of Peter Nordberg
Peter NordbergFlag for Sweden

asked on

Add or delete table rows

Hi,

I have a table looking like this:
<table id="table1" runat="server" class="table table-bordered">
                <thead>
                    <tr>
                        <th class="col-md-2">#
                        </th>
                        <th class="col-md-7">Artikel
                        </th>
                        <th class="col-md-2">Pris
                        </th>
                        <th class="col-md-1"></th>
                    </tr>
                </thead>
                <!-- Rad 1 -->
                <tr>
                    <td>
                        <telerik:RadComboBox ID="combo1" runat="server" CssClass="NoBorderCbo" MarkFirstMatch="true" DataSourceID="sqlArticle" Width="100%" DataTextField="productID" DataValueField="productID" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" EmptyMessage=" " Filter="Contains">
                            <ItemTemplate>
                                <table class="table">
                                    <tr>
                                        <td>
                                            <asp:Label ID="Label1" runat="server" Text='<%# Eval("productID") %>'></asp:Label>
                                        </td>
                                        <td>
                                            <asp:Label ID="Label2" runat="server" Text='<%# Eval("product") %>'></asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadComboBox>
                        <asp:SqlDataSource ID="sqlArticle" runat="server" ConnectionString="<%$ ConnectionStrings:connDB %>"
                            DeleteCommand="DELETE FROM CustomerContact WHERE (customerContactID = @customerContactID)"
                            SelectCommand="SELECT productID, product FROM bklProducts AS bp WHERE orderTypeID = 1 AND orgID = 11 and active = 1 ORDER BY product"></asp:SqlDataSource>
                    </td>
                    <td>
                        <asp:TextBox ID="txtA1" runat="server" Width="100%" CssClass="textbox"></asp:TextBox>
                    </td>
                    <td>
                        <asp:TextBox ID="txtP1" runat="server" Width="100%" CssClass="textbox"></asp:TextBox>
                    </td>
                    <td class="text-center">
                        <asp:ImageButton ID="btnDelete1" runat="server" ImageUrl="~/Images/Icons/trashcan.png" Style="display: none;" />                       
                    </td>
                </tr>

              
            </table>

Open in new window

What I want is to be able to add or delete rows on client side (javascript or JQuery). Of course it is important that each new control gets a unique id when the row is added.

Thanks for help!

Peter

How can I accomplish this?
Avatar of arnold
arnold
Flag of United States of America image

Not quite sure I understand what you are asking for. Your jquery/Ajax to server asp would have to handle first, output to browser it should reference what you want I.e. Unique reference from the table identifying the record.
Avatar of Peter Nordberg

ASKER

Hi,

I'd like to add a row in stable dynamically with the same server controls as the existing row.
Are you trying to mimic the page to be both a display of data and allow you to add entries within the same page?
Often, one would have an "add" that will bring up a separate dataentry.... On submission the prior content would refresh..

Web apps are transactional. I.e. You make a request, you get a response. A connection is not maintained and sustained. So when you want to add something or delete something, the check occurs on the server prior to performing the task.

I believe there are many examples jquery/json that deal with making changes to data on the server and refreshing/reflecting their display on the page....
Can you post the rendered HTML - as this is a client side operation ASP code is not relevant and in fact makes it more difficult to answer the question.

Do a view source on the rendered table and post the html.
Hi,

Here is the rendered html:

     <table id="ContentMain_table1" class="table table-bordered">
	<tr>
		<th class="col-md-2">#
                        </th>
		<th class="col-md-7">Artikel
                        </th>
		<th class="col-md-2">Pris
                        </th>
		<th class="col-md-1"></th>
	</tr>
	<tr>
		<td>
                        <div id="ctl00_ContentMain_combo1" class="RadComboBox RadComboBox_Default NoBorderCbo" style="width:100%;white-space:normal;">
			<table summary="combobox" style="border-width:0;border-collapse:collapse;width:100%">
				<tr>
					<td class="rcbInputCell rcbInputCellLeft" style="width:100%;"><input name="ctl00$ContentMain$combo1" type="text" class="rcbInput radPreventDecorate rcbEmptyMessage" id="ctl00_ContentMain_combo1_Input" value=" " /></td><td class="rcbArrowCell rcbArrowCellRight"><a id="ctl00_ContentMain_combo1_Arrow" style="overflow: hidden;display: block;position: relative;outline: none;">select</a></td>
				</tr>
			</table><div class="rcbSlide" style="z-index:6000;display:none;"><div id="ctl00_ContentMain_combo1_DropDown" class="RadComboBoxDropDown RadComboBoxDropDown_Default "><div class="rcbScroll rcbWidth"><ul class="rcbList"><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i0_Label1">24</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i0_Label2">Den största nyheten</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i1_Label1">39</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i1_Label2">Du är helt fantastisk</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i2_Label1">48</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i2_Label2">Du är helt fantastiskt</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i3_Label1">19</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i3_Label2">Fångad av hopp</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i4_Label1">14</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i4_Label2">Himlen finns på riktigt</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i5_Label1">17</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i5_Label2">Hur kommer det att gå?</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i6_Label1">30</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i6_Label2">I beundran</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i7_Label1">20</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i7_Label2">Jag såg en ängel</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i8_Label1">34</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i8_Label2">Jubileum Kanal10 Norge</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i9_Label1">45</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i9_Label2">Målle Guld</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i10_Label1">42</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i10_Label2">Målle i Hollywod</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i11_Label1">44</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i11_Label2">Målles Jul</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i12_Label1">22</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i12_Label2">Profetiska vägskäl</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i13_Label1">27</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i13_Label2">På mitt sätt</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i14_Label1">31</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i14_Label2">Sanningen gjorde mig fri</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i15_Label1">16</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i15_Label2">Sista varvet</span>
                                        </td>
                                    </tr>
                                </table>
                            </li><li class="rcbItem  rcbTemplate">
                                <table class="table">
                                    <tr>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i16_Label1">23</span>
                                        </td>
                                        <td>
                                            <span id="ctl00_ContentMain_combo1_i16_Label2">Stormvarning</span>
                                        </td>
                                    </tr>
                                </table>
                            </li></ul></div></div></div><input id="ctl00_ContentMain_combo1_ClientState" name="ctl00_ContentMain_combo1_ClientState" type="hidden" />
		</div>
                        
                    </td>
		<td>
                        <div class="RadAjaxPanel" id="ctl00_ctl00_ContentMain_txtA1Panel">
			<input name="ctl00$ContentMain$txtA1" type="text" id="ContentMain_txtA1" class="textbox" style="width:100%;" />
		</div>
                    </td>
		<td>
                        <div class="RadAjaxPanel" id="ctl00_ctl00_ContentMain_txtP1Panel">
			<input name="ctl00$ContentMain$txtP1" type="text" id="ContentMain_txtP1" class="textbox" style="width:100%;" />
		</div>
                    </td>
		<td class="text-center">
                        <div class="RadAjaxPanel" id="ctl00_ctl00_ContentMain_btnDelete1Panel">
			<input type="image" name="ctl00$ContentMain$btnDelete1" id="ContentMain_btnDelete1" src="../Images/Icons/trashcan.png" style="display: none;" />
		</div>                       
                    </td>
	</tr>
</table>
'

Open in new window


Thanks for help!

Peter
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa 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
Hi, super!

Can I just ask:
I get a postback on the button Add row right now. How can I avoid that?
How do I delete a row?

Peter
SOLUTION
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
Thanks for help!
You are welcome.