Custom grid styling?

Question

Hi folks,

In some screens we need to modify a default styling of application. In this case a style of grid, and grid rows (increase height of row, modify colors, etc ...)

alt text

For example, in above sample, I would like to modify: - height of row - text font modifications - other CSS properties

I have already checked demos: Demo Row And Cell Level Grid Attributes and Tutorial 39: How to use row cell level grid attributes

In application properties, we are using also custom.css, so maybe adding some styling there would help?

Thanks, Tomas

Answer 1

0

Hi Tomas,

I guess you are aiming to modify the height of the row in order to display your text having a large font size properly. If so, it's possible to do this without CSS, by setting the rowHeightPolicy attribute of the grid component as "Dynamic". Note that in this case you don't need use the rowHeightColumn attribute of the grid since the height of the row will be automatically adjusted following the font size. Also, you have to use textArea and/or textLabel components instead of the textField. You can modify the example provided in the tutorial 39 as follows;

    <grid dataSource="EMPLOYEES1" fontSizeColumn="FONTSIZE" fontColorColumn="FONTCOLOR" fontFamilyColumn="FONTFAMILY" fontStyleColumn="FONTSTYLE" backgroundColorColumn="BGCOLOR" rowHeightPolicy="Dynamic">
      <column headerLabel="FIRST NAME">
        <textArea column="FIRST_NAME"/>
      </column>
      <column headerLabel="LAST NAME">
        <textArea column="LAST_NAME" tooltipColumn="HIERARCHYTOOLTIP"/>
      </column>
      <column headerLabel="SALARY" >
        <textArea column="SALARY" backgroundColorColumn="SALARYBGCOLOR">
          <events>
            <valueChanged action="salaryChanged"/>
          </events>
        </textArea>
      </column>
    </grid>

It's possible to modify CSS properties of a grid through your custom CSS. If the example above is not sufficient for you, can you please specify the CSS properties that you would like the modify? We can prepare a better CSS example following your specification.

Best Regards, Ibrahim

link

answered 07 Nov '12, 02:42

Ibrahim Sand... ♦♦
1.5k●5
accept rate: 25%

It does not work, or we are doing something wrong.

Here is XML:

    <panel>
  <borderLayout>
    <cell docking="West" width="300">
      <grid name="grid_mechanik" editable="N" dataSource="MECHANIK1" rowHeightPolicy="Dynamic">
      <!--
        <grid name="grid_mechanik" editable="N" dataSource="MECHANIK1" rowHeightColumn="ROWHEIGHT" rowHeightPolicy="Dynamic">
        -->
        <column headerLabel="Meno" width="300">
          <textField font-style="Bold" font-size="20" tooltip="Vyber svoje meno" column="MENO">
            <events>
              <click action="mechanikEdit"/>
            </events>
          </textField>
        </column>
      </grid>
    </cell>
    <cell docking="Center">
      <include panelName="mechanikDetailsPanel"/>
    </cell>
  </borderLayout>
</panel>

Query:

select OBJECT_ID,PRIEZVISKO ||' '|| MENO ||DECODE(TITUL, null,null,',' || TITUL) as meno , pin PIN, 30 rowheight
  from ZAMESTNANEC
 where pozicia in (select object_id 
                     from ciselnik 
                    where typ='PRAC_POZICIA' 
                      and kod='MECHANIK')

(07 Nov '12, 04:25) Tomeo

Hi Tomas,

textField component does not adjust its size to fit the height of the row. You have to use textArea (or textLabel) instead of the textField component when rowHeightPolicy="Dynamic".

  <panel>
  <borderLayout>
    <cell docking="West" width="300">
      <grid name="grid_mechanik" editable="N" dataSource="MECHANIK1" rowHeightPolicy="Dynamic">
      <!--
        <grid name="grid_mechanik" editable="N" dataSource="MECHANIK1" rowHeightColumn="ROWHEIGHT" rowHeightPolicy="Dynamic">
        -->
        <column headerLabel="Meno" width="300">
          <textArea font-style="Bold" font-size="20" tooltip="Vyber svoje meno" column="MENO">
            <events>
              <click action="mechanikEdit"/>
            </events>
          </textArea>
        </column>
      </grid>
    </cell>
    <cell docking="Center">
      <include panelName="mechanikDetailsPanel"/>
    </cell>
  </borderLayout>
</panel>

Hope this helps, Ibrahim

(07 Nov '12, 04:49) Ibrahim Sand... ♦♦

Hi Ibrahim,

thanks, this solved what we needed for now. But an demo with CSS modifications would be also useful.

Thanks, Tomas

(07 Nov '12, 05:10) Tomeo

Is it possible to hide grid's header?

How can I display a grid without a header?

(27 Nov '12, 05:37) Tomeo

You can set headerVisible attribute to "N" design time. It also has a api named api_component.setGridHeaderVisible if you want to set at runtime.

(27 Nov '12, 05:51) oskansavli ♦♦

Thanks, I just somehow missed it.

(27 Nov '12, 05:57) Tomeo

Hi Oskan, thanks for the answer.

Now, an additional task :-). Please see below picture. How can I set a height of buttons in grid? (action button 1 and 2). I would like to set a height of grid button to match a row height.

Is it possible? How?

alt text

    </grid>
  </cell>
</row>

(27 Nov '12, 13:53) Tomeo

Currently it is not possible, we will consider it for later versions. For now, you can use this custom javascript code if you like:

GridColumn.prototype.isMultiRow_deprecate = GridColumn.prototype.isMultiRow;
GridColumn.prototype.isMultiRow = function() {
    return this.isMultiRow_deprecate() || this.type == BDF_XMLConstant.tagButton;
}

Just include this script in main.jsp file after fs-all.js. It will override the old behavior as you wanted. But we can not add this to formspider in v1.2.

When testing this script in IE i saw a css issue, so you may also need to add a custom css class to eighter default.css or your own css file if you use any. Here it is:

.ext-ie .bdf-grid .x-grid3-cell-selected .bdf-button {
    background-color: f8f8f8 !important;
}

(28 Nov '12, 05:49) oskansavli ♦♦

showing 5 of 8 show 3 more comments

Custom grid styling?

Follow this question

Related questions