Add HTML table row at run time by clicking a button - ASP.NET Discussion Boards

Ah, i see. You're working with skins and want the delete-image-url of your usercontrol to
point to the correct image file of the current theme?

Maybe the answer in
this thread helps you?

Correct. I followed your link, but I cann't see any answers.
Basically what I do is the following:

On the Page_Load event of the user control I inject javascript.

ScriptManager.RegisterStartupScript(this, typeof(Page), "MultiFileUploadScript", GetJavaScript(), false);

private string GetJavaScript()
{
   StringBuilder JavaScript = new StringBuilder();
   :
   JavaScript.Append("var deleteImage = null;\n");
   if (m_strDeleteImageUrl != string.Empty)
   {
     JavaScript.Append("deleteImage = new Image();\n");
     JavaScript.AppendFormat("deleteImage.src = '{0}';\n", m_strDeleteImageUrl);
     JavaScript.AppendFormat("deleteImage.setAttribute('alt','{0}');\n", m_strDeleteText);
   }
   :
   return JavaScript.ToString();
}

How can I make m_strDeleteImageUrl point to the correct theme image ?

tia

Can't you just set the images' filename (or subpath below the themefolder) in the setter
of the DeleteImageUrl property of your usercontrol (without the string.format(..theme...) part)?

Then, in the GetJavaScript() Method (which you call during Page-Load), you can build the correct path including the theme-folder by using Page.Theme, as Page should not be
null there.

I already tried that. Even in the JavaScript method Page.Theme is null.

Could it have to do the way I set my theme. In web.config I do :

<pages styleSheetTheme="Sunset">
   <controls>
   :
   </controls>
</pages>

tia

Oh yes, use Page.StyleSheetTheme instead.

I really hope, the Page property of your control is not null..otherwise.. could you provide a sample project where it is not working?

Cheers

Found it.

In my JavaScript method I got the path as follows :

string strImageThemePath = string.Format("{0}/App_Themes/{1}/{2}", Page.Request.ApplicationPath, Page.StyleSheetTheme, m_strDeleteImageUrl);

Thanks Michael for your help.

Oh thank god =)

Not a problem - glad it finally worked

I want to add table rows at run time. when i click '+' button on the 1st row, i want to add the column values (in first row) to a database. similarly 2nd, third and so on respectively.

this is the code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="admn_div_hist.aspx.cs" Inherits="Portfolio" %><br />
<br />
<br />
<%@ Register Src="Calendar.ascx" TagName="Calendar" TagPrefix="uc1" %><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<br />
<html xmlns="http://www.w3.org/1999/xhtml" ><br />
<head runat="server"><br />
    <title>Portfolio Management System</title><br />
	<script language="javascript" type="text/javascript"><br />
 	 <br />
 <br />
function AddRow()<br />
{<br />
var table = document.getElementById("tblGrid");<br />
if (!table) throw "Table not found";<br />
var row = table.insertRow(-1); <br />
 <br />
//append at the end<br />
var cell1 = row.insertCell(-1);<br />
var cell2 = row.insertCell(-1);<br />
var cell3 = row.insertCell(-1);<br />
 <br />
cell1.innerHTML = "<input type='text' id='div_no'>";<br />
cell2.innerHTML = "<input type='text' id='txt_divdate'> &nbsp;&nbsp;<img src='images/calendar.gif' onclick='caldisplay'>";<br />
cell3.innerHTML = "<input type='text' id='txt_divunits'>";<br />
<br />
<br />
}<br />
 <br />
 function caldisplay()<br />
 {<br />
    var dt=document.getElementById('Calendar1');<br />
    dt.style.display='block';<br />
    <br />
        <br />
 }<br />
<br />
</script><br />
<br />
<body><br />
<form id="frm_dividend_hist" runat="server"><br />
<table id="tblGrid" style="table-layout:fixed; z-index: 107; left: 125px; position: absolute; top: 216px;" border="1" bordercolor="#3399ff" width="270"><br />
			<tr><br />
				<td style="height: 19px; width: 70px;"><br />
                    Dividend #</td><br />
				<td style="height: 19px; width: 120px;"><br />
                    &nbsp;Dividend Date</td><br />
				<td style="height: 19px; width: 80px;"><br />
                    % Units</td><br />
			</tr><br />
          <tr><br />
              <td style="width: 158px; height: 13px"><br />
                  <asp:TextBox ID="div_no" runat="server" Style="z-index: 100; left: 4px; position: absolute;<br />
                      top: 29px" Width="57px" Height="13px"></asp:TextBox><br />
              </td><br />
              <td style="height: 13px; width: 330px;"><br />
                  <asp:TextBox ID="txt_divdate" runat="server" Style="z-index: 100; left: 80px; position: absolute;<br />
                      top: 31px" Width="91px" Height="10px"></asp:TextBox><br />
                       <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/calendar.gif"<br />
               Style="z-index: 105; left: 182px; position: absolute;<br />
            top: 30px" OnClick="ImageButton2_Click1"   /><br />
                 <br />
              </td><br />
              <td style="width: 50px; height: 19px"><br />
               <asp:TextBox ID="txt_divunits" runat="server"   Style="z-index: 102;<br />
                      left: 217px; position: absolute; top: 29px" Width="17px"></asp:TextBox><br />
              <asp:Button ID="Button1" runat="server" Style="z-index: 108; left: 250px; position: absolute;<br />
            top: 29px" Text="+" Width="27px" OnClick="Button1_Click" Height="20px" /><br />
            <br />
                          </td><br />
          </tr><br />
			 <br />
		</table><br />
