disabling entire grid?

Hi,
Is there a way to disable/enable the entire grid, i.e. freeze its image on the screen (maybe make it duller) disabling all the events?
Many thanks!

:-)

obj.setEvent("onkeydown", "");
obj.setEvent("onmousewheel", "");
obj.getTemplate("row").setEvent("onclick", "");
obj.getTemplate("top/item").setEvent("onmousedown", "");
obj.getTemplate("top/item").setEvent("onmouseenter", "");
obj.getTemplate("top/item").setEvent("onmouseleave", "");
obj.getTemplate("top/item").getContent("div").setEvent("onmousedown", "");
obj.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", "");

Alex,

Thanks much, and sorry about my silly questions - I'm new to JS, in fact, I'm also new to DOM and CSS, and OOP for that matter. I did quite a bit of C programming for DOS 10-15 years ago, and pursued other things since and until recently, except for occasional VBA.

Now more questions:
1. You showed which events I need to disable, but how do I restore the original handlers when it's time to re-enable the grid, what are the names of the functions?

2. :) Which book on DHTML and CSS would you recommend to someone like me?

3. Do you plan documentation "for the rest of us"?

Thanks again!

Sergei, no offense with the smiley - I was just thinking 'I've spent so much time coding those events and now someone wants to get rid of all of them...'

The original event handlers are not exposed, so you have to save them first:

var keydown = obj.getEvent("onkeydown");
obj.setEvent("onkeydown", "");
...

and then restore

obj.setEvent("onkeydown", keydown);
...
obj.refresh();

I cannot recommend any book on DHTML/CSS - when I started the only available reading was MSDN and I believe it is still the most useful.

