I have 6 textboxes. How to calculate the total of value entered by users. Users need to enter quantity in each textbox and then it will calculate with price that already display or show in label (quantity*price). The result will be showed in textbox readonly. Is it I need to use JavaScript? Can it be done by that?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.form-input {
font-size: 13px;
box-sizing: border-box;
width: 17%;
height: 23px;
padding-left: 2px;
padding-right: 2px;
color: #333333;
text-align: center;
border: 1px solid #d6d6d6;
border-radius: 4px;
background: white;
outline: none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2> Product </h2>
<table>
<tr>
<th> Item </th>
<th> Part Number </th>
<th> Part Name </th>
<th> Quantity </th>
<th> Price (USD) </th>
<th> Price (USD) </th>
</tr>
<tr>
<th> 1 </th>
<th> 485-3AB</th>
<th> Light ring </th>
<th> <asp:TextBox ID="txtbox1" runat="server" class="form-input"></asp:TextBox> </th>
<th> <asp:Label ID="Label1" runat="server" Text="16.30"></asp:Label> </th>
<th> <asp:TextBox ID="txtTotal1" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
</tr>
<tr>
<th> 2 </th>
<th> 985-BB</th>
<th> Charger </th>
<th> <asp:TextBox ID="txtbox2" runat="server" class="form-input"></asp:TextBox> </th>
<th> <asp:Label ID="Label2" runat="server" Text="6.50"></asp:Label> </th>
<th> <asp:TextBox ID="txtTotal2" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
</tr>
<tr>
<th> 3 </th>
<th> 785-NM </th>
<th> Light Ring 3xl </th>
<th> <asp:TextBox ID="txtbox3" runat="server" class="form-input"></asp:TextBox> </th>
<th> <asp:Label ID="Label3" runat="server" Text="20.50"></asp:Label> </th>
<th> <asp:TextBox ID="txtTotal3" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
</tr>
<tr>
<th> 4 </th>
<th> M5-133 </th>
<th> Cable Type A </th>
<th> <asp:TextBox ID="txtbox4" runat="server" class="form-input"></asp:TextBox> </th>
<th> <asp:Label ID="Label4" runat="server" Text="3.10"></asp:Label> </th>
<th> <asp:TextBox ID="TextBox4" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
</tr>
<tr>
<th> 5 </th>
<th> M5-658 </th>
<th> Cable Type C </th>
<th> <asp:TextBox ID="txtbox5" runat="server" class="form-input"></asp:TextBox> </th>
<th> <asp:Label ID="Label5" runat="server" Text="3.90"></asp:Label> </th>
<th> <asp:TextBox ID="TextBox5" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
</tr>
<tr>
<th> 6 </th>
<th> 563-7A-8 </th>
<th> Tripod </th>
<th> <asp:TextBox ID="txtbox6" runat="server" class="form-input"></asp:TextBox> </th>
<th> <asp:Label ID="Label6" runat="server" Text="26.40"></asp:Label></th>
<th> <asp:TextBox ID="TextBox6" runat="server" class="form-input" ReadOnly="true"></asp:TextBox> </th>
</tr>
</table>
<asp:Button ID="Submitbtn" runat="server" Text="Submit" OnClick="Submitbtn_Click" />
</div>
</form>
</body>
</html>
you could use this for the button click code:
Protected Sub Submitbtn_Click(sender As Object, e As EventArgs)
txtTotal1.Text = Nz(txtbox1.Text, 0) * Nz(Label1.Text, 0)
txtTotal2.Text = Nz(txtbox2.Text, 0) * Nz(Label2.Text, 0)
txtTotal3.Text = Nz(txtbox3.Text, 0) * Nz(Label3.Text, 0)
TextBox4.Text = Nz(txtbox4.Text, 0) * Nz(Label4.Text, 0)
TextBox5.Text = Nz(txtbox5.Text, 0) * Nz(Label5.Text, 0)
TextBox6.Text = Nz(txtbox6.Text, 0) * Nz(Label6.Text, 0)
End Sub
Public Function Nz(ByVal Value As Object, Optional ByVal MyDefault As Object = "") As Object
If Value Is Nothing OrElse IsDBNull(Value) OrElse Value = "" Then
Return MyDefault
Else
Return Value
End If
End Function
Related
So, I tried to fill in a ItemRepeater inside a table. But I think there is some kind of error, in the indentation. Code is like this:
<div class="card-body border-bottom bg-white">
<asp:UpdatePanel ID="upFromHome" runat="server">
<ContentTemplate>
<asp:ListView ID="lsHome" runat="server">
<LayoutTemplate>
<div class="col">
<table runat="server" id="tableHome" class="table-bordered table-striped mb-0 table table-responsive">
<thead>
<tr style="text-align: center; font-size: 12px;">
<th scope="col">Employee Id</th>
<th scope="col">Type</th>
<th scope="col">Day</th>
<th scope="col">Month</th>
<th scope="col">Year</th>
<th scope="col">Status</th>
</tr>
</thead>
<tr runat="server" id="itemPlaceholder">
</table>
</LayoutTemplate>
<ItemTemplate> //error is here
<tbody>
<tr runat="server" style="text-align: center; background-color: white; font-size: 11px;">
<th runat="server" style="text-align: center;">
<asp:Label ID="lblUsername" runat="server" Text='<%#Eval("username") %>'></asp:Label></th>
<th runat="server" style="text-align: center;">
<asp:Label ID="lblTipo" runat="server" Text='<%#Eval("tipo") %>' /></th>
<td runat="server" style="text-align: left;">
<asp:Label ID="lblDay" runat="server" Text='<%#Eval("fecha") %>' /></td>
<td runat="server" style="text-align: left;">
<asp:Label ID="lblMes" runat="server" Text='<%#Eval("regHorario") %>' /></td>
<td runat="server" style="text-align: left;">
<asp:Label ID="lblAno" runat="server" Text='<%#Eval("status") %>' /></td>
<td runat="server" style="text-align: center;">
<asp:Button runat="server" ID="status1" class="btn btn-success" Text="Approved" /></td>
</tr>
</tbody>
</ItemTemplate>
</asp:ListView>
</div>
</div>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
But even tho, the code behind in asp works well... I am getting an error in the frontend. This is the error:
System.Web.UI.HtmlControls.HtmlTableCellCollection debe tener elementos de tipo 'System.Web.UI.HtmlControls.HtmlTableCell'. 'ItemTemplate' es de tipo 'System.Web.UI.HtmlControls.HtmlGenericControl'.
Apparently it is misplaced in some div node, but this is the first time I am getting this error.
You started an ItemTemplate without first declaring the table. So:
<ItemTemplate> //error is here
<tbody>
<tr runat="server" style="text-align: center; background-color: white; font-size: 11px;">
the correct thing is to declare the table first:
<ItemTemplate> //error is here
<table>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr runat="server" style="text-align: center; background-color: white; font-size: 11px;">
</tr>
...
</tbody>
</table>
I have a repeater but I know that what I've written will repeat the titles at the start of each row. I can't figure out how to update the layout so that the titles of Event, Target Day(s) and Performed Day appear vertically at the start of each row and its just the columns with the evaluated columns that repeat.
<div class="contentContainer">
<asp:HiddenField ID="hidColumnWidth" runat="server" />
<table class="dataTable fullWidth">
<tr>
<td>
<asp:Repeater ID="repTimedPathway" runat="server">
<HeaderTemplate>
<table class="fullWidth dataTable">
<tr>
<td><asp:Label runat="server" ID="lblTimedPathwayName" /></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style='background-color:#00599B; color:white; font-size: 1.0em; border: solid 1px #000000; width: 15%;'>Event</td>
<td><%# System.Web.HttpUtility.HtmlEncode(Eval("EventTypeName")) %></td>
</tr>
<tr>
<td style='background-color:#00599B; color:white; font-size: 1.0em; border: solid 1px #000000;'>Target Day(s)</td>
<td><%#Eval("TargetDays") %></td>
</tr>
<tr>
<td style='background-color:#00599B; color:white; font-size: 1.0em; border: solid 1px #000000;'>Performed Day</td>
<td><%#Eval("PerformedDay") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table><br />
</FooterTemplate>
</asp:Repeater>
</td>
</tr>
</table>
</div>
How to fix header and sub-Header when scroll-up or down of Repeater i am trying with CSS (style) Ref. link(https://www.aspdotnet-suresh.com/2015/03/aspnet-scrollable-repeater-control-with-fixed-column-header-using-css-in-csharp-vbnet.html) and that is work properly for single header but not for sub-header, is there any way to do this?
Repeater
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("table").prepend("<tr style=' color: white; background-color: #9494b9;'> <th>Column 1</th><th colspan='2'>Column 2</th><th colspan='2'>Column 3</th></tr>")
})
</script>
<style type="text/css">
#rpttable tr td
{
max-height:10%;
}
table {
border-collapse: collapse;
text-align: center;
}
</style>
<asp:Repeater ID="rptDrugs" runat="server" >
<HeaderTemplate>
<table border="1" id="rpttable">
<tr style=" color: white; background-color: #9494b9;">
<th scope="col" style="width: 80px"> </th>
<th scope="col" style="width: 80px">Dosage
</th>
<th scope="col" style="width: 120px">Drug
</th>
<th scope="col" style="width: 100px">Patient
</th>
<th scope="col" style="width: 100px">Date
</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text="" />
</td>
<td>
<asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("Dosage") %>' />
</td>
<td>
<asp:Label ID="lblContactName" runat="server" Text='<%# Eval("Drug") %>' />
</td>
<td>
<asp:Label ID="lblCountry" runat="server" Text='<%# Eval("Patient") %>' />
</td>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Date") %>' />
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
CS
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("Dosage", typeof(int));
table.Columns.Add("Drug", typeof(string));
table.Columns.Add("Patient", typeof(string));
table.Columns.Add("Date", typeof(DateTime));
// Here we add five DataRows.
table.Rows.Add(25, "Indocin", "David", DateTime.Now);
table.Rows.Add(50, "Enebrel", "Sam", DateTime.Now);
table.Rows.Add(10, "Hydralazine", "Christoff", DateTime.Now);
table.Rows.Add(21, "Combivent", "Janet", DateTime.Now);
table.Rows.Add(100, "Dilantin", "Melanie", DateTime.Now);
rptDrugs.DataSource = table;
rptDrugs.DataBind();
}
I have a gridview which is working fine (i.e. it is loading 4 rows) with bound controls. this grid view has 4 rows:
Ex: <asp:BoundField HeaderText="Classification" DataField="ClassType" />
but when I changed the gridview with itemtemplate then my gridview is loading 4 times
Structure:-
Gridview
- template field
-- Item template
<%# Eval("ClassType")%>
on code behind I am loading this via: (on page_load)
gvResultSet.DataSource = ds.Tables[0];
gvResultSet.DataBind();
Code
<asp:GridView ID="gvResultSet" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table class="tb">
<thead>
<tr>
<th>
Classification
</th>
</tr>
</thead>
<tbody>
<tr class="record">
<td>
<%# Eval("ClassType")%>
</td>
</tr>
</tbody>
</table>
</ItemTemplate>
</asp:TemplateField>
Set gridview's property AutoGenerateColumns="false". This will solve your issue.
Update
My Recommendation is to use Repeater Control.
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table class="tb">
<thead>
<tr>
<th>
Status
</th>
<th>
Name
</th>
<th>
Start Time
</th>
<th class="date">
End Time
</th>
<th>
MAX Date found
</th>
<th>
Classification
</th>
<th class="last">
Read Description
</th>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr class="record">
<td>
<div class="toggle enabled">
</div>
</td>
<td class="overflow">
<%# Eval("Name")%>
</td>
<td class="overflow">
12/23/2014 6:20:47
</td>
<td>
12/23/2014 6:27:21
</td>
<td class="date">
12/23/2014
</td>
<td>
<%# Eval("ClassType")%>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</tbody> </table>
</FooterTemplate>
</asp:Repeater>
It would be much simpler this way
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" CssClass="tb">
<Columns>
<asp:TemplateField HeaderText="Classification">
<ItemTemplate><%# Eval("ClassType")%></ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="record" />
</asp:GridView>
If you want header inside th, do this after DataBind
gvResultSet.DataBind();
gvResultSet.HeaderRow.TableSection = TableRowSection.TableHeader;
I am a new ASP.NET developer and I am facing a weired problem with the style of the ListView. The style was working well but now I can't see the last column from the right side and I don't know why as shown in this snapshot:
Here's my original code:
<asp:ListView ID="All_ListView" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div ><table id="thetable" cellpadding="4px" cellspacing="1px" style="margin:0px 0px 0px 0px; border:2px solid #003366; font-size:13px; font-weight:bold;">
<thead>
<tr style="background-color:#C6D7B5;">
<%--<th style="border-right:2px solid white;border-bottom:2px solid #003366; ">LL No.</th>--%>
<th style="border-bottom:2px solid #003366; ">
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="chkBoxPosition" OnCheckedChanged="CheckBoxHeader_All" AutoPostBack="true" />
</th>
<th style="border-bottom:2px solid #003366; ">Title</th>
<th style="border-bottom:2px solid #003366; ">Description</th>
<th style="border-bottom:2px solid #003366; ">Type</th>
<th style="border-bottom:2px solid #003366; ">Username</th>
<th style="border-bottom:2px solid #003366; ">Name</th>
<th style="border-bottom:2px solid #003366; ">Division</th>
<th style="border-bottom:2px solid #003366; ">Submitted Date</th>
<th style="border-bottom:2px solid #003366; ">Status</th>
</tr>
</thead>
<tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
</table></div>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="CheckBox2" runat="server" />
</td>
<td>
<asp:Label runat="server" ID="lblTitle" Text='<%#Eval("Title") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDescription" Text='<%#Eval("Description")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblType" Text='<%#Eval("Type")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblUsername" Text='<%#Eval("Username") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblName" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDivision" Text='<%#Eval("DivisionShortcut") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblSubmittedDate" Text='<%#Eval("DateSubmitted")%>'></asp:Label>
</td>
<td>
<asp:LinkButton runat="server" ID="lnkSuggestionStatus" Text='<%#Eval("Status")%>'
OnClick="lnkSuggestionStatus_Click">
</asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
I changed the width of the second column that takes most of the area of the list view and see what happened when I changed it
<asp:ListView ID="All_ListView" runat="server" DataKeyNames="ID" DataSourceID="SqlDataSource1">
<LayoutTemplate>
<div ><table id="thetable" cellpadding="4px" cellspacing="1px" style="margin:0px 0px 0px 0px; border:2px solid #003366; font-size:13px; font-weight:bold;">
<thead>
<tr style="background-color:#C6D7B5;">
<%--<th style="border-right:2px solid white;border-bottom:2px solid #003366; ">LL No.</th>--%>
<th style="border-bottom:2px solid #003366; ">
<asp:CheckBox ID="CheckBox1" runat="server" CssClass="chkBoxPosition" OnCheckedChanged="CheckBoxHeader_All" AutoPostBack="true" />
</th>
<th style="border-bottom:2px solid #003366; ">Title</th>
<th style="border-bottom:2px solid #003366; ">Description</th>
<th style="border-bottom:2px solid #003366; ">Type</th>
<th style="border-bottom:2px solid #003366; ">Username</th>
<th style="border-bottom:2px solid #003366; ">Name</th>
<th style="border-bottom:2px solid #003366; ">Division</th>
<th style="border-bottom:2px solid #003366; ">Submitted Date</th>
<th style="border-bottom:2px solid #003366; ">Status</th>
</tr>
</thead>
<tbody><tr id="itemPlaceholder" runat="server"></tr></tbody>
</table></div>
</LayoutTemplate>
<ItemTemplate>
<tr>
<td>
<asp:CheckBox ID="CheckBox2" runat="server" />
</td>
<td>
<asp:Label runat="server" ID="lblTitle" Text='<%#Eval("Title") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDescription" Text='<%#Eval("Description")%>' Width="50%"></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblType" Text='<%#Eval("Type")%>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblUsername" Text='<%#Eval("Username") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblName" Text='<%#Eval("Name") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblDivision" Text='<%#Eval("DivisionShortcut") %>'></asp:Label>
</td>
<td>
<asp:Label runat="server" ID="lblSubmittedDate" Text='<%#Eval("DateSubmitted")%>'></asp:Label>
</td>
<td>
<asp:LinkButton runat="server" ID="lnkSuggestionStatus" Text='<%#Eval("Status")%>'
OnClick="lnkSuggestionStatus_Click">
</asp:LinkButton>
</td>
</tr>
</ItemTemplate>
</asp:ListView>
Could you please help me with this displaying issue?
Hi you can try this.
int height = listView1.Items[0].Bounds.Height + listView1.Items[listView1.Items.Count - 1].Bounds.Bottom;
listView1.Size = new Size(400, height);
I suspect that your list view is inside a div, panel or some other parent control which has a fixed width,e.g 600px and since you've changed the width of the second column other columns don't have enough space to be displayed and I'm guessing no overflow has been set up on the div.
You have two options:
Remove your ListView from this parent control so it can dynamically re-size as required
Create a CSS style rule for the div to show a scroll bar if the content overflows beyond the fixed width:
CSS:
#listViewParent
{
width:600px;
float:left;
overflow:auto;
}
ASPX:
<div id="listViewParent">
Your ListView goes here
</div>