1. #1
    Ext User
    Join Date
    Jul 2009
    Posts
    56
    Vote Rating
    0
    Pandaman is on a distinguished road

      0  

    Default Rendering Hyperlinks in Grid/TreeGrid

    Rendering Hyperlinks in Grid/TreeGrid


    The following code demonstrates an issue with GridCellRenderer and gwt Hyperlink objects. It loads a TreeGrid and a standard Grid, with one cell each (a link to a blank page). The issue is that when one clicks anywhere in the cell other than the link, the blank page is launched. Only clicking the link should launch the window instead of the white space in the cell.

    Code:
    public void onModuleLoad() {
            final VerticalPanel vertPanel = new VerticalPanel();
            
            final ArrayList<ColumnConfig> treeGridColumnList = new ArrayList<ColumnConfig>();
            final ColumnConfig nameColumn = new ColumnConfig("name", 200);
            nameColumn.setRenderer(new GridCellRenderer<BaseModel>() {
                public Object render(BaseModel model, String property,
                        ColumnData config, int rowIndex, int colIndex,
                        ListStore<BaseModel> store, Grid<BaseModel> grid) {
    
                    final String value = model.get(property);
                    final Hyperlink link = new Hyperlink(value, true, "");
                    link.addClickHandler(new ClickHandler() {
                        public void onClick(ClickEvent event) {
                            // TODO Auto-generated method stub
                            Window.open("", "window", "location=1,status=1,scrollbars=1,width=100,height=100");
                        }
                    });
                    return link;
                }
            });
            treeGridColumnList.add(nameColumn);
            final ColumnModel treeGridCM = new ColumnModel(treeGridColumnList);        
            
            final TreeStore<BaseModel> treeGridData = new TreeStore<BaseModel>();
            final BaseModel baseModel = new BaseModel();
            baseModel.set("name", "Test");
            treeGridData.add(baseModel, false);
            
            final TreeGrid<BaseModel> treeGrid = new TreeGrid<BaseModel>(treeGridData, treeGridCM);
            vertPanel.add(treeGrid);
            
            
            final ArrayList<ColumnConfig> gridColumnList = new ArrayList<ColumnConfig>();
            gridColumnList.add(nameColumn);
            final ColumnModel gridCM = new ColumnModel(gridColumnList);    
            
            final ListStore<BaseModel> gridData = new ListStore<BaseModel>();
            gridData.add(baseModel);
            
            final Grid<BaseModel> grid = new Grid<BaseModel>(gridData, gridCM);
            vertPanel.add(grid);
            
            RootPanel.get().add(vertPanel);
    }

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    Moving this to the help forum as this is not a bug in GXT. You are using the GWT Hyperlink Widget incorrectly

  3. #3
    Ext User
    Join Date
    Jul 2009
    Posts
    56
    Vote Rating
    0
    Pandaman is on a distinguished road

      0  

    Default


    So how am I supposed to use it then?

  4. #4
    Ext GWT Premium Member
    Join Date
    Jun 2008
    Posts
    221
    Vote Rating
    0
    nyklogistics is on a distinguished road

      0  

    Default


    Yes, I want to know it too.

  5. #5
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    That is the way the HyperlinkWidget works in GWT. For your feature you need to use some other Widget, probably write an own one.


    Whaat do you want to do?

  6. #6
    Ext User
    Join Date
    Jul 2009
    Posts
    56
    Vote Rating
    0
    Pandaman is on a distinguished road

      0  

    Default


    I want to be able to click a link in a grid cell and open the page that the link points to in a new window. This code does this fine. But I don't want to open the page the link points to if the user clicks the blank space in the grid cell.

  7. #7
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    The Hyperlink is wrong than. You need to write an own component for that.Take a look with firebug at the output if the Hyperlink widget.

  8. #8
    Ext User
    Join Date
    Jul 2009
    Posts
    56
    Vote Rating
    0
    Pandaman is on a distinguished road

      0  

    Default


    I guess I can do it the old fashion way and render an HTML link that uses javascript to open a new window...

  9. #9
    Ext User
    Join Date
    Jul 2009
    Posts
    6
    Vote Rating
    0
    raybeez is on a distinguished road

      0  

    Default


    If you want to accomplish this, why not just markup the property that's used to display data in the cell, eg:

    Code:
    ...
    BaseModel foo = ...
    foo.set("displayProperty", "<a href=\"#\">foo</a>");
    ...
    or something similar. This works just fine for me - granted, only in a normal TreePanel or a normal Grid, but I think it'd render just the same in a TreeGrid.

  10. #10
    Ext User
    Join Date
    Jul 2009
    Posts
    56
    Vote Rating
    0
    Pandaman is on a distinguished road

      0  

    Default


    Yeah that's more or less what I have, except that I made the GridCellRenderer wrap the text with html for the link. I originally wanted to use Hyperlink objects to make the code a bit cleaner, but since they don't work as desired, I'm fine with html.