Make custom GridView look and feel like MS CRM 4.0 (Pimp my GridView – II)
2009-08-25 10:36
489 查看
Make custom GridView look and feel like MS CRM 4.0 (Pimp my GridView – II)
April 4, 2009 in Look and Feel | Tags: Customize MS CRM 4.0, GridView, JavaScript, MS CRM 4.0I’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; width:100%" id="crmGrid" cellSpacing="0" cellPadding="2"> <tr title="View records that start with this letter" style="width: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="width: 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.
相关文章推荐
- Swing在进行LookAndFeel切换时异常的解决方法
- Java中的LookAndFeel 详解
- Make bat look like txt file(使批文件看起来像文本文件)
- 示例:界面外观Examples:Look And Feel
- JFrame setDefaultLookAndFeelDecorated(true)
- 有关搜索引擎中索引问题---Nutch look and feel
- (swing读书笔记)Swing Look And Feel(1)
- MS CRM Callouts Tip - Debug and Development
- 分享个很不错的LookAndFeel
- 如何设置Java桌面程序界面外观(How to Set the Look and Feel)
- Gridview之RowCommand,ButtonField[add buttons and use the RowCommand event to add custom functionality to the control]
- Linq To xRM Issue(CRM 4.0 Online): The 'select' and 'orderBy' calls may only reference a single common entity type.
- HOW TO MAKE A TROJAN LOOK LIKE A JPG
- Why no effects when change the "Site Master Page Settings" from "Site Actions - Site Settings - Look and Feel - Master Page"?
- Java中的LookAndFeel
- 发现一个很好的JAVA LookandFeel
- Java swing皮肤(look and feel)大全
- (swing读书笔记)Swing Look And Feel(2)
- Look and Feel---JAVA界面(换肤术)
- Java Swing LookAndFeel Demo