Welcome Guest Search | Active Topics | Sign In | Register

Disable Grid client side Options
RBK
Posted: Wednesday, July 28, 2010 11:18:50 PM
Rank: Member
Groups: Member

Joined: 3/2/2010
Posts: 11
Hi support folks

I'm sure this is an easy one but for some reason it's just not happening.
How do I disable the Grid from Javascript so that it does not respond to any clicks?
I have tried a lot of different ways but they just don't seem to work.


Thanks!
eo_support
Posted: Thursday, July 29, 2010 8:19:48 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

There is no easy way to disable the entire Grid from JavaScript. You will need to recursively set every element's disabled to "disabled", but you also need to "remember" previous disabled state so that you can restore them later.

I would suggest you to change the Grid to read-only instead of disabled:

1. Call this method to hide any command button column:

http://doc.essentialobjects.com/library/1/jsdoc.public.gridcolumn.setvisible.aspx

2. Handle each editable column's ClientSideBeginEdit event and returns false from your JavaScript handler. That way user will not be able to enter edit mode;

With command columns removed and code in place to prevent user enters edit mode, the Grid becomes read-only even though it’s still enabled.

Hope this helps.

Thanks!
RBK
Posted: Thursday, July 29, 2010 10:23:14 AM
Rank: Member
Groups: Member

Joined: 3/2/2010
Posts: 11
Hi and thanks for the answer.
I need to prevent the user from selecting a different row. Could you help me out with how I might iterate through all the elements in the grid?
Remembering that it's disabled is no problem as I track state client side.

Thanks
eo_support
Posted: Thursday, July 29, 2010 1:22:35 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

You will not be able to prevent the user from selecting a different row when the Grid is in read only mode.

You can use our client side JavaScript API to iterate through all the items/cells. Before you begin, you will want to take a look of this topic if you are not already familiar with our JavaScript API:

http://doc.essentialobjects.com/library/1/clientapi_howto.aspx

You can then start by getting the Grid object and call methods on the object to access the Grid item and cells:

http://doc.essentialobjects.com/library/1/jsdoc.public.grid.aspx

Thanks
RBK
Posted: Thursday, July 29, 2010 10:13:05 PM
Rank: Member
Groups: Member

Joined: 3/2/2010
Posts: 11
Hi and thanks again.
Are you suggesting that by iterating through each griditem I can set each one disabled and that will prevent someone from changing the selecteditem?
Would I use .style.disabled = true ?

Thanks
eo_support
Posted: Friday, July 30, 2010 8:49:58 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Sorry I misunderstood what you meant by "could you help me out with how I might iterate through all the elements in the grid". We thought you changed your topic to something else.

Iterating all elements in the Grid has nothing to do with the Grid. You would put the Grid inside a DIV, then use getElementById get that DIV, then access childNodes on that elements to access all direct child of that DIV, for each child element you repeat this process until you reach the leaf node. It's all JavaScript and DOM access.

Thanks!
RBK
Posted: Friday, July 30, 2010 11:40:15 AM
Rank: Member
Groups: Member

Joined: 3/2/2010
Posts: 11
Hi again.

I've managed to write the code to iterate through the child nodes and disable them.
It works a treat except for the column headers.
Every grid item becomes disabled but if you hover over the columnnheader it still lights up and if you click it, it still sorts the grid.
I have a feeling you're doing something clever there ... any idea how I can stop the header sort from working on the client side?
If I can stop the sort from happening I'm happy with that as the other code disables the grid nicely.

For the sake of anyone else wondering how to do this here's my code.
It works fine in IE8 but I haven't tested it in any other browser.
I wrapped the grid in a DIV with an ID of GridHolder.

Code: JavaScript
function DisableGrid(disable) {

    // If disable = true then disable the grid otherwise enable it
    var gh = document.getElementById("GridHolder");
    DisableChildNode(gh, disable);

}

function DisableChildNode(node, disable) {

    //Disables child node and recurses through all child nodes of the child node
    for (i = 0; i <= node.childNodes.length-1; i++) {
        DisableChildNode(node.childNodes(i), disable);
       
    }
    node.disabled = disable;
}
eo_support
Posted: Friday, July 30, 2010 1:35:01 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi,

Your code looks fine except that you will want to set disabled only on element node. You also want to explicitly delcare variable "i". The final code will look like this:

Code: JavaScript
function DisableChildNode(node, disable) {
    if (node.nodeType != 1)
        return;

    //Disables child node and recurses through all child nodes of the child node
    for (var i = 0; i <= node.childNodes.length-1; i++) {
        DisableChildNode(node.childNodes(i), disable);
       
    }
    node.disabled = disable;
}
RBK
Posted: Friday, July 30, 2010 11:11:06 PM
Rank: Member
Groups: Member

Joined: 3/2/2010
Posts: 11
FANTASTIC!!!!
That works exactly how I wanted and the grid is now totally disabled.

Thanks very much ... love your product and love your support.
eo_support
Posted: Saturday, July 31, 2010 8:27:55 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Great. Glad that it works for you!


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.