I am looking for a way to display status information dynamically. As an example, suppose
you are filling out an online questionaire where each answer is selected with a radio button or some other type of button.
As you proceed through the web form answering each question, a status indicator is updated reflecting the percentage
of questions answered.
Does anyone know how this could be done? I need the status indicator to updated dynamically after each answer is selected.
For example suppose a web form has 10 questions to be answered. After the first question is answered, an asterick appears
indicating 10% of the questions have been answered. After 2 questions are answered, two asteriks would appear side by
side indicating 20% of the questions have been answered. After all questions are completed, 10 asteriks are displayed.
********* 100%
Does anyone know of a way to do this using Asp.net? I would prefer not to do this using Java Script, but if JS is the
best way to do it, I will.
It looks like a great idea. I tried it and can see the status bar in design view. But when I display the page, I get a Java script null exception error. Am I doing this correctly?
function SetStatus(value) {
debugger;
var divStatus = document.getElementById('divStatus');
divStatus.Style.Width = value + '%';
}
</script>
This looks like something I need for a project I'm working on, but I'm just starting to learn and I'm not sure how I "connect the dots " and use this in my application. Here is what I need
Raw datagrid
Col1
Col2
Col3
Data Here
Data
Here
Percentage here to 5th decimal place
…
…
…
The Col3 data should be from your bar example, here is my slightly modified one that shows your bar. I just need to "hook" it to Co13's data.
AppDevForMe
Participant
1396 Points
1327 Posts
How to create a status bar using Asp.net
Oct 26, 2009 03:23 PM|LINK
I am looking for a way to display status information dynamically. As an example, suppose
you are filling out an online questionaire where each answer is selected with a radio button or some other type of button.
As you proceed through the web form answering each question, a status indicator is updated reflecting the percentage
of questions answered.
Does anyone know how this could be done? I need the status indicator to updated dynamically after each answer is selected.
For example suppose a web form has 10 questions to be answered. After the first question is answered, an asterick appears
indicating 10% of the questions have been answered. After 2 questions are answered, two asteriks would appear side by
side indicating 20% of the questions have been answered. After all questions are completed, 10 asteriks are displayed.
********* 100%
Does anyone know of a way to do this using Asp.net? I would prefer not to do this using Java Script, but if JS is the
best way to do it, I will.
HairyMike
Member
79 Points
31 Posts
Re: How to create a status bar using Asp.net
Oct 26, 2009 03:32 PM|LINK
How about using a div (nested inside another div) then use javascript to update it? Its the easiest way - without having to postback to the server.
i.e
function SetStatus(value) { var divStatus = document.getElementById('divStatus'); divStatus.Style.Width = value + '%'; }Then when you want to change the status, use the OnClientClick event of the control;
i.e
<asp:yourcontrol id=....... OnClientClick="SetStatus(50);" />
Hope this helps
AppDevForMe
Participant
1396 Points
1327 Posts
Re: How to create a status bar using Asp.net
Oct 26, 2009 07:10 PM|LINK
It looks like a great idea. I tried it and can see the status bar in design view. But when I display the page, I get a Java script null exception error. Am I doing this correctly?
function SetStatus(value) {
debugger;
var divStatus = document.getElementById('divStatus');
divStatus.Style.Width = value + '%';
}
</script>
<form id="form1" runat="server">
<div>
<div>
<div id="divStatus" style="background-color:green;">
</div>
</div>
</div>
<p>
</p>
<p>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="SetStatus(50);" />
</p>
</form>
HairyMike
Member
79 Points
31 Posts
Re: How to create a status bar using Asp.net
Oct 26, 2009 07:36 PM|LINK
Try this out bud:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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 language="javascript" type="text/javascript"> function SetStatus(value) { var divStatus = document.getElementById('divStatus'); divStatus.style.width = value + "%"; } </script> </head> <body> <form id="form1" runat="server"> <div style="border:1px solid black;width:100%;"> <div id="divStatus" style="background-color:Green;width:20%;"> </div> </div> <br /> <br /> <asp:Button ID="Button1" runat="server" Text="Set Status" OnClientClick="SetStatus(50);return false;" /> </form> </body> </html>HairyMike
Member
79 Points
31 Posts
Re: How to create a status bar using Asp.net
Oct 26, 2009 07:43 PM|LINK
ps: you need a non-breaking space ( ) inside that nested div
AppDevForMe
Participant
1396 Points
1327 Posts
Re: How to create a status bar using Asp.net
Oct 27, 2009 04:43 PM|LINK
Awesome, thanks!
calvinkwoo30...
Member
223 Points
114 Posts
Re: How to create a status bar using Asp.net
Nov 04, 2009 09:05 AM|LINK
May i know how this should display in datagrid?
how to set the statusbar value on the datagrid?
HairyMike
Member
79 Points
31 Posts
Re: How to create a status bar using Asp.net
Nov 06, 2009 08:00 PM|LINK
Hi , you set the value in the rowbound event of your grid.. put this into a template column:
<div style="border:1px solid black;width:100%;"> <div id="divStatus" runat="server" style="background-color:Green;"> </div> </div>Then in your rowbound event:
Dim divStatus as System.Web.UI.HtmlControls.HtmlControl = e.Row.FindControl("divStatus") divStatus.Style.Item("width") = e.Row.DataItem("YourPercentageIndicator") & "px"Try it out and let us know how you get on
Calamus
Member
6 Points
5 Posts
Re: How to create a status bar using Asp.net
Dec 04, 2009 04:42 PM|LINK
This looks like something I need for a project I'm working on, but I'm just starting to learn and I'm not sure how I "connect the dots " and use this in my application. Here is what I need
Raw datagrid
Col1
Col2
Col3
Data Here
Data Here
Percentage here to 5th decimal place
…
…
…
The Col3 data should be from your bar example, here is my slightly modified one that shows your bar. I just need to "hook" it to Co13's data.
<%@ 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>Untitled Page</title> <script language="javascript" type="text/javascript"> function SetStatus(value) { var divStatus = document.getElementById('divStatus'); divStatus.style.width = value + "%"; } </script> </head> <body> <form id="form1" runat="server"> <br /> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="AccessDataSource1"> <Columns> <asp:BoundField DataField="Field3" HeaderText="Field3" SortExpression="Field3" /> <asp:BoundField DataField="Field2" HeaderText="Field2" SortExpression="Field2" /> <asp:BoundField DataField="Field1" HeaderText="Field1" SortExpression="Field1" /> </Columns> </asp:GridView> <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/don1.mdb" SelectCommand="SELECT [Field3], [Field2], [Field1] FROM [chart] ORDER BY [Field1] DESC"> </asp:AccessDataSource> <br /> <br /> <br /> <p style="line-height:0px;margin:0px;padding:0px;position:relative;left:5px;top:17px;">95.54322% </p> <div style="background-color:red;border:1px solid black;width:300px;height:30px;"> <div id="divStatus" style="background-color:Green;width:95.54322%;height:30px"> <br /> <br /> </div> </div> </div> </form> </body> </html>