Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Column picker for ListGrid doesn't let you pick bottom-most columns using Firefox

    SmartClient Version: v8.2p_2012-10-22/PowerEdition Deployment (built 2012-10-22)
    Firefox Version: 17.01

    When you have a lot of potential columns for a list grid, the column picker (right-click header - Columns) doesn't let you scroll to the bottom of the list. It scrolls momementarily then scrolls back up before you can choose a column (via mouse wheel or scroll bar drag). We don't think this issue existed a few months ago so may have been introduced recently. The behaviour does not happen in Chrome or IE.

    Sample code from modified Showcase GridChart example:
    Code:
    /*
     * Isomorphic SmartGWT web presentation layer
     * Copyright 2000 and beyond Isomorphic Software, Inc.
     *
     * OWNERSHIP NOTICE
     * Isomorphic Software owns and reserves all rights not expressly granted in this source code,
     * including all intellectual property rights to the structure, sequence, and format of this code
     * and to all designs, interfaces, algorithms, schema, protocols, and inventions expressed herein.
     *
     *  If you have any questions, please email <sourcecode@isomorphic.com>.
     *
     *  This entire comment must accompany any portion of Isomorphic Software source code that is
     *  copied or moved from this file.
     */
    package com.smartgwt.sample.showcase.client.chart;
    
    import com.smartgwt.client.types.ChartType;
    import com.smartgwt.client.types.ListGridEditEvent;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.Canvas;
    import com.smartgwt.client.widgets.HTMLFlow;
    import com.smartgwt.client.widgets.chart.FacetChart;
    import com.smartgwt.client.widgets.form.DynamicForm;
    import com.smartgwt.client.widgets.form.fields.SelectItem;
    import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
    import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
    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.grid.events.EditCompleteEvent;
    import com.smartgwt.client.widgets.grid.events.EditCompleteHandler;
    import com.smartgwt.client.widgets.layout.VLayout;
    import com.smartgwt.sample.showcase.client.PanelFactory;
    import com.smartgwt.sample.showcase.client.ShowcasePanel;
    import java.util.ArrayList;
    import java.util.List;
    
    public class GridChart extends ShowcasePanel {
    
        private static final String DESCRIPTION = 
                "<p>Data loaded into a ListGrid can be charted with a single API call.</p>" +
                "<p>Use the \"Chart Type\" selector below to see same data rendered by multiple different " +
                "chart types.  You can also right-click on the chart to change the way data is visualized.</p>" +
                "Edit the data in the grid to have the chart regenerated automatically.";
    
        public static class Factory implements PanelFactory {
    
            private String id;
    
            public Canvas create() {
                GridChart panel = new GridChart();
                id = panel.getID();
                return panel;
            }
    
            public String getID() {
                return id;
            }
    
            public String getDescription() {
                return DESCRIPTION;
            }
        }
    
        @Override
        protected boolean isTopIntro() {
            return true;
        }
    
        public Canvas getViewPanel() {
    
            if(SC.hasCharts()) {
                if(SC.hasDrawing()) {
                    List<ListGridField> fields = new ArrayList<ListGridField>();
                    fields.add(new ListGridField ("Jan", "January"));
                    fields.add(new ListGridField ("Feb", "February"));
                    fields.add(new ListGridField ("Mar", "March"));
                    fields.add(new ListGridField ("Apr", "April"));
                    fields.add(new ListGridField ("May", "May"));
                    fields.add(new ListGridField ("Jun", "June"));
                    fields.add(new ListGridField ("Jul", "July"));
                    fields.add(new ListGridField ("Aug", "August"));
                    fields.add(new ListGridField ("Sep", "September"));
                    fields.add(new ListGridField ("Oct", "October"));
                    fields.add(new ListGridField ("Nov", "November"));
                    fields.add(new ListGridField ("Dec", "December"));
                    fields.add(new ListGridField ("A", "A"));
                    fields.add(new ListGridField ("B", "B"));
                    fields.add(new ListGridField ("C", "C"));
                    fields.add(new ListGridField ("D", "D"));
                    fields.add(new ListGridField ("E", "E"));
                    fields.add(new ListGridField ("F", "F"));
                    fields.add(new ListGridField ("G", "G"));
                    fields.add(new ListGridField ("H", "H"));
                    fields.add(new ListGridField ("I", "I"));
                    fields.add(new ListGridField ("J", "J"));
                    fields.add(new ListGridField ("K", "K"));
                    fields.add(new ListGridField ("L", "L"));
                    fields.add(new ListGridField ("M", "M"));
                    fields.add(new ListGridField ("N", "N"));
                    fields.add(new ListGridField ("O", "O"));
                    fields.add(new ListGridField ("P", "P"));
                    fields.add(new ListGridField ("Q", "Q"));
                    fields.add(new ListGridField ("R", "R"));
                    fields.add(new ListGridField ("S", "S"));
                    fields.add(new ListGridField ("T", "T"));
                    fields.add(new ListGridField ("U", "U"));
                    fields.add(new ListGridField ("V", "V"));
                    fields.add(new ListGridField ("W", "W"));
                    fields.add(new ListGridField ("X", "X"));
                    fields.add(new ListGridField ("Y", "Y"));
                    fields.add(new ListGridField ("Z", "Z"));
                    fields.add(new ListGridField ("A1", "A1"));
                    fields.add(new ListGridField ("B1", "B1"));
                    fields.add(new ListGridField ("C1", "C1"));
                    fields.add(new ListGridField ("D1", "D1"));
                    fields.add(new ListGridField ("E1", "E1"));
                    fields.add(new ListGridField ("F1", "F1"));
                    fields.add(new ListGridField ("G1", "G1"));
                    fields.add(new ListGridField ("H1", "H1"));
                    fields.add(new ListGridField ("I1", "I1"));
                    fields.add(new ListGridField ("J1", "J1"));
                    fields.add(new ListGridField ("K1", "K1"));
                    fields.add(new ListGridField ("L1", "L1"));
                    fields.add(new ListGridField ("M1", "M1"));
                    fields.add(new ListGridField ("N1", "N1"));
                    fields.add(new ListGridField ("O1", "O1"));
                    fields.add(new ListGridField ("P1", "P1"));
                    fields.add(new ListGridField ("Q1", "Q1"));
                    fields.add(new ListGridField ("R1", "R1"));
                    fields.add(new ListGridField ("S1", "S1"));
                    fields.add(new ListGridField ("T1", "T1"));
                    fields.add(new ListGridField ("U1", "U1"));
                    fields.add(new ListGridField ("V1", "V1"));
                    fields.add(new ListGridField ("W1", "W1"));
                    fields.add(new ListGridField ("X1", "X1"));
                    fields.add(new ListGridField ("Y1", "Y1"));
                    fields.add(new ListGridField ("Z1", "Z1"));
                    for (int x=12; x < 64; ++x) {
                    	fields.get(x).setHidden(true);
                    }
    
                    // Creating product sales
                    char maxProduct = 'E';
                    List<ListGridRecord> salesData = new ArrayList<ListGridRecord>();
                    for (char prod = 'A'; prod <= maxProduct; prod++) {
                        ListGridRecord rec = new ListGridRecord();
                        rec.setAttribute("product", "Product " + prod); // Product name
                        long minSales = Math.round(Math.random() * 8000) + 2000; // 2k-10k
                        long maxVariance = minSales / 3; // up to 33% of min value for this product
                        for (ListGridField field : fields) {
                            rec.setAttribute(field.getName(), Math.round(Math.random() * maxVariance) + minSales);
                        }
                        salesData.add(rec);
                    }
    
                    // Creating product name field
                    ListGridField field = new ListGridField("product", "Products");
                    field.setCanEdit(Boolean.FALSE);
                    fields.add(0, field);
    
                    // Creating grid and overriding getCellStyle() to use custom styling for product field
                    // Use Dark
                    final ListGrid grid = new ListGrid() {
                        @Override
                        protected String getCellStyle (ListGridRecord record, int rowNum, int colNum) {
                            if ("product".equals(getFieldName(colNum))) {
                                return super.getCellStyle(record, rowNum, colNum) + "Dark";
                            } else {
                                return super.getCellStyle(record, rowNum, colNum);
                            }
                        }
                    };
                    grid.setAlternateRecordStyles(Boolean.FALSE);
                    grid.setHeight(120);
                    grid.setCanEdit(Boolean.TRUE);
                    grid.setEditEvent(ListGridEditEvent.CLICK);
                    grid.setFields(fields.toArray(new ListGridField[0]));
                    grid.setData(salesData.toArray(new ListGridRecord[0]));
                    grid.setChartType(ChartType.AREA);
    
                    // Creating chart
                    final FacetChart chart = grid.chartData("product");
    
                    grid.addEditCompleteHandler(new EditCompleteHandler() {
                        public void onEditComplete(EditCompleteEvent event) {
                            // Updating chart data
                            chart.setData(grid.getRecords());
                        }
                    });
    
                    final DynamicForm chartSelector = new DynamicForm();
                    final SelectItem chartType = new SelectItem("chartType", "Chart Type");
                    chartType.setValueMap(
                            ChartType.AREA.getValue(),
                            ChartType.BAR.getValue(),
                            ChartType.COLUMN.getValue(),
                            ChartType.DOUGHNUT.getValue(),
                            ChartType.LINE.getValue(),
                            ChartType.PIE.getValue(),
                            ChartType.RADAR.getValue());
                    chartType.setDefaultToFirstOption(true);
                    chartType.addChangedHandler(new ChangedHandler() {
                        public void onChanged(ChangedEvent event) {
                            String selectedChartType = chartType.getValueAsString();
                            if (ChartType.AREA.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.AREA);
                            } else if (ChartType.BAR.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.BAR);
                            } else if (ChartType.COLUMN.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.COLUMN);
                            } else if (ChartType.DOUGHNUT.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.DOUGHNUT);
                            } else if (ChartType.LINE.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.LINE);
                            } else if (ChartType.PIE.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.PIE);
                            } else if (ChartType.RADAR.getValue().equals(selectedChartType)) {
                                chart.setChartType(ChartType.RADAR);
                            }
                        }
                    });
                    chartSelector.setFields(chartType);
    
                    VLayout layout = new VLayout(15);
                    layout.addMember(chartSelector);
                    layout.addMember(grid);
                    layout.addMember(chart);
    
                    return layout;
                } else {
                    HTMLFlow htmlFlow = new HTMLFlow("<div class='explorerCheckErrorMessage'><p>This example is disabled in this SDK because it requires the optional " +
                    "<a href=\"http://www.smartclient.com/product/index.jsp#drawing\" target=\"_blank\">Drawing module</a>.</p>" +
                    "<p>Click <a href=\"http://www.smartclient.com/smartgwtee/showcase/#gridCharting\" target=\"\">here</a> to see this example on smartclient.com</p></div>");
                    htmlFlow.setWidth100();
                    return htmlFlow;
                }
            } else {
                HTMLFlow htmlFlow = new HTMLFlow("<div class='explorerCheckErrorMessage'><p>This example is disabled in this SDK because it requires the optional " +
                "<a href=\"http://www.smartclient.com/product/index.jsp#analytics\" target=\"_blank\">Analytics module</a>.</p>" +
                "<p>Click <a href=\"http://www.smartclient.com/smartgwtee/showcase/#gridCharting\" target=\"\">here</a> to see this example on smartclient.com</p></div>");
                htmlFlow.setWidth100();
                return htmlFlow;
            }
        }
    
        @Override
        public String getIntro() {
            return DESCRIPTION;
        }
    
    }
    Let me know if you need anything else.

    Thanks again!

    Matt

    #2
    Please grab the latest nightly patch build. Firefox 17 introduced a change in the way versions are reported that we (and many sites and apps) had to work around.

    Comment


      #3
      OK, I've installed and run with last night's build and still have the issue. This is in Dev Mode and compiled.

      Version reported in Developer Console: SmartClient Version: v8.2p_2012-12-13/PowerEdition Deployment (built 2012-12-13)

      Is there some other component I should be checking? Are you able to reproduce the issue using the sample I provided?

      Thanks,

      Matt

      Comment


        #4
        We see the issue and have now resolved it.

        Please try the next nightly build (dated Dec 15 or greater).
        Regards
        Isomorphic Software

        Comment


          #5
          Fix confirmed.

          Thanks again!

          Comment

          Working...
          X