Building DHTML views with Internet Explorer (Page 3)

Search DominoPower's 11,437 Lotus-related article archive

Home
EasyPrint
News details

Articles-only

Twitter Feed

Building DHTML views with Internet Explorer (continued)


" class=\"Twisty\"" to the <img HTML right after the style definition (�style=\"cursor:hand\" class=�)

But wait, there's still more. We want to hide everything after this category (all the documents underneath it) initially, when the page loads, so we have to put in a <div> tag. We're also going to need to know which <div> tag to display when the twisty is clicked, so the <div> tag needs its own unique identifier. So, change your column value to:


"<img src=/icons/expand.gif id=Cat" + @Text(@DocNumber) + " style=\"cursor:hand\" class=\"Twisty\">" + Category1 + "
<div id=Cat" + @Text(@DocNumber) + "Top style=\"display:none\">"

The ID is slightly different than the image's ID, which allows us to differentiate between the two. The
is in there so documents will appear below the category. (Remember, we have to generate all the HTML here).

Now, if you were to preview this view in the browser, you may notice something. If you have more than one category, only the first one shows up. That's because we never closed the <div> tag on the first category. So, go back to the first column and at the very start of the formula, put in a "</div>" tag (the value is now "</div><img�.". Each category will then close the <div> tag from the previous category.

However, now there's a </div> tag before we even start. This needs a corresponding open <div> tag. To add this, create a $$ViewTemplateDefault form. Add the text "<div>" (without the quotes) in pass-through HTML, and then a $$ViewBody field. That's all the form needs, as the open <div> tag doesn't need any ID or anything since it's just closed right away. Now, if you would preview the view, you'll see all categories.

Adding JavaScript to the view template
However, nothing happens when you click on the twisty. Your cursor changes to a hand, but that's it. That's because we need some JavaScript on the view template. First, we want a function that will be used when a mouse click is captured. I'll give the function and then talk about what's going on:


function doOutline() {

	var srcElement = window.event.srcElement;

	if (srcElement.className == "Twisty") {

		var targetID = srcElement.id + "Top";

		var targetElement = document.all(targetID);

		if (targetElement.style.display == "none") {

			targetElement.style.display = "";

			if (srcElement.tagName == "IMG") {

				srcElement.src = "/icons/collapse.gif";

			}

		} else {

			targetElement.style.display = "none";

			if (srcElement.tagName == "IMG") {

				srcElement.src = "/icons/expand.gif";

			}

		}

	}

}