Lock DataTable based on server code? or just client JS?

[arnieDps]

SETUP

I have a modal dialog which has a data table across the bottom 2/3 of the screen. The top third is split with static information on the left and small UI on the right.

There are command buttons in this UI: Update, Save, Clear, and Pick. Initially, the update and save buttons are hidden. Only clear and pick are visible. When you click pick another modal dialog appears which allows the user to search for a person record and "pick" it (send it back to the previous modal dialog's controller). Then the picker closes.

Then the AJAX update has the UI changing to show the Add button and a few fields related to the record being built. Once the form is completed and the user hits Add, if the insert succeeds, the backing controller does a DB refresh and the newly created row appears in the data table below.

The entire data table is initially hidden because there are no person records related to the given parent record. The last column of the data table is the Action column with a single command link: "edit". When clicked, the UI will update so that the user can update the fields on the record and Update button appears.

All is working fine.

QUESTION

What I want to know is this: When the user clicks the edit link, they are starting the UI's UPDATE mode. As part of this mode, I want to disable the entire Data Table and a few command buttons; so the user cannot click on something else until they complete the update or hit cancel.

In the case of the command buttons, there's the disabled tag. But I do not see something like that for the Data Table.

Supposedly I can do something like this with JavaScript but I'm not sure. The Data Table inherits the default disabled property but doesn't appear to respect it.

I wrote on JS that finds the DT's id and sets the disabled property to true but visually it doesn't appear to change. Further, the filter buttons in the column headers are still "active" (hover/blur still works).

It would be really REALLY nice if data table had a disabled property that could be updated via AJAX from the backing bean.

Am I missing something?

[Melloware]

I think you are overthinking it. Just add styleClass="ui-state-disabled" to your datatable and it will disable the table and all of its contents.

Code: Select all

styleClass="ui-state-disabled"

[jepsar]

If you have buttons as content of the table, you might want to have a look at the blockUI component

[arnieDps]

I'll look into that but the add/remove of the style class worked like a charm!

Thanks so much.