Databases
StackOverflow2013
Postsdbo
POChange the style of a GWT CellTable dynamically, to visually mark it as disabled
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POChange the style of a GWT CellTable dynamically, to visually mark it as disabled
    primarykey
    data
    text
    <p>I'm looking for a way to dynamically change the style of a GWT CellTable at runtime. I want to make the table look "disabled" by graying the color scheme, to match up with other input fields that are disabled. Right now, I can prevent people from using the table, but they don't get any visual hint.</p> <p>I have a resource bundle to set the style of the table, like described <a href="https://code.google.com/p/google-web-toolkit/issues/detail?id=6144" rel="nofollow noreferrer">here</a> and <a href="https://stackoverflow.com/questions/7369356/celltables-and-css-gwt">here</a>:</p> <pre><code>public interface DataTableStyle extends CellTable.Resources { @Override @Source({ CellTable.Style.DEFAULT_CSS, "DataTable.css" }) CellTable.Style cellTableStyle(); } </code></pre> <p>That's passed into the constructor, and has been working fine for a while now:</p> <pre><code>public DataTable(int pageSize) { super(pageSize, getStyle()); } protected static DataTableStyle getStyle() { return GWT.create(DataTableStyle.class); } </code></pre> <p>What I can't figure out is how to dynamically adjust the style of the table at runtime. I'm not sure whether it's not possible, or whether I'm just missing something.</p> <p>I'm pretty sure that I can't change the style resources attached to the cell table once they're set. Since I can't do that, it seems like I should be able to use either <code>addStyleDependentName()</code> or <code>addStyleName()</code> in combination with additional CSS styles, but I can't figure out the right combination of changes.</p> <p>To test, I tried to override my existing definition of <code>.cellTableHeader</code>. I know that I'm targeting the right style, because if I change <code>background: #000000</code> to <code>background: magenta</code> in the original style, it works.</p> <pre><code>.cellTableHeader { background: #000000; color: #ffffff; text-shadow: none; } </code></pre> <p>One example I worked off of is <a href="https://groups.google.com/forum/#!topic/google-web-toolkit/Q1rwV4vDgy0" rel="nofollow noreferrer">here</a>. That page suggests using CSS like this:</p> <pre><code>.cellTableHeader.cellTable-disabled { background: magenta; /* just to make it obvious */ } </code></pre> <p>Then, in my code:</p> <pre><code>userTable.addStyleDependentName("disabled") </code></pre> <p>By itself, the <code>.cellTableHeader.cellTable-disabled</code> style results in a runtime error: </p> <pre><code>The following unobfuscated classes were present in a strict CssResource: cellTable-disabled Fix by adding String accessor method(s) to the CssResource interface for obfuscated classes, or using an @external declaration for unobfuscated classes. </code></pre> <p>The <a href="https://stackoverflow.com/questions/1701651/gwt-2-cssresource-how-to">recommended</a> workarounds are either to use <code>@external</code> on the style or annotate <code>@NotStrict</code> on the resource bundle. Both of those get me past the runtime error, but the style doesn't take effect. I've also tried various other things:</p> <pre><code>.cellTableHeader.disabled { background: magenta; /* just to make it obvious */ } </code></pre> <p>or </p> <pre><code>.cellTableHeader .disabled { background: magenta; /* just to make it obvious */ } </code></pre> <p>or</p> <pre><code>.cellTableHeader disabled { background: magenta; /* just to make it obvious */ } </code></pre> <p>but at this point I'm really just grasping at straws. </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USKen Pronovici
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COFor now, the way I'm working around this is to create two table/pager pairs with the same data source, within different HTMLPanels in the UI binder. Then, when I need the disabled state, I hide one HTML panel and show the other. It's a little clunky, but it at least gets me the visual hint that's necessary.
      singulars
      1. POChange the style of a GWT CellTable dynamically, to visually mark it as disabled
      1. USKen Pronovici
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload