how to remove blank.gif from every ListGrid cell?

[adammazur]

Is is possible to remove "<div><img blank.gif></div>" which is added to every cell in ListGrid?

Here is html code of sample cell:

<td class="tallCell" height="" align="left" style="height: 27px; width: 125px; overflow: hidden;">
    <div style="overflow: hidden; width: 121px;" cellclipdiv="true" role="presentation">
        cell data
        <div>
            <img height="2" border="0" width="1" align="TEXTTOP" suppress="TRUE" src="http://localhost/seed/pages/seed/sc/skins/Enterprise/images/blank.gif">
        </div>
    </div>
</td>

My ListGrid parameters are:

        this.setWidth100();
        this.setHeight100();
        this.setMinFieldWidth(70);
        this.setGroupStartOpen(GroupStartOpen.ALL);
        this.setShowHeaderContextMenu(false);
        this.setShowRollOverCanvas(false);
        this.setCanFreezeFields(false);
        this.setSelectionType(SelectionStyle.NONE);
        this.setWrapCells(true);
        this.setScrollRedrawDelay(50);
        this.setHeaderHeight(40);
        this.setAutoFitWidthApproach(AutoFitWidthApproach.BOTH);
        this.setHeaderSpanHeight(20);
        this.setCanDragSelect(false);
        this.setFastCellUpdates(false);
        this.setGroupByMaxRecords(10000);
        this.setDataFetchMode(FetchMode.LOCAL);
        this.setEnforceVClipping(true);
        this.setShowAllRecords(false);
        this.setDrawAheadRatio(1000f);
        this.setResizeFieldsInRealTime(false);
        this.setCanEdit(false);
        this.setAlternateRecordStyles(false);
        this.setCanReorderFields(false);
        this.setCanReorderRecords(false);
        this.setCellHeight(25);
        this.setCanSort(false);
        this.setFixedRecordHeights(true);
        this.setShowRecordComponents(true);
        this.setShowRecordComponentsByCell(true);
        this.setRecordComponentPosition(EmbeddedPosition.WITHIN);
        this.setRecordComponentPoolingMode(RecordComponentPoolingMode.DATA);
        this.setShowTreeColumnPicker(false);

SmartClient Version: SNAPSHOT_v8.3d_2012-05-28/LGPL Development Only (built 2012-05-28)

FF 11, IE 8

[Isomorphic]

These images are placeholders in the DOM for your record components, needed to cause the table cells to size properly, since the record components are actually floated on top of the cells, not truly embedded in the cells.

There is no way to eliminate them without breaking the functionality you are using.

[adammazur]

I am using record components in one column only (out of 20), so the best would be to remove "<div><img blank.gif></div>" from all other 19 columns. Currently I need to remove "<div>" with css, otherwise "cell data" isn't positioned left, middle in cell (see attached image).
The problem here is that for IE I need to rename tallCell css class to tallCellIE, so it is possible to refer correct div. See css code:

td.tallCell div div,
td.tallCellOver div div,
td.tallCellIE div,
td.tallCellIEOver div {height:0px;visibility: hidden;}

[Isomorphic]

Turning per-cell recordComponents won't cause these images to appear in cells for which you return null as the recordComponent. Try this in a sample (not your full app) to see the effect.

This also will not destroy centering.

[adammazur]

I disagree.
The truth is "<div><img blank.gif></div>" appears in every cell of record in which at least one cell contains recordComponent with DynamicForm.I tested many different configurations and figured out how this works. Please try this code to reproduce this behavior:

package org.yournamehere.client;

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.TextItem;

public class MainEntryPoint implements EntryPoint {

    public void onModuleLoad() {

        final ListGrid countryGrid = new ListGrid() {

            @Override
            protected Canvas createRecordComponent(final ListGridRecord record, Integer colNum) {
                String fieldName = this.getFieldName(colNum);
                if (fieldName.equals("buttonField")) {
                    DynamicForm form = new DynamicForm();
                    TextItem item = new TextItem();
                    form.setFields(item);
                    return form;
//                    return new IButton();
                }
                return null;
            }
        };
        countryGrid.setShowRecordComponents(true);
        countryGrid.setShowRecordComponentsByCell(true);
        countryGrid.setCanRemoveRecords(true);

        countryGrid.setWidth(550);
        countryGrid.setHeight(224);
        countryGrid.setShowAllRecords(true);

        ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);
        countryCodeField.setAlign(Alignment.CENTER);
        countryCodeField.setType(ListGridFieldType.IMAGE);
        countryCodeField.setImageURLPrefix("flags/16/");
        countryCodeField.setImageURLSuffix(".png");

        ListGridField nameField = new ListGridField("countryName", "Country");
        ListGridField capitalField = new ListGridField("capital", "Capital");
        ListGridField continentField = new ListGridField("continent", "Continent");

        ListGridField buttonField = new ListGridField("buttonField", "Info");
        buttonField.setAlign(Alignment.CENTER);

        ListGridField iconField = new ListGridField("iconField", "Comments/Stats");
        iconField.setWidth(100);

        countryGrid.setFields(countryCodeField, nameField, capitalField, continentField, buttonField, iconField);
        countryGrid.setCanResizeFields(true);
        countryGrid.setDataSource(CountryXmlDS.getInstance());
        countryGrid.fetchData();

        countryGrid.draw();
    }
}

if you return new IButton() (or any other Canvas/Layout) there is no empty.gif in cells. But if you return DynamicForm, empty.gif is there.
I also tried to return new HTML("<form ....>") and behavior is correct. Only DynamicForm causes this "defect". Could you tell me how to get rid of "<div><img blank.gif></div>" and still be able to use DynamicForm?

[Isomorphic]

Thanks for the test case - that does clear up what we're talking about here.
The spacers essentially center the text within the specified cellHeight for the component.

We're looking into whether it makes sense to either switch the default behavior or have a mode where the content floats at the center of the rendered height of the embedded component(s) within the row - but for now you can get the behavior you're after by simply setting the cellHeight on the grid large enough to accomodate the drawn height of the embedded component.

In this example the DynamicForm has its overflow set to "visible" and renders a little taller than the cell height - you could set the overflow to "hidden" and a fixed height, and set the grid's cell height to match that to get the content of other cells rendering centered vertically with respect to the component.

[adammazur]

Thanks for help :)
The solution is to form.setOverflow(Overflow.HIDDEN);