I’m a big fan of Microsoft CRM User Interface. Whenever I’ve been asked to build custom browser based business application, I always look to MS CRM UI for inspiration.
One of my favourite component besides GridView is the alphabetic filter under the GridView. It makes finding a record in your current view so easy. Espically if you have 100 or 200 records in the Grid.
So this is what my alphabetic filter looks like.
I use a table to create the alphabatic filter row. The html below shows how that is done.
<table style="background:#e0e3e8;font-size: 11px; font-family: Tahoma; 100%" id="crmGrid" cellSpacing="0" cellPadding="2">
<tr title="View records that start with this letter" style="100%">
<td title="View all records" style="FONT-WEIGHT: normal; COLOR:#000000; height: 17px;" noWrap width="5%" id="All" onMouseOver="BoldText('All');" onMouseout="NormalText('All');" onclick="FilterClick('All');">All</td>
<td title="View records that start with numbers from 0 to 9" style=" 18px; height: 17px;" id="#" onMouseOver="BoldText('#');" onMouseout="NormalText('#');" onclick="FilterClick('#');">#</td>
<td id="A" onMouseOver="BoldText('A');" onMouseout="NormalText('A');" onclick="FilterClick('a');">A</td>
<td ID="b" style="height: 17px" onMouseOver="BoldText('B');" onMouseout="NormalText('B');" onclick="FilterClick('b');">B</td>
<td ID="c" style="height: 17px" onMouseOver="BoldText('c');" onMouseout="NormalText('c');" onclick="FilterClick('c');">C</td>
<td ID="d" style="height: 17px" onMouseOver="BoldText('d');" onMouseout="NormalText('d');" onclick="FilterClick('d');">D</td>
<td ID="e" style="height: 17px" onMouseOver="BoldText('e');" onMouseout="NormalText('e');" onclick="FilterClick('e');">E</td>
<td ID="f" style="height: 17px" onMouseOver="BoldText('f');" onMouseout="NormalText('f');" onclick="FilterClick('f');">F</td>
<td ID="g" style="height: 17px" onMouseOver="BoldText('g');" onMouseout="NormalText('g');" onclick="FilterClick('g');">G</td>
<td ID="h" style="height: 17px" onMouseOver="BoldText('h');" onMouseout="NormalText('h');" onclick="FilterClick('h');">H</td>
<td ID="i" style="height: 17px" onMouseOver="BoldText('i');" onMouseout="NormalText('i');" onclick="FilterClick('i');">I</td>
<td ID="j" style="height: 17px" onMouseOver="BoldText('j');" onMouseout="NormalText('j');" onclick="FilterClick('j');">J</td>
<td ID="k" style="height: 17px" onMouseOver="BoldText('k');" onMouseout="NormalText('k');" onclick="FilterClick('k');">K</td>
<td ID="l" style="height: 17px" onMouseOver="BoldText('l');" onMouseout="NormalText('l');" onclick="FilterClick('l');">L</td>
<td ID="m" style="height: 17px" onMouseOver="BoldText('m');" onMouseout="NormalText('m');" onclick="FilterClick('m');">M</td>
<td ID="n" style="height: 17px" onMouseOver="BoldText('n');" onMouseout="NormalText('n');" onclick="FilterClick('n');">N</td>
<td ID="o" style="height: 17px" onMouseOver="BoldText('o');" onMouseout="NormalText('o');" onclick="FilterClick('o');">O</td>
<td ID="p" style="height: 17px" onMouseOver="BoldText('p');" onMouseout="NormalText('p');" onclick="FilterClick('p');">P</td>
<td ID="q" style="height: 17px" onMouseOver="BoldText('q');" onMouseout="NormalText('q');" onclick="FilterClick('q');">Q</td>
<td ID="r" style="height: 17px" onMouseOver="BoldText('r');" onMouseout="NormalText('r');" onclick="FilterClick('r');">R</td>
<td ID="s" style="height: 17px" onMouseOver="BoldText('s');" onMouseout="NormalText('s');" onclick="FilterClick('s');">S</td>
<td ID="t" style="height: 17px" onMouseOver="BoldText('t');" onMouseout="NormalText('t');" onclick="FilterClick('t');">T</td>
<td ID="u" style="height: 17px" onMouseOver="BoldText('u');" onMouseout="NormalText('u');" onclick="FilterClick('u');">U</td>
<td ID="v" style="height: 17px" onMouseOver="BoldText('v');" onMouseout="NormalText('v');" onclick="FilterClick('v');">V</td>
<td ID="w" style="height: 17px" onMouseOver="BoldText('w');" onMouseout="NormalText('w');" onclick="FilterClick('w');">W</td>
<td ID="x" style="height: 17px" onMouseOver="BoldText('x');" onMouseout="NormalText('x');" onclick="FilterClick('x');">X</td>
<td ID="y" style="height: 17px" onMouseOver="BoldText('y');" onMouseout="NormalText('y');" onclick="FilterClick('y');">Y</td>
<td ID="z" style="height: 17px" onMouseOver="BoldText('Z');" onMouseout="NormalText('Z');" onclick="FilterClick('z');">Z</td>
</tr>
</table>
The Id of each cell is very important. And I will explain in a bit. Note that I use three JavaScript functions in each row. 1st is the fuction that makes the alphabet bold when you hover the mouse over it, the 2nd is the one that makes it normal of mouse out and the last one is the one that filters the grid.
The code of the javascript functions below.
function BoldText(id) {
if (document.getElementById) {
document.getElementById(id).style.fontWeight = 'bold';
document.getElementById(id).style.color = '#000000';
}
else if (document.all) {
document.all[id].style.fontWeight = 'bold';
}
}
function NormalText(id) {
if (document.getElementById) {
if(document.getElementById(id).style.color != '#000088'){
document.getElementById(id).style.color = '#000000';
document.getElementById(id).style.fontWeight = 'normal';
}
}
else if (document.all) {
document.all[id].style.fontWeight = 'normal';
}
}
function FilterClick(id) {
if (document.getElementById) {
document.getElementById('All').style.fontWeight = 'normal';
document.getElementById('#').style.fontWeight = 'normal';
document.getElementById('A').style.fontWeight = 'normal';
document.getElementById('b').style.fontWeight = 'normal';
document.getElementById('c').style.fontWeight = 'normal';
document.getElementById('d').style.fontWeight = 'normal';
document.getElementById('e').style.fontWeight = 'normal';
document.getElementById('f').style.fontWeight = 'normal';
document.getElementById('g').style.fontWeight = 'normal';
document.getElementById('h').style.fontWeight = 'normal';
document.getElementById('i').style.fontWeight = 'normal';
document.getElementById('j').style.fontWeight = 'normal';
document.getElementById('k').style.fontWeight = 'normal';
document.getElementById('l').style.fontWeight = 'normal';
document.getElementById('m').style.fontWeight = 'normal';
document.getElementById('n').style.fontWeight = 'normal';
document.getElementById('o').style.fontWeight = 'normal';
document.getElementById('p').style.fontWeight = 'normal';
document.getElementById('q').style.fontWeight = 'normal';
document.getElementById('r').style.fontWeight = 'normal';
document.getElementById('s').style.fontWeight = 'normal';
document.getElementById('t').style.fontWeight = 'normal';
document.getElementById('u').style.fontWeight = 'normal';
document.getElementById('v').style.fontWeight = 'normal';
document.getElementById('w').style.fontWeight = 'normal';
document.getElementById('x').style.fontWeight = 'normal';
document.getElementById('y').style.fontWeight = 'normal';
document.getElementById('z').style.fontWeight = 'normal';
document.getElementById(id).style.fontWeight = 'bold';
document.getElementById(id).style.color= '#000088';
var button = document.getElementById("FilterClickButton");
button.innerText = id;
button.click();
}
}
Look closely at the last function and you will see that in the last 3 lines I get a reference to a asp.net button (The button is not visible on the page), set the text to be the ID of the alphabet that the user clicks to the text of the button and then finally I call the click event of the asp.net button. I do this so that in the code behind I can check which alaphabet was clicked and what alphabet I need to filter the grid on.