<br />
		</form><br />
		</table><br />
		 <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999"<br />
            CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt"<br />
            ForeColor="Black" Height="180px" Style="z-index: 105; left: 674px; position: absolute;<br />
            top: 263px" Visible="False" Width="200px" OnSelectionChanged="Calendar1_SelectionChanged"><br />
            <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /><br />
            <SelectorStyle BackColor="#CCCCCC" /><br />
            <WeekendDayStyle BackColor="#FFFFCC" /><br />
            <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /><br />
            <OtherMonthDayStyle ForeColor="#808080" /><br />
            <NextPrevStyle VerticalAlign="Bottom" /><br />
            <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /><br />
            <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /><br />
        </asp:Calendar><br />
        </body><br />
		</html><br />

Code Behind page

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
using Logic;

public partial class Portfolio : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

}

protected void ImageButton2_Click1(object sender, ImageClickEventArgs e)
{
Calendar1.Visible = true;
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
this.txt_divdate.Text = Calendar1.SelectedDate.ToString("d");
Calendar1.Visible = false;

}

protected void Button1_Click(object sender, EventArgs e)
{

this.Button1.Attributes.Add("onclick", "AddRow()");
}

}

I don't think this approach will work. If I were you I'd look at handling the add row event on the server side using a GridView.

Freestyle Interactive Ltd | Martin on .Net

pl help me in solving this using gridview

There's plenty of tutorials out there on using gridview:
http://www.c-sharpcorner.com/UploadFile/Art%20Scott/GridViewInsertANewRow09012006165053PM/GridViewInsertANewRow.aspx[^]

The problem you'll need to bear in mind is that each control will need a unique id (this is handled automatically for asp.net controls within a gridview).

Freestyle Interactive Ltd | Martin on .Net

You were close to getting it right.I made some minor
changes to make it work. Consider this code ...

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" >

 <head id="Head1" runat="server"> 
 <title>Portfolio Management System</title> 
 <script language="javascript" type="text/javascript"> 

function AddRow()
{
var table = document.getElementById("tblGrid");
if (!table) throw "Table not found";
var row = table.insertRow(-1); 

//append at the end
var cell1 = row.insertCell(-1);
var cell2 = row.insertCell(-1);
var cell3 = row.insertCell(-1);

cell1.innerHTML = "<input type='text' id='div_no'>";
cell2.innerHTML = "<input type='text' id='txt_divdate'> <img src='images/calendar.gif' onclick='caldisplay'>";
cell3.innerHTML = "<input type='text' id='txt_divunits'>";


}

function caldisplay()
{
//var dt=document.getElementById('Calendar1');
//dt.style.display='block';


}

</script> </head>
<body> 
<form id="frm_dividend_hist" runat="server"> 
 <table id="tblGrid" style="table-layout:fixed; z-index: 107; left: 125px; position: absolute; top: 216px;" border="1" bordercolor="#3399ff" width="270"> 
   <tr> 
    <td style="height: 19px; width: 70px;"> 
     Dividend #
    </td> 
    <td style="height: 19px; width: 120px;">
      Dividend Date
    </td> 
    <td style="height: 19px; width: 80px;">
     % Units
    </td> 
  </tr> 
  <tr> 
   <td style="width: 158px; height: 13px">
    <asp:TextBox ID="div_no" runat="server" Style="z-index: 100; left: 4px; position: absolute;
top: 29px" Width="57px" Height="13px">
    </asp:TextBox> 
   </td> 
   <td style="height: 13px; width: 330px;"> 
    <asp:TextBox ID="txt_divdate" runat="server" Style="z-index: 100; left: 80px; position: absolute;
top: 31px" Width="91px" Height="10px">
    </asp:TextBox> 
    <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/images/calendar.gif" Style="z-index: 105; left: 182px; position: absolute;
top: 30px" OnClick="ImageButton2_Click1" /> 
   </td> 
   <td style="width: 50px; height: 19px"> 
    <asp:TextBox ID="txt_divunits" runat="server" Style="z-index: 102;
left: 217px; position: absolute; top: 29px" Width="17px">
    </asp:TextBox> 
    <input type="button" ID="Button1" Style="z-index: 108; left: 250px; position: absolute;
