Detailed Viewer on Grouped Grids

[andyx1975]

If you are using a grouped ListGrid with a detail viewer... and if you are moving you mouse over a group header... a large detail viewer which shows all listGrid records appears (see Screenshot). I guess this should not be. If you are moving over a group header, no details viewer should appear because it is not standard listGridRecord. You can use the Code example to reproduce.

tested on: latestsmartGWT 5.1d LGPL
Browser: Firfox 26

Thanks
Andy

import java.util.LinkedHashMap;

import com.google.gwt.i18n.client.NumberFormat;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.data.RecordList;
import com.smartgwt.client.data.events.DataChangedEvent;
import com.smartgwt.client.data.events.DataChangedHandler;
import com.smartgwt.client.data.fields.DataSourceFloatField;
import com.smartgwt.client.data.fields.DataSourceSequenceField;
import com.smartgwt.client.data.fields.DataSourceTextField;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.AutoFitWidthApproach;
import com.smartgwt.client.types.FetchMode;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.RecordDropAppearance;
import com.smartgwt.client.types.SummaryFunctionType;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.grid.CellFormatter;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.toolbar.ToolStrip;
import com.smartgwt.client.widgets.toolbar.ToolStripButton;
import com.smartgwt.client.widgets.viewer.DetailViewer;

public class GTestGrid
{

    private ListGrid listGrid;
    private DynamicForm editorForm;

    public GTestGrid()
    {
        initPopUp();
    }

    private void initPopUp()
    {
        initListGrid();
        initEditorForm();

        VLayout layout = new VLayout();
        layout.setSize( "100%", "100%" );
        layout.setMembers( editorForm, getToolBar(), listGrid );
        layout.setOverflow( Overflow.HIDDEN );

        Window window = new Window();
        window.setOverflow( Overflow.HIDDEN );
        window.setShowShadow( true );
        window.setShadowSoftness( 10 );
        window.setShadowOffset( 5 );
        window.setSize( "100%", "100%" );
        window.setCanDragResize( true );
        window.setShowMaximizeButton( true );
        window.setShowMinimizeButton( true );
        window.setShowCloseButton( false );
        window.setAnimateMinimize( true );
        window.setShowCloseButton( true );
        window.setModalMaskOpacity( 50 );
        window.setIsModal( true );
        window.setShowModalMask( true );
        window.centerInPage();
        window.addItem( layout );

        window.draw();

        listGrid.getResultSet().addDataChangedHandler( new DataChangedHandler()
        {

            @Override
            public void onDataChanged( DataChangedEvent event )
            {
                double totalAmount = 0;

                // Gets all records of the listGrid
                Record[] records = getAssignments();

                for ( int i = 0; i < records.length; i++ )
                {
                    totalAmount = totalAmount + records[i].getAttributeAsDouble( CAssignedPaymentsRec.total_amount );
                }

                SC.say( "Total Amount: " + totalAmount );
            }
        } );
    }

    private void initListGrid()
    {
        final DataSource dataSource = getDataSource();
        listGrid = new ListGrid()
        {
            @Override
            protected Canvas getCellHoverComponent( Record record, Integer rowNum, Integer colNum )
            {
                Criteria criteria = new Criteria();
                criteria.addCriteria( dataSource.getPrimaryKeyFieldName(),
                                      record.getAttribute( dataSource.getPrimaryKeyFieldName() ) );

                DetailViewer viewer = new DetailViewer();
                viewer.setEmptyCellValue( "---" );
                viewer.setDataSource( dataSource );
                viewer.setWrapValues( false );
                viewer.setWrapLabel( false );
                viewer.setShowShadow( true );
                viewer.setShowEmptyField( false );
                viewer.setShowHiddenFields( true );
                viewer.setShowEmptyField( false );
                viewer.setShowDetailFields( true );
                viewer.fetchData( criteria );

                return viewer;
            }
        };

        listGrid.setMargin( 25 );
        listGrid.setDataSource( dataSource );
        listGrid.setAutoFetchData( true );
        listGrid.setShowFilterEditor( true );
        listGrid.setAllowFilterExpressions( true );
        listGrid.setShowRowNumbers( true );
        listGrid.setFastCellUpdates( true );
        listGrid.setEmptyCellValue( "---" );
        listGrid.setAllowFilterExpressions( true );
        listGrid.setDataFetchMode( FetchMode.BASIC );
        listGrid.setWrapHeaderTitles( true );
        listGrid.setCanResizeFields( true );
        listGrid.setCellPadding( 4 );
        listGrid.setFixedRecordHeights( false );
        listGrid.setGroupByMaxRecords( 1000 );
        listGrid.setBodyOverflow( Overflow.AUTO );
        listGrid.setOverflow( Overflow.AUTO );
        listGrid.setLeaveScrollbarGap( false );
        listGrid.setAutoFitWidthApproach( AutoFitWidthApproach.BOTH );
        listGrid.setAutoFitHeaderHeights( true );
        listGrid.setAutoSizeHeaderSpans( true );
        listGrid.setCanAutoFitFields( false );
        listGrid.setRecordDropAppearance( RecordDropAppearance.BOTH );
        listGrid.setCanHover( true );
        listGrid.setShowHover( true );
        listGrid.setShowHoverComponents( true );
        listGrid.setHoverDelay( 100 );

        listGrid.setCanAddFormulaFields( true );
        listGrid.setCanAddSummaryFields( true );

        // Sets Columns
        setColumns( listGrid );

    }

