Stop row from selecting in a grid?

[carlos.aguayo]

I have a grid and within the grid I have two columns, the first column is rendered using a LabelField. I would like that upon clicking on the label an action to be performed but I don't want the row to be selected. I thought that "cancelling" the event would prevent the row from being selected.
I can prevent the row from being selected if I use a "BeforeSelect" and cancel the event directly on the grid but that's not very helpful. I'd like to delegate that to the LabelField.

Here's the code for what I'm trying. You will see that when you click on "Apple", the alert shows up and the row gets selected, I'd like to prevent the latter.

Any suggestions? Thanks!

import java.util.ArrayList;
import java.util.List;

import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.FieldEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.form.LabelField;
import com.extjs.gxt.ui.client.widget.grid.CheckBoxSelectionModel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Event;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;

public class Grids implements EntryPoint {

  public void onModuleLoad() {
    List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
    CheckBoxSelectionModel<Stock> sm = new CheckBoxSelectionModel<Stock>();
    configs.add(sm.getColumn());

    ColumnConfig column = new ColumnConfig();
    column.setId("name");
    column.setHeader("Company");
    column.setWidth(200);
    column.setRenderer(new GridCellRenderer<Stock>() {
      @Override
      public Object render(Stock model, String property, ColumnData config, int rowIndex,
        int colIndex, ListStore<Stock> store, Grid<Stock> grid) {
        LabelField label = new LabelField(model.getName());
        label.sinkEvents(Event.ONCLICK);
        label.addListener(Events.OnClick, new Listener<FieldEvent>(){
          @Override
          public void handleEvent(FieldEvent be) {
            // do something...
            Window.alert("label click");
            
            // don't check the checkbox nor select the row...
            be.setCancelled(true);
          }
        });
        return label;
      }
    });
    
    configs.add(column);
    
    column = new ColumnConfig();
    column.setId("industry");
    column.setHeader("Industry");
    column.setWidth(200);
    
    configs.add(column);    

    ListStore<Stock> store = new ListStore<Stock>();
    store.add(getStocks());

    ColumnModel cm = new ColumnModel(configs);

    Grid<Stock> grid = new Grid<Stock>(store, cm);
    grid.setSelectionModel(sm);
    grid.addPlugin(sm);
    
    RootPanel.get("gwtContent").add(grid);
  }
  
  public static List<Stock> getStocks() {
    List<Stock> stocks = new ArrayList<Stock>();
    stocks.add(new Stock("Apple Inc.", "AAPL"));
    stocks.add(new Stock("Cisco Systems, Inc.", "CISCO"));
    stocks.add(new Stock("Google Inc.", "GOOG"));
    return stocks;
  }
}


class Stock extends BaseModel {

  public Stock(String name, String industry) {
    set("name", name);
    set("industry", industry);
  }

  public String getIndustry() {
    return get("industry");
  }

  public void setIndustry(String industry) {
    set("industry", industry);
  }

  public String getName() {
    return (String) get("name");
  }

}

[sven]

You cannot cacnel a browserevent. However you can stop it.

be.stopEvent();

[carlos.aguayo]

Thanks for the response! I tried stopping the event as well as you mention, however it still checks the checkbox in the grid.

Any suggestion on a different way to do this? I just want to click on the text, and perform an action but without selecting the row. I do want to select the row if the user clicks somewhere else (i.e. the checkbox or the second column).

I just saw that I can get the behavior that I'm looking for if instead a LabelField I use a Button. However I was looking more to something like just plain text or an anchor. Ideas?

[sven]

You will need to change the event you listen to. It is onMouseDown that you need to stop.

[carlos.aguayo]

That worked! Thank you!