[This was originally posted at
http://timstall.dotnetdevelopersjournal.com/adding_and_removing_items_from_an_html_listbox.htm ]
ASP.Net makes things easy, like adding and removing items from an HTML listbox. The problem is that these items are stored as inner nodes... it's not just as simple as setting a value property. Therefore you modify items by modifying the DOM itself. Here's an Html page to do that. It gives each item a description and id (for lookup purposes). The methods that really matter (i.e. reuse them into your own code) are AddItem and RemoveItem. Both take a listBox object, and id, and AddItem also takes the text to display.
Note that in pure html, both the ListBox and Dropdown are created from the tag. However a ListBox has a size attribute > 1.DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head><title>title><meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1"><meta name=ProgId content=VisualStudio.HTML><meta name=Originator content="Microsoft Visual Studio .NET 7.1"> <script language="javascript"> script>head> <body MS_POSITIONING="FlowLayout"> <form id="Form1" method="post" runat="server"> <P>ID: <INPUT id="TxtId" type="text" name="Text1" runat="server" value="1234"> Text: <INPUT id="TxtContent" type="text" name="Text1" runat="server" value="ddddd">P> <P><INPUT type="button" value="Add" onclick="DoAdd()" ID="Button1" NAME="Button1"> <INPUT type="button" value="Remove" onclick="DoRemove()" ID="Button2" NAME="Button2"> P> <P><SELECT id="Select1" size="8" name="Select1" runat="server" style="WIDTH: 176px; HEIGHT: 128px"> <OPTION id="a1">aaaOPTION> <OPTION id="b1">bbbOPTION> <OPTION id="c1">cccOPTION> SELECT>P> form> body>html>
Posted by
Tim Stall
at
10:00 PM
0
comments
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Sunday, December 11, 2005
DHTML IV: Highlighting a table row or column
[This was originally posted at http://timstall.dotnetdevelopersjournal.com/dhtml_iv_highlighting_a_table_row_or_column.htm]Every now and then it's nice to do some fun UI enhancements. We can use DHTML to select a row or column of a table. We can do this by: Decide what event triggers the highlight (clicking or mouse hovering, any cell or just the header) Have a way to reference the row or column Attach the appropriate JavaScript event handler, and have it change the property of the target row or column.Highlighting rows is easy, just add the event handles to the tag and reference it with the "this." keyword: <TABLE id="Table2" cellSpacing="1" cellPadding="1" width="300" border="1"> <TR> <TD>Header 1TD> <TD>Header 2TD> <TD>Header 3TD> TR> <TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''"> <TD>aTD> <TD>bTD> <TD>cTD> TR> <TR onmouseover="this.className='SelectRow'" onmouseout="this.className=''"> <TD>dTD> <TD>eTD> <TD>fTD> TR> TABLE>Highlight columns is a little more tricky. As there isn't a "column" object (at least not to my knowledge), you need to select each cell individually. Therefore we need to add an id to each cell, and then cycle through them. Note that this doesn't interfere if you wanted to make the columns be hyperlinks, perhaps to fire off some "sort" method. If we give each cell a structured id like so: <TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1"> <TR> <TD id="td_0_a" onclick="SelectColumn('a')">Header 1TD> <TD id="td_0_b" onclick="SelectColumn('b')">Header 2TD> <TD id="td_0_c" onclick="SelectColumn('c')">Header 3TD> TR> <TR> <TD id="td_1_a">aTD> <TD id="td_1_b">bTD> <TD id="td_1_c">cTD> TR> <TR> <TD id="td_2_a">dTD> <TD id="td_2_b">eTD> <TD id="td_2_c">fTD> TR> TABLE>... then we can use JavaScript to cycle through all the cells in a column: <script language="javascript"> var strCurrentColumn = 0; var intRowCount = 3; function SelectColumn(strIndex) { //clear previous column if ( strCurrentColumn != 0 ) { for (var i = 0; i < intRowCount; i++) { document.getElementById('td_' + i + '_' + strCurrentColumn).className = ''; } } //set new column: strCurrentColumn = strIndex; for (var i = 0; i < intRowCount; i++) { document.getElementById('td_' + i + '_' + strCurrentColumn).className = 'SelectColumn'; } } script>Lastly, we could combine these two approaches such that you could select both the column and row - that might be helpful for a big table. Also, you could have some script to give alternating rows different colors too.These are all straight-forward techniques, and they may be able to make your tables a little more flashy.
Posted by
Tim Stall
at
10:00 PM
0
comments
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Wednesday, December 7, 2005
DHTML III: Detecting the mouse click and coordinates
[This was originally posted at http://timstall.dotnetdevelopersjournal.com/dhtml_iii_detecting_the_mouse_click_and_coordinates.htm]Continuing my DHTML posts (DHTML I: Intro and Positioning Text, and DHTML II: Using Hidden Divs instead of Popup windows), there are more cool things you can do, such as detecting the mouse click and its coordinates. This is useful if you're trying to make a more complex UI or perhaps even a simple game. Perhaps the best way to flush this out is with an example. Say you want to be able to click a table cell, and have a yellow dot appear where ever you clicked. You could do this by first getting the mouse coordinates, and then positioning a div tag (which holds the image for the dot) to those coordinates.Here's the code, then I'll explain it:<HTML> <HEAD> <title>DetectClicktitle> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <style> .divAbsPosition1 { z-index: 1; left: 0px; position: absolute; top: 0px; visibility:hidden; } style> <script language=javascript> script> HEAD> <body MS_POSITIONING="FlowLayout"> <form id="Form1" method="post" runat="server"> <div id="DivDot" class="divAbsPosition1"> <img src="dot.gif"> div> <table border=1> <tr> <td>Click on next cell:td> <td width=300px height=100px onmousedown="doSomething()"> Mouse coordinates: (<span id="span1">span>) td> tr> table> form> body>HTML>The cell has an onclick that triggers a JavaScript method. This method gets the window event, from which it can get the mouse click coordinates. We then simply set the div tag to that position. It's surprisingly simple. There's also a deeper discussion of this here.Of course, you could combine these three DHTML posts (positioning, visibility, and mouse clicks), and the JavaScript timer, to create simple games. For example, you could have another dot move by getting its position set by the timer, and then detect if you clicked that moving dot by comparing the mouse coordinates. There's a lot of potential.
Posted by
Tim Stall
at
10:00 PM
0
comments
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Tuesday, December 6, 2005
Changing Custom Validator Messages
[This was originally posted at http://timstall.dotnetdevelopersjournal.com/changing_custom_validator_messages.htm]Sometimes you may want to have one custom validator potentially display two different error messages depending on context. For example you may make your own date validator (perhaps to work with your own custom calendar control), and this control may first validate format ("xyz" is not a date, "12/3/2005" is), and then validate integration with the rest of the page ("Start Date occurs before End Date"). Each type of validation merits its own message. The reason you'd combine these controls is because the integration requires first performing the type validation.Ideally we could change this at both the client and the server. We can do this with ASP 1.1's validators.We can set the error message at the client via using the source.errormessage property:function ValidateStuff(source, arguments){ source.errormessage = "I changed this on the fly!"; //or source.errormessageB arguments.IsValid = false;}We can set the error message at the server via casting the source object and setting its ErrorMessage.protected void ValidateMaxLength (object source, ServerValidateEventArgs value) { ((CustomValidator)source).ErrorMessage = "This was changed at the server"; value.IsValid = false;}We can access the other error message simply by adding a attribute to the current validtor, like ErrorMessageB, and then referencing it like source.errormessageB. Check out Validation Tips for Validators for more details about this. If you have two error messages, you'll want separate properties for each of those, i.e. have messageA and messageB. Then set source.errormessage to the appropriate one. Don't store your main message in source.errormessage because it will just get overwritten when you set it with something else.Note that in order for this to show up, the error messages must be displayed in a ValidationSummary control.A sample custom validator Html might be:...ErrorMessage="CustomValidator" ErrorMessage_A = "..."ErrorMessage_B = "..." ControlToValidate="Text1" ClientValidationFunction="ValidateDate" OnServerValidate="ValidateDate"Display="None">This is just another trick for ASP.Net validators to give you some more flexibility.
Posted by
Tim Stall
at
10:00 PM
0
comments
Email ThisBlogThis!Share to XShare to FacebookShare to Pinterest
Newer Posts
Older Posts
Home
Subscribe to:
Posts (Atom)
Pages
Home
timstall.dotnetdevelopersjournal
Bio
Blog Archive
Subscribe To TimStall
Posts
Atom
Posts
All Comments
Atom
All Comments
Links
TimStall Bio
TimStall Archive
Lake County .Net Users Group
Mike Stall's Debugging Blog
Blog Archive
►
2015
(1)
►
March
(1)
►
2014
(1)
►
January
(1)
►
2013
(2)
►
September
(1)
►
February
(1)
►
2012
(14)
►
November
(1)
►
September
(1)
►
August
(1)
►
May
(3)
►
March
(2)
►
February
(1)
►
January
(5)
►
2011
(22)
►
December
(3)
►
November
(2)
►
August
(1)
►
July
(6)
►
June
(2)
►
May
(2)
►
February
(2)
►
January
(4)
►
2010
(39)
►
December
(1)
►
September
(1)
►
August
(2)
►
July
(7)
►
June
(3)
►
May
(6)
►
April
(4)
►
March
(5)
►
February
(2)
►
January
(8)
►
2009
(90)
►
December
(2)
►
November
(1)
►
October
(3)
►
September
(4)
►
August
(5)
►
July
(4)
►
June
(11)
►
May
(11)
►
April
(11)
►
March
(15)
►
February
(11)
►
January
(12)
►
2008
(101)
►
December
(8)
►
November
(8)
►
October
(4)
►
September
(10)
►
August
(13)
►
July
(15)
►
June
(10)
►
May
(9)
►
April
(5)
►
March
(6)
►
February
(2)
►
January
(11)
►
2007
(75)
►
December
(18)
►
November
(8)
►
October
(10)
►
September
(3)
►
August
(12)
►
July
(4)
►
June
(1)
►
May
(7)
►
April
(1)
►
March
(4)
►
February
(2)
►
January
(5)
►
2006
(67)
►
December
(7)
►
November
(16)
►
October
(14)
►
September
(2)
►
August
(8)
►
July
(8)
►
June
(2)
►
May
(2)
►
April
(1)
►
March
(2)
►
February
(2)
►
January
(3)
▼
2005
(95)
▼
December
(4)
Adding and Removing items from an Html ListBox
DHTML IV: Highlighting a table row or column
DHTML III: Detecting the mouse click and coordinates
Changing Custom Validator Messages
►
November
(8)
►
October
(8)
►
September
(6)
►
August
(9)
►
July
(9)
►
June
(9)
►
May
(10)
►
April
(10)
►
March
(9)
►
February
(10)
►
January
(3)
Labels
process
(48)
learning
(46)
people
(42)
coding
(40)
style
(33)
silverlight
(27)
tools
(27)
books
(24)
events
(24)
testing
(20)
management
(19)
misc
(19)
codegen
(13)
life
(10)
aspnet
(9)
javascript
(8)
sample_code
(8)
sql
(8)
businessrules
(6)
architecture
(5)
database
(5)
TFS
(4)
clr
(4)
presentation
(4)
visual_studio
(3)
xna
(3)
ajax
(2)
exceptions
(2)
jobs
(2)
metrics
(2)
recruiting
(2)
security
(2)
writing
(2)
analysis
(1)
console
(1)
graphics
(1)
regex
(1)
trivia
(1)
xml
(1)
Powered by Blogger.