ListGridField - setWidth and setAutoFitWidth do not work together well

[deepfriedbrain]

Hi,

I have a ListGrid with a single field. The contents of this field change dynamically. My requirement is to have a "minimum width" for the field as well as an autoFit setting for wider field values.

Let's say the minimum width is 200px, and the field content's width is 100px. In this case, I want the field width to be 200px. But if the content width changes to 300px, I want the field to automatically expand to 300px. I used the code:

field.setWidth(200);
field.setAutoFitWidth(true);

The result is not what I expected. Let's say initially my content width is 100px. In this case, the field width is correctly set to 200px. Next, the content width changes to 300px. In this case, the field width correctly expands to 300px. However, if the content width changes back to 100px, the field width doesn't shrink back to 200px (minimum width). It stays at 300px.

In summary, if I use setWidth and setAutoFitWidth together, the auto fit only works in one direction i.e. for expanding the field. It doesn't really shrink the field back when the content shrinks.

So, is there another way to achieve my requirement of having a minimum width and also an "auto fit" setting for wider content?

I'll appreciate any help.

Thanks.

[Isomorphic]

See the docs for the property you're using - autofitting is performed under specific conditions. Your results suggest that you are doing something like directly changing the Record, which the ListGrid cannot detect. Go through the databinding layer instead (updateData()) to trigger auto-fitting to be run again. Or, trigger it with a manual call to autoFitField().

[deepfriedbrain]

Hello Isomorphic,

Thanks for your response.

I'm using filterData() API to update the ListGrid. I created a simple standalone test case to demonstrate the problem. Refer to the code at the end of this post. I've also posted the screenshots so that you can see the problem without having to run the code.

I have a simple datasource with records having name and description attributes. I have 2 list grids with one field each - one for the "name" attribute, and the other for the "description". When I click on any record in the Name grid, the Description grid shows the description for that name.

The width of Description grid is 150px.

Name1 has a short description which is less than 150px wide.
Name2 has a medium-sized description, which is more than 150px wide.
Name3 has a long description.

Steps to reproduce the problem:

1. Click on Name1 in the Name Grid. The Description Grid shows the short description. There's no horizontal scrollbar.
2. Click on Name2 in the Name Grid. The Description Grid shows the medium description. A horizontal scrollbar is introduced.
3. Click on Name3 in the Name Grid. The Description Grid shows the long description. A horizontal scrollbar stays, but is resized.
4. Click on Name2 again in the Name Grid. The Description Grid shows the medium description. A horizontal scrollbar stays, but is resized.
5. Click on Name1 again in the Name Grid. The Description Grid shows the short description. A horizontal scrollbar stays as it is.

PROBLEM:

Step 5 is the problem. Since the description width is shorter than the field width, the horizontal scrollbar should disappear, but it doesn't. Refer to the attached screenshots. In Step5 screenshot, you can see the unnecessary horizontal scrollbar. The Description grid should look the same in Step1 and Step5, but it doesn't.

Please let me know if I'm missing something.

Thanks again for your help.

TestListGrid.java:

package com.dfb.test.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.data.Criteria;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.events.SelectionChangedHandler;
import com.smartgwt.client.widgets.grid.events.SelectionEvent;
import com.smartgwt.client.widgets.layout.HLayout;

public class TestListGrid implements EntryPoint {
    
    public final TestXMLDS testDS = TestXMLDS.getInstance();        

    public void onModuleLoad() {
        HLayout rootLayout = new HLayout();
        rootLayout.setPadding(20);
        rootLayout.setMembersMargin(20);
        
        final ListGrid nameGrid = new ListGrid();  
        nameGrid.setWidth(200);  
        nameGrid.setHeight(224);  
        nameGrid.setShowAllRecords(true);  
        nameGrid.setDataSource(testDS);

        final ListGrid descGrid = new ListGrid();  
        descGrid.setWidth(150);  
        descGrid.setHeight(224);  
        descGrid.setDataSource(testDS);
        
        ListGridField nameField = new ListGridField("name", "Name");  
        nameGrid.setFields(nameField); 
        nameGrid.setData(TestData.getRecords());
        
        ListGridField descField = new ListGridField("description", "Description", 132);
        descField.setAutoFitWidth(true);
        descGrid.setFields(descField);  
        
        nameGrid.addSelectionChangedHandler(new SelectionChangedHandler() {  
            public void onSelectionChanged(SelectionEvent event) {
                if (event.getState())
                {                   
                    String name = nameGrid.getSelectedRecord().getAttribute("name");

                    Criteria findValues;
                    
                    findValues = new Criteria();
                    findValues.addCriteria("name", name);
                    descGrid.filterData(findValues);
                }
            }  
        });
        
        rootLayout.setMembers(nameGrid, descGrid);
        rootLayout.draw();      
    }
}

TestXMLDS.java:

package com.dfb.test.client;

import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.data.fields.DataSourceFloatField;
import com.smartgwt.client.data.fields.DataSourceIntegerField;
import com.smartgwt.client.data.fields.DataSourceTextField;

public class TestXMLDS extends DataSource {

    private static TestXMLDS instance = null;

    public static TestXMLDS getInstance() {
        if (instance == null) {
            instance = new TestXMLDS("testDS");
        }
        return instance;
    }

    public TestXMLDS(String id) {

        setID(id);
        setTitleField("name");
        setRecordXPath("/List/test");
        DataSourceTextField nameField = new DataSourceTextField("name", "Name");
        nameField.setPrimaryKey(true);
        nameField.setRequired(true);
      
        DataSourceTextField descField = new DataSourceTextField("description", "Description");
        
        setFields(nameField, descField);

        setDataURL("test.data.xml");
        setClientOnly(true);
    }
}

test.data.xml:

<List>

	<test>
		<name>Name1</name>
		<description>Short desc</description>
	</test>

	<test>
		<name>Name2</name>
		<description>This is a medium-sized description of name2</description>
	</test>

	<test>
		<name>Name3</name>
		<description>This is one really really really really really long description of name3</description>
	</test>

</List>

[Isomorphic]

This should be resolved in the next nightly build (Dec 23rd) Let us know if you continue to see it

Thanks
Isomorphic software

[deepfriedbrain]

Hello Isomorphic,

It looks good with 12/23 nightly.

BTW, before you fixed it, I worked around this issue using setAutoFitFieldWidths(true) on the list grid. Since my list grid had one column only, it worked for me. But having the issue fixed is great.

Thanks so much.