top: 29px" Text="+" Width="27px" OnClick="AddRow()" Height="20px" /> 
   </td> 
  </tr> 
 </table> 
</form> </table> <asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="4" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Height="180px" Style="z-index: 105; left: 674px; position: absolute;
top: 263px" Visible="False" Width="200px" OnSelectionChanged="Calendar1_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <OtherMonthDayStyle ForeColor="#808080" /> <NextPrevStyle VerticalAlign="Bottom" /> <DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" /> <TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" /> </asp:Calendar> </body> </html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
//using Logic;

public partial class _Default : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {


    }

    protected void ImageButton2_Click1(object sender, ImageClickEventArgs e)
    {
        Calendar1.Visible = true;
    }
    protected void Calendar1_SelectionChanged(object sender, EventArgs e)
    {
        this.txt_divdate.Text = Calendar1.SelectedDate.ToString("d");
        Calendar1.Visible = false;

    }

   // protected void Button1_Click(object sender, EventArgs e)
   // {

   //     this.Button1.Attributes.Add("onclick", "AddRow()");
   // }
}

Hi,

That would work for the client side part of the problem, but I assume they'll need to access the values entered into the new row from ASP.Net and that means a server side control needs to be created and persisted for each new textbox.

Freestyle Interactive Ltd | Martin on .Net

Martin Jarvis wrote:
they'll need to access the values entered into the new row from ASP.Net and that means a server side control needs to be created and persisted

Wrong.Consider this brief example of accessing the value of
javascript generated form element for which no server side
control is created nor persisted.

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    init = function(){
    for(i=0;i<3;i++){
    frm = document.forms[0];
    rdobt = document.createElement("INPUT");
    rdobt.type = "RADIO"
    rdobt.name = "radio"
    rdobt.id = "rdobt1"
    rdobt.value = i
    frm.appendChild(rdobt)
    }
}
    
    </script>
</head>
<body onload="init()">
    <form id="form1" runat="server">
    <div>
    
    
    <input type="submit" />
    </div>
    </form>
</body>
</html>

using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(IsPostBack){


            Response.Write(Request["radio"]);
        }
    }
}

Yes, you can directly create the html controls and pick the values out of the form variables. But in the original example, it clearly shows ASP.NET controls with associated server side events within the table row to create.

Using the ASP.Net server controls to persist viewstate and handle the various events would save a lot of roll-your-own code.

Freestyle Interactive Ltd | Martin on .Net

Hello friends,
I am using window.open function in order to display the page. The page pop up but fixed params i.e. height & width. However i want that it will be resizable as per the content of the page following is the code

window.open("EmpSubCert.aspx?Request_ID=" +   requestId, "attendee_popup", 'left=400,top=400,resizable=no,scrollbars=no,height=150,width=500,toolbars=no,titlebar=no');

which param i ll add in the above code such that the pop up window display entire content of the page..

modified on Wednesday, April 14, 2010 10:14 AM

Hi there,

use resizable=yes to make your popup resizable.

For additional information on how to size/presize your popup see here for example.

I want to resize the pop up window as per the content of the page means the window will auto resize as per the content. However the resizble property can be used to set the window resizable by the user/client.

Please give me suggestion.... D'Oh! | :doh:

sandympatil wrote:
Please give me suggestion....

Ok, I suggest you add an javascript to determine
the hieght and width of the document then set
the window size acordingly.

but how to determine the size of document content that pop ups Sniff | :^)

Maybe put a div around your content as container and use

document.getElementById('contentdiv').offsetWidth
document.getElementById('contentdiv').offsetHeight

in your javascript to get the size? Then resize your popup like
mentioned in the link i gave you earlier.

Hope this help a bit

Hi all,

in our production machine we hav 64 bit server with default aspnet 2.0 on IIS.
we have one application developed in 32 bit aspnet 1.1, the same we configured in IIS.

but in our aspnet 1.1 application we hav used read only property for some of the fields which works fine
in aspnet 1.1 with 32 bit machine but here in 64 bit aspnet 2.0 it doesnot work.

pls suggest me wht to do. any help will be appreciated.

Regards
Surender

No Defeat Is Final Until You Stop Trying!.......

There must be something else wrong with the application or your deployment. A read-only property will function the same in any version of the framework

I know the language. I've read a book. - _Madmatt

Thanks mark for the reply.

There is a behavior difference between ASP.NET 1.1 and 2.0: If you have a control on a page that is marked Read-Only and EnableViewState is set to false on the Page, the ReadOnly value will no longer post back in ASP.NET 2.0 - the value gets lost. This even though the value is actually returned in the POST buffer.

But if you run the same with aspnet 1.1 it works fine.

Any help would be appreciated.

regards
surender

No Defeat Is Final Until You Stop Trying!.......

Don't you think it would have been important to include these details in the original post? You first only said a property, no mention of a control and postback. Mad | :mad:

However, since you have already quoted this[^] site, then implement the fix.

I know the language. I've read a book. - _Madmatt