    private void setColumns( ListGrid listGrid )
    {
        ListGridField idField = new ListGridField( "id" );
        idField.setWidth( "10%" );
        idField.setAlign( Alignment.CENTER );
        idField.setShowGroupSummary( false );
        idField.setHidden( true );
        idField.setCanEdit( false );

        ListGridField descriptionField = new ListGridField( "description" );
        descriptionField.setWidth( "60%" );
        descriptionField.setCanEdit( false );

        ListGridField netField = new ListGridField( "netAmount" );
        netField.setSummaryFunction( SummaryFunctionType.SUM );
        netField.setShowGroupSummary( true );
        netField.setShowGridSummary( true );
        netField.setWidth( "10%" );
        netField.setAlign( Alignment.CENTER );
        netField.setCellFormatter( new CellFormatter()
        {
            public String format( Object value, ListGridRecord record, int rowNum, int colNum )
            {
                if ( value == null )
                    return null;
                try
                {
                    NumberFormat fmt = NumberFormat.getFormat( "#,##0.00" );
                    return fmt.format( Double.valueOf( String.valueOf( value ) ) );
                }
                catch ( Exception e )
                {
                    return value.toString();
                }
            }
        } );

        ListGridField taxField = new ListGridField( "taxAmount" );
        taxField.setWidth( "10%" );
        taxField.setSummaryFunction( SummaryFunctionType.SUM );
        taxField.setShowGroupSummary( true );
        taxField.setShowGridSummary( true );
        taxField.setAlign( Alignment.CENTER );
        taxField.setCellFormatter( new CellFormatter()
        {
            public String format( Object value, ListGridRecord record, int rowNum, int colNum )
            {
                if ( value == null )
                    return null;
                try
                {
                    NumberFormat fmt = NumberFormat.getFormat( "#,##0.00" );
                    return fmt.format( Double.valueOf( String.valueOf( value ) ) );
                }
                catch ( Exception e )
                {
                    return value.toString();
                }
            }
        } );

        ListGridField grossField = new ListGridField( "grossAmoumnt" );
        grossField.setSummaryFunction( SummaryFunctionType.SUM );
        grossField.setShowGroupSummary( true );
        grossField.setShowGridSummary( true );
        grossField.setAlign( Alignment.CENTER );
        grossField.setWidth( "10%" );
        grossField.setCellFormatter( new CellFormatter()
        {
            public String format( Object value, ListGridRecord record, int rowNum, int colNum )
            {
                if ( value == null )
                    return null;
                try
                {
                    NumberFormat fmt = NumberFormat.getFormat( "#,##0.00" );
                    return fmt.format( Double.valueOf( String.valueOf( value ) ) );
                }
                catch ( Exception e )
                {
                    return value.toString();
                }
            }
        } );

        ListGridField currencyField = new ListGridField( "currency" );
        currencyField.setAlign( Alignment.CENTER );
        currencyField.setWidth( "8%" );
        currencyField.setCanEdit( false );

        listGrid.setFields( idField, descriptionField, netField, taxField, grossField );

        // Group ListGrid
        listGrid.setGroupByField( "currency" );
        listGrid.setGroupStartOpen( GroupStartOpen.ALL );
        listGrid.setShowGroupSummary( true );
        listGrid.setShowGridSummary( true );

    }

    private DataSource getDataSource()
    {
        DataSource ds = new DataSource();
        ds.setID( "payments" );
        ds.setClientOnly( true );

        DataSourceSequenceField idField = new DataSourceSequenceField( "id", "ID" );
        idField.setPrimaryKey( true );
        idField.setHidden( true );

        DataSourceTextField descriptionField = new DataSourceTextField( "description", "Description" );
        descriptionField.setRequired( true );
        DataSourceFloatField netField = new DataSourceFloatField( "netAmount", "Net Amount" );
        netField.setRequired( true );
        DataSourceFloatField taxField = new DataSourceFloatField( "taxAmount", "Tax Amount" );
        taxField.setRequired( true );
        DataSourceFloatField grossField = new DataSourceFloatField( "grossAmoumnt", "Gross Amount" );
        grossField.setRequired( true );

        DataSourceTextField currencyField = new DataSourceTextField( "currency", "Currency" );
        currencyField.setValueMap( getCurrencys() );
        currencyField.setRequired( true );

        ds.setFields( idField, descriptionField, netField, taxField, grossField, currencyField );

        return ds;
    }

    private void initEditorForm()
    {
        editorForm = new DynamicForm();
        editorForm.setDataSource( listGrid.getDataSource() );
        editorForm.setAutoFocus( true );
        editorForm.setWidth100();
        editorForm.setMargin( 25 );
        editorForm.setUseAllDataSourceFields( true );

        editorForm.editNewRecord();
    }

    private ToolStrip getToolBar()
    {
        ToolStrip toolbar = new ToolStrip();
        toolbar.setWidth100();

        ToolStripButton buttonAddToGrid = new ToolStripButton( "Add To Grid" );
        buttonAddToGrid.addClickHandler( new ClickHandler()
        {
            public void onClick( ClickEvent event )
            {
                if ( editorForm.validate() == true )
                {
                    editorForm.submit();
                }
            }
        } );

        ToolStripButton buttonNewRecord = new ToolStripButton( "New Record" );
        buttonNewRecord.addClickHandler( new ClickHandler()
        {
            public void onClick( ClickEvent event )
            {
                editorForm.editNewRecord();
            }
        } );

        toolbar.addButton( buttonNewRecord );
        toolbar.addButton( buttonAddToGrid );

        return toolbar;

    }

    public Record[] getAssignments()
    {
        RecordList recordList = null;
        if ( listGrid.isGrouped() )
        {
            recordList = listGrid.getOriginalRecordList();
        }
        else
        {
            recordList = listGrid.getResultSet();
        }

        Record[] result = (Record[]) recordList.toArray();

        return result;
    }

    public LinkedHashMap<String, String> getCurrencys()
    {
        LinkedHashMap<String, String> items = new LinkedHashMap<String, String>();

        items.put( "1", "EUR" );
        items.put( "2", "GBP" );
        items.put( "3", "CHF" );
        items.put( "4", "SEK" );
        items.put( "5", "DKK" );
        items.put( "6", "PLN" );
        items.put( "7", "BGN" );
        items.put( "8", "CZK" );
        items.put( "9", "HUF" );
        items.put( "10", "HRK" );
        items.put( "11", "RUB" );
        items.put( "12", "RON" );

        return items;
    }

}

[Isomorphic]

You've phrased your post as though you are reporting a bug, but of course it's your getCellHoverComponent() implementation that is creating the DetailViewer which you say shouldn't be there. You can simply return null for group rows if you do not want to show a DetailViewer at all in this case.

[andyx1975]

Okay... thank you very much... I understand... the following solutions solved my issue:

 listGrid = new ListGrid()
            {

                @Override
                protected Canvas getCellHoverComponent( Record record, Integer rowNum, Integer colNum )
                {
                    DetailViewer detailViewer = null;
                    String id = record.getAttribute( dataSource.getPrimaryKeyField().getName() );
                    if ( id != null )
                    {
                        detailViewer = viewer.getDetailViewer( selectedRight, dataSource, record );
                    }

                    return detailViewer;
                }
};

Thanks
Andy

[Isomorphic]

You could also call listGrid.isGroupNode() instead of using the absence of the primary key to detect group nodes.

[andyx1975]

Ah ok thanks... sounds easier... is there a way to set the detailViewer position dynamically? The detailViewer gets cutted if the mouse is at the end of the screen.

[Isomorphic]

hoverComponents are automatically placed onscreen, however, your DetailViewer is dynamically fetching data which causes it to get larger than its initial size.

Even if the DetailViewer were automatically re-positioned when data arrived, this interaction would still be a bit awkward. The DetailViewer could end up covering a lot of the screen, requiring a large mouse movement to get away from it so it is dismissed, which is annoying for end users.

We'd recommend rethinking how things are being displayed: you could either set a larger size for the DetailViewer and set overflow:"auto", or you could switch to a ListGrid, which would also work better if there are a lot of related records.

[andyx1975]

Okay... thanks that helped!!!