Peter Nordberg
asked on
Add or delete table rows
Hi,
I have a table looking like this:
Thanks for help!
Peter
How can I accomplish this?
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>
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?
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.
ASKER
Hi,
I'd like to add a row in stable dynamically with the same server controls as the existing row.
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....
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.
Do a view source on the rendered table and post the html.
ASKER
Hi,
Here is the rendered html:
Thanks for help!
Peter
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>
'
Thanks for help!
Peter
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for help!
You are welcome.