This is my new favorite HTML color picker, it gives you shades lighter and darker than the one you enter, making it easier to come up with related color groupings for the UI.
The requirement was being able to highlight rows in a ASP.NET GridView when the checkbox in column 1 was checked — and turn off the highlighting when it was unchecked — on the client side.
In your GridView, have a column like this defined within the <Columns></Columns> collection:
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSel" runat="server" onclick="RowHighlighter(this)" />
</ItemTemplate>
</asp:TemplateField>
In your Script section:
function RowHighlighter(objRef) {
// objRef is the checkbox
var row = objRef.parentNode.parentNode;
if (objRef.checked) {
row.style.backgroundColor = 'yellow';
}
else {
row.style.backgroundColor = 'white';
}
That simple.
I’m gonna stash this code here, since I’m not using it in my project after all. This is a couple of simple samples of iterating over GridView rows using javascript.
Composing a comma-delimited list:
function GetSelected() {
var selected = new Array();
var index = 0;
var grid = document.getElementById('<%=grdResults.ClientID%>');
if (grid.rows.length > 0) {
for (row = 1; row < grid.rows.length; row++) {
if (grid.rows[row].cells[0].childNodes[0].checked) {
selected[index] = grid.rows[row].cells[3].innerHTML;
index++;
}
}
}
for (i = 0; i < selected.length; i++) {
selectedDocs = selectedDocs + ', ' + selected[i];
}
return selectedDocs;
}
This example is similar, with selected cell contents being used to create a JSON data object:
function GetSelectedJSON() {
var jsonString = 'DocCollection = { DocInfo: ['; beginning of structure
var index = 0;
var grid = document.getElementById('<%=grdResults.ClientID%>');
if (grid.rows.length > 0) {
for (row = 1; row < grid.rows.length; row++) {
if (grid.rows[row].cells[0].childNodes[0].checked) {
if (row > 1) {
jsonString = jsonString + ',';
}
jsonString = jsonString + '{"DocID":"' + grid.rows[row].cells[3].innerHTML +
'","DateReceived":"' + grid.rows[row].cells[4].innerHTML + '"}';
}
}
}
jsonString = jsonString + ' ]}'; wrap up the structure
return jsonString;
}
Here’s the situation: I’m getting a dataset from my business layer that contains some core columns that are always the same along with some that are variable depending on the business area being queried. On top of that, the gridview I need to build for the UI has two other columns (checkbox and button). The button fires up a Filenet viewer with context based information in the querystring. All this means that creating the gridview only in the UI designer, or only in code didn’t work terribly well. So this is what I did.
1. teach the business layer method how to parse a comma delimited field into corresponding columns in the dataset:
Dim props As String()
For Each pair As String In enttColl.ElementAt(0).DocPropertyData.Split(";")
props = pair.Split(",")
dt.Columns.Add(props(0), System.Type.GetType("System.String"))
Next
In this For Each loop, I’m parsing out the DocPropertyData to find the individual document properties within. The pattern is “XX,False,YY,True…” where the alpha portion is a code for document property followed by a boolean. There can be zero or many of these (most likely 1 or more). The alpha portion becomes the column header, added to the DataTable I created already based on the first nine fixed columns in the DataSet.
The next step is to create DataRows for each row in the DataSet and assign values to those row items. The first nine items come from the nine fixed columns in the DataSet. The remaining values come from the props array.
Dim index As Integer = 10 If Not props Is Nothing Then For Each prop In props row.Item(index) = props(1) index += 1 Next End If
Now I can pass the DataSet to my calling code (UI code behind) and see the first nine, plus the variable document property columns.
2. Next step, get all the necessary columns on the UI.
I start out by defining the fixed portion of the GridView on the UI. In code behind, I create a DataTable with matching columns. Then I loop through the DataSet I received from the Business Layer and add the document property columns to the DataTable.
For Each col As DataColumn In dsResult.Tables(0).Columns If col.Ordinal > 9 Then ' doc prop fields Dim dfield As BoundField = New BoundField() dfield.HeaderText = col.ColumnName dfield.DataField = col.ColumnName grdResults.Columns.Add(dfield) dt.Columns.Add(New DataColumn(col.ColumnName, GetType(String))) ' need to count through the props and create End If Next
Then I loop through the DataSet and assign values to those columns.
3. wire up the button field in the second column of the GridView
This was frustrating. I started out trying to do this client side, but had issues because the values I need for the query string are not available until the GridView is bound to the DataSet. I need the button click to result in a new browser window opening with the destination page (containing the Filenet viewer) and a querystring of required values.
I described the iterative process of finding a solution in my previous post, My Process… Persistent Hacking. The solution was to add an OnRowCommand event handler.
Protected Sub grdResults_RowCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewCommandEventArgs) Handles grdResults.RowCommand
If (e.CommandName = "ViewDoc") Then
Dim gvr As GridViewRow = DirectCast(DirectCast(e.CommandSource, Button).NamingContainer, GridViewRow)
Dim RowIndex As Integer = gvr.RowIndex
Dim docId As String = grdResults.Rows(RowIndex).Cells(3).Text
ClientScript.RegisterStartupScript(Page.GetType(), "", "window.open('Tabbed.aspx?docID=" + docId + "&userID=username&password=password1&pageNo=1');", True)
End If
End Sub
I’d never worked with ClientScript before and saw a lot of examples that didn’t make sense to me before I found one that did.
During my performance review the other day, I confessed to my boss, Chad Stoker, that I didn’t consider myself a particularly gifted coder, just a very persistent hacker who sometimes has flashes of insight.
Case in point, today I finally pulled all the right pieces together to make a particular feature of my code work. It was one of those situations where my specific case wasn’t anything I could find on the interwebs, so I had to figure out which pieces to borrow from various examples and solutions and apply a bit of that persistent hacking. Sounds familiar, right?
My situation:
Along the way I explored buttons, link buttons, hyperlinks, hidden fields, Javascript functions, convoluted server side code and had myself in mental knots most of yesterday. It usually is the case that when the “solution” becomes to complex to understand easily, it’s probably wrong, at least that’s what I’ve found over the years. Yesterday that smell was so strong that I seriously wasn’t sure I’d find a true solution. You know the smell is bad when you drop code you barely understand into your solution and then it breaks… and you have no idea where to start for a fix.
This morning, I managed to poke the internet in a new way and find an easily understood potential solution. I carefully commented out previous code, put the solution in place, stepped through and VOILA! It works.
My Process: try something simple. Add complexity. Find limit of initial approach. Dig around on the internet, find new approach. Start simple. Add complexity. Find limit of approach. Stabbity stabbity stabbity. Go back to internet to find new approaches, fall down rabbit hole, climb back out, feel dazed and in need of a drink or a nap or both. Take walk, talk to oneself a lot about why you’re really not good at this work. Get new idea. Start simple, add complexity, etc. Eventually find way that works, is simple and easy to understand and that won’t embarrass you when you pass the code on to maintenance staff (hopefully).
There was a lot of stabbity yesterday. Today, so far, so good.
I’m posting this to increase the number of hits a person will find when searching on this issue. My server side event handler was being hit twice each time I clicked the button on my UI.
The cause was having runat=”server” and an event handler OnClick=”DoSomething” within my button declaration on the aspx page. The solution was to remove the event handler. As long as the event handler on the server side is named correctly, your code will run, and only run once.
Example:
<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" /> 'becomes : <asp:Button ID="btnSearch" runat="server" Text="Search" />
I have not exhaustively researched all the circumstances that this kind of problem surfaces — or does not surface — in, but this is something to try if your event handling code is being run twice for each event.
I supposed I shouldn’t be surprised that I’m still sitting at the client’s office not doing any work yet. The timeline clearly says ‘get developer butts in chairs 2-3 weeks before technical specifications and architectural approval. Sadly, we’re moving into a month of sitting around waiting for actual work to begin.
I’d forgotten what an energy drain it was to wait for meaningful work.
… your project architect is out of touch with current software development tools and practices. Would you have your building designed by an architect who hadn’t kept up with construction practices, building codes and current products and materials? I would hope not. So why do clients do that with software projects?
Hoping for the best, but the current project might be more challenging then it has to be because the architect is out of the loop with regard to current software development tools and approaches. Looks like it’s going to be another ‘top from below’ situation, where the developers are the ones who actually decide what technological approaches to use to bring the project to completion. Looks like we’ll get a very broad architectural description and have to fill in all the details ourselves.
Check out WriteCodeOnline, a quick and dirty way to test snippets of JavaScript. I used it to get to know some JavaScript I was re-engineering in C#.
What a nice week I’ve had at work. My main client gave me the week off, so I’ve been working on a side project along with training and planning for the coming year.
On today’s training menu, we have TekPub’s Rob Conery talking about JavaScript. His “you already know the syntax (or should) so let’s talk about weird stuff and best practices” approach was just what I needed today. He does a great job of walking through the examples to demonstrate clearly the weirdnesses around coercion, == vs. ===, the concept of ‘falsey’, assumed globalization of variables, hoisting, namespacing, this scoping weirdness, revealed module pattern, closure, the semi-colon insertion quirk, unobtrusive JavaScript, a quick demo of CoffeeScript, wrapping it all up with a few words about testing… very few, Jasmine is recommended and there will be a video up soon, according to Rob.
He quickly instructs on how to get the JavaScript debugging features running for IE, Firefox and Chrome, then uses the Chrome tools throughout the demo. I took a moment to download Firebug and make sure I could open my demo HTMLwith JavaScript page up in each browser. Following along while Rob demoed, I mostly used Chrome, but occasionally dipped into the other browsers so I could be aware of any differences. The intermission demo was about JSFiddle. This tool has me a little excited. What a great way to try out snippets of JavaScript and JQuery and CSS before dropping them into a larger script file. I’ll definitely keep it in my toolbox. I’m also pleasantly surprised at how useful the debugging tools in Chrome/Firefox/IE are. Being able to interact with the loaded DOM directly through the console is a lot like using the Immediate window in Visual Studio, one of my favorite debugging tools.
Resources and tools mentioned:
TekPub’s Javascript: Up To Speed video
JavaScript, JavaScript, a wordpress blog by Angus Coll
Google Libraries API – Developer’s Guide
TextMate (the text editor used in this video)