Documentation - yes :-(

Thanks again!

I don't have a recommendation for an DHTML book but I do know of a very good CSS book. It's called "HTML Utolpia: Designing without tables Using CSS". It's published by SitePoint (www.sitepoint.com). I have read many books on CSS but this one seems to be the easiest to read and covers everything. I purchased another book from them, "The CSS Anthology, 101 Esential Tips, Tricks and Hacks". I haven't fully read this one yet but it looks to be more of a CSS cookbook, giving you solutions to everyday problems.

Hope this helps.

Thanks, Jim!

I tried the above code and it only seems to partially work. If I load an XML file, the grid header text and rows do not show. If I place the disable code inside a setTimeout() function with a 2000ms delay it does show -- what's the story here?

A good book to recommend would be from the O'Reilly series - "Dynamic HTML" and "Javascript".

How can I do this in Version 2 ?

I tried the code above but it doesn't work for me. I'm using v2 beta 3.

I want to disable the entire grid while I display a popup (div) for editing. However, I also allow direct editing in the grid... I just don't want the user doing both at the same time.

Does anyone know how to disable the grid in v2?

Alex was kind enough to point me here as I needed to do this. Here's what I did that works but not exactly as I figured.

if (!bEnabled)
    {
        js_qfh.js_gridList.setAction("selectionChanged", "");
        js_qfh.js_gridList.setEvent("onkeydown", "");
        js_qfh.js_gridList.setEvent("onmousewheel", "");
        js_qfh.js_gridList.getTemplate("row").setEvent("onclick", "");
        js_qfh.js_gridList.getTemplate("top/item").setEvent("onmousedown", "");
        js_qfh.js_gridList.getTemplate("top/item").setEvent("onmouseenter", "");
        js_qfh.js_gridList.getTemplate("top/item").setEvent("onmouseleave", "");
        js_qfh.js_gridList.getTemplate("top/item").getContent("div").setEvent("onmousedown", "");
        js_qfh.js_gridList.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", "");

        js_qfh.js_gridList.refresh();
    }

This works because it keeps the handler from issuing the commands to update my other frames and controls based on the one the user clicked. However, while the other controls are loading and the grid is grayed out, the user can click over other items and the row still highlights which I'd like to get rid of altogether.

Sorry if I'm asking newbie questions, but I'm just getting started on this stuff and it's kinda' complicated. Thanks again.

I'm using version 1.0.2 by the way.

only thing I can think of is placing a div over the area the grid has been placed and set a transparent.gif as it's background url. In firefox you could use a png with a alpha effect to dim the grid :)

Very creative with the image thing. I figured that would work easily since I'm already using a div section to insert the grid into. Sadly, that did not work. :(

However, here's a question I have. If I were to set an event on the row template when the grid is created, e.g.,

var row = new Active.Templates.Row;
row.setEvent("onclick", doNothing);
row.setEvent("oncontextmenu", "return false;");
row.setEvent("onmousedown", "qryToolTip(this, event)");
js_qfh.js_gridList.setRowTemplate(row);

I get the behavior I'm looking for, i.e., when I click on the grid, no selection happens. It works normally once I remove that event.

So why does this not work when I do this instead?

js_qfh.js_gridList.getTemplate("row").setEvent("onclick", ""); 
...
js_qfh.js_gridList.refresh();

I also tried using a dummy method and that did not work either.

js_qfh.js_gridList.getTemplate("row").setEvent("onclick", doNothing); 
...
js_qfh.js_gridList.refresh();

Any other ideas/workarounds? Thanks so much.

Oh, since I'm using version 1.0.2, I tried this too with no luck.

js_qfh.js_gridList.getRowTemplate().setEvent("onclick", doNothing);

the image thing should have worked you must ensure that it has top z-index else it won't recieve the click or other mouse activity. I sugest using a solid colour to start with so you know it's placed correctly

On the other bits try doing

var row = new Active.Templates.Row;
row.setEvent("onclick", function() {});
row.setEvent("oncontextmenu", function() {});
row.setEvent("onmousedown", function() {});
js_qfh.js_gridList.setRowTemplate(row);

some of these might need a return value in them not sure though

Yeah, I tried using an image that was solid for the exact purpose you mentioned. And yes, I also set the z-index specifically to a high value to ensure it's at the top and still did not work. I validated that the setting was getting set by applying a color in addition to the image and the color did cover the area but not the image for whatever reason. Very frustrating when a simple thing doesn't work.

I will give the function() {} calls a try and see how that works.

I stuck an alert("doNothing"); inside my doNothing just to see if it even gets called and it never does. I don't understand that either. I also disabled the refresh() call on the grid object on several tries since the changes are made directly on the object and no go there either.

What IS working, is that the object does not handle my function while it's disabled which is the biggest part. However, it still highlights the row and if I click fast enough on other rows, I then cannot click on anything which is the behavior I want while it's disabled.

On to more coding...Thanks J.

//Version 1.0 (FREE Edition)

function dummy()
{
}

function disableGridMaster()
{
obj.setEvent("onkeydown", dummy);
obj.getTemplate("row").setEvent("onclick",dummy);
obj.setEvent("onmousewheel", dummy);
obj.getTemplate("top/item").setEvent("onmousedown", dummy);
obj.getTemplate("top/item").setEvent("onmouseenter", dummy);
obj.getTemplate("top/item").setEvent("onmouseleave", dummy);
obj.getTemplate("top/item").getContent("div").setEvent("onmousedown", dummy);
obj.getTemplate("layout").getContent("scrollbars").setEvent("onscroll", dummy);
}
}

This piece of code worked for me perfectly (thanks Alex!). If I didn't put the "dummy" function to be called (it was a "" before), my grid would generate an error. This code didn't generate an error. Hope this helps the others..

Tnx also for this:
var keydown = obj.getEvent("onkeydown");
...

Otherwise, I would never had known how to enable the grid back with its default event handlers... :D
Cheers and more power.. Hope this helps.

regarding the getEvent()... im particularly having problems with the scrollbar..

obj.getTemplate("layout").getContent("scrollbars").getEvent("onscroll");

this is generating an error when i call this function... i think its on the widget... can you help me Alex? the code is too advanced for me.