|
|
|
|
|
|
|
|
|
|
|
|
|
|
Advanced building of DHTML views with Internet Explorer (continued)
"</div></div><img src=/icons/expand.gif name=Img" + @Text(@DocNumber) + " id=Cat" + @Text(@DocNumber) + " style=\"cursor:hand\" class=\"Twisty\">" + Category1 + "
<div id=Cat" + @Text(@DocNumber) + "Top style=\"display:none\"><div>"
|
And the second column has a value of:
"</div> <img src=/icons/expand.gif name=Img" + @Text(@DocNumber) + " id=Cat" + @Text(@DocNumber) + " style=\"cursor:hand;\" class=\"Twisty\">" + Category2 + "
<div id=Cat" + @Text(@DocNumber) + "Top style=\"display:none;\">"
|
You may have noticed that I added a "Name=" to the images. I'll explain why I did this a little later. I also indented the second category a couple of spaces. Remember, we can't rely on the server to do any of that for us. We have to generate our own HTML.
OK, try it out (remember to put the extra <div> on the view template). It works pretty well with one exception. If you have a subcategory expanded and then you collapse the top-level category, everything is hidden. But when you expand the top-level category again, the sub-category is expanded. This isn't the way the Notes client works, and I, personally, would rather have the DHTML view function the same way. So let's take care of that.
Fixing collapsing categories
Knowing the way subcategory numbers are indented, it's pretty easy to visualize how we want to do this. If we're collapsing @DocNumber 2, then we want to collapse 2.1 (if it's expanded) and 2.2, etc. Since there could be many, many subcategories, the best way to do this is to have a JavaScript array of all the category numbers. Then, we can go through the numbers when we want to collapse a top-level category and see if there are any subcategories under this top-level. If there are, collapse those if they're expanded.
OK, so we need an array of category names. We'll want to build this array after the document is loaded. So, in the HTML Body Attributes on your $$ViewTemplate, call a function. To do this, enter the following value in the HTML Body Attributes value on your form:
"onLoad=\"buildArrayOfTags()\""
|
(Again, the \" means a literal quote). The "buildArrayOfTags" function will be called when the form loads. Now, we just need that function which will go into the JS Header section of your view template:
var tagNames = new Array();
var imgNames = new Array();
function buildArrayOfTags() {
for (var i = 0; i < document.images.length; i++) {
if (document.images[i].src.indexOf("/icons/expand.gif") != -1) {
var imgName = document.images[i].name;
imgNames[imgNames.length++] = imgName;
tagNames[tagNames.length++] = "Cat" + imgName.substring(3, imgName.length);
}
}
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- Advertisement --
Sophisticated Meets Simple For Document Management
Share. Control. Manage.
Documents, emails, and content in the context of how work is done.
Native to Lotus Domino. The User Experience unseen for Lotus Domino.
Do more with less. Really.
See the possibilities Docova unleashes for Lotus Domino. |
-- Advertisement --
Mark your calendar for in-depth Lotus training, May 12-14, Boston
Join experts and peers May 12-14 in Boston for educational and networking events that deliver real-world Lotus training so you can increase productivity and efficiency in your company, advance your skills, and squeeze the most from your current environment. One registration gets you into THE VIEW's Admin2010 and Lotus Developer2010.
Register by April 10 to save $200. |
|
|
|
|
|
|
|
|
|
|
