How I can drag and drop an element within a cell in a listgrid?

Question

I'm use: SmartGwt 3.0; gwt 2.4; firefox 11 and Google Chrome 19.0.1084.52.

First I want to apologize for my English, because it is very bad. What I need is to drag and drop a component (eg a label, image, etc ...) inside a cell in a listgrid. I know you can drag records, but I want to add any type of component within the cell. appreciate any help however small, because otherwise I will play to create a table component, which has a large amount of properties listgrid, where you can add a component within a cell. And the truth is not as addressing the problem.

I am using the latest version of smartgwt

I'm experimenting with methods "getShowRecordComponents", "getShowRecordComponentsByCell", "WillAcceptDrop" and "CreateRecordComponent". I've got to drag and drop a component smartgwt (through prior configuration) but I Arreaga at the end of the record and I want you to put it in the column-row where you drop the component.

This class is called inside of other class.

private class CustomList extends ListGrid{
    //record que hace el drop
    private ListGridRecord currentRecord = null;
    //elemento que se va a dropear
    private Canvas currentCanvas = null;

    //private int index;

public CustomList() {
    this.setHeight(400);
    this.setWidth(400);
    this.setCanResizeFields(true);
    this.setResizeFieldsInRealTime(true);
    this.setShowRecordComponentsByCell(true);
    this.setShowRecordComponents(true);      
    this.setCanAcceptDrop(true);          

    this.addRecordDropHandler(new RecordDropHandler() {

      @Override
      public void onRecordDrop(RecordDropEvent event) {
          System.out.println("X: " + event.getX());
          System.out.println("Y: " + event.getY());
          System.out.println("index: " + event.getIndex());
          System.out.println("event.getDropRecords() ==>  "+ event.getDropRecords());
          //guardamo el record y el canvas que se hace el drop
          currentRecord = event.getTargetRecord();
          currentCanvas = EventHandler.getDragTarget();
       }
     });
    //defino columna ico
    ListGridField field = new ListGridField("icon");
    ListGridField field2 = new ListGridField("valor");
    this.setFields(field, field2);

    //añado record para poder aceptar drops
    ListGridRecord record = new ListGridRecord();
    ListGridRecord record2 = new ListGridRecord();
    record.setCanAcceptDrop(true);
    record.setAttribute("icon", "Hola"); 
    record.setAttribute("valor", "adios");
    record2.setAttribute("icon", "Segundo"); 
    record2.setAttribute("valor", "Segundo Adios");
    this.addData(record);
    this.addData(record2);
  }

  //la llamada a createRecordComponent la hace el listgrid al crearse.
  @Override
  protected Canvas createRecordComponent (ListGridRecord record, Integer colNum) {

    System.out.println("record: " + record);
    System.out.println("colNum: " + colNum);
    System.out.println("currentRecord: " + currentRecord);

    if (record.equals(currentRecord)) {
      System.out.println("createRecordComponent - REGRESARA: " + currentCanvas);

      return currentCanvas;
    }

    return null;
  }

  @Override
  public Boolean willAcceptDrop(){
    return true;
  }

  @Override
  public Canvas updateRecordComponent (ListGridRecord record, Integer colNum, Canvas component, boolean recordChange) {
    System.out.println("***************************************************************************************");
    System.out.println("Estoy en gridView");
    System.out.println("***************************************************************************************");
    System.out.println("record es : "+record);
    System.out.println("colNum es : "+colNum);
    System.out.println("component es : "+component);
    System.out.println("recordChange es :"+recordChange);
   System.out.println("***************************************************************************************");
    return component;
  }
}

Can you help me??

Answer 1

I continued researching and I managed insert other widget inside cells in a listgrid, although I have not managed to configure it at all and therefore call for help from anyone who knows the right way. 1.- SmartGWT version:

SmartClient Version: SC_SNAPSHOT-2011-12-05/LGPL Development Only (built 2011-12-05)

2.- Browser version:

VersGoogle Chrome 19.0.1084.52 m and Firefox 11.0

3.- Problem: If set to true, this listGrid should create and show an embedded component in every row of the grid. Developers using this feature should implement the ListGrid.createRecordComponent and ListGrid.updateRecordComponent methods, but to the method "updateRecordComponent", but this method is called only just because I call it from "createRecordComponent". Why this behavior?

Each time you run the method "createRecordComponent" creates a new row, why do this? I just want to make a drop within a cell listgrid

4.- Code:

private class CustomList extends ListGrid{
    //record que hace el drop
    private ListGridRecord currentRecord = null;
    private ListGridRecord[] listRecord;
    //elemento que se va a dropear
    private Canvas currentCanvas = null;
    private EmbeddedPosition position;
//posiciones offset respecto a diferentes indices.
    private int x, x1, x2;
    private int y, y1, y2;      
    private int col, fil;


  public CustomList() {
    this.setHeight(400);
    this.setWidth(400); 
    this.setCanResizeFields(true);
    this.setResizeFieldsInRealTime(true);
    this.setRecordComponentPoolingMode(RecordComponentPoolingMode.RECYCLE);
    this.setRecordComponentPosition(EmbeddedPosition.EXPAND);
    this.setCanResizeFields(true);
    this.setShowRecordComponentsByCell(true);
    this.setShowRecordComponents(true);      
    this.setCanAcceptDrop(true);
    this.setCanReorderRecords(true);
    this.setCanAcceptDroppedRecords(true);
    this.setCanDrop(true);
   
    this.addRecordDropHandler(new RecordDropHandler() {
    
    @Override
    public void onRecordDrop(RecordDropEvent event) {
      //guardamo el record y el canvas que se hace el drop
      listRecord = event.getDropRecords();          
      currentRecord = event.getTargetRecord();
      currentCanvas = EventHandler.getDragTarget();
      position = getRecordComponentPosition();          
      x=event.getX();
      y=event.getY();          
      col=getEventColumn();
      fil=getEventRow();         
    }
  });
  
  //defino columna ico y valor
  ListGridField field = new ListGridField("icon");
  ListGridField field2 = new ListGridField("valor");
  this.setFields(field, field2);
  
  //añado record para poder aceptar drops
  ListGridRecord record = new ListGridRecord();
  ListGridRecord record2 = new ListGridRecord();
  record.setCanAcceptDrop(true);
  record.setAttribute("icon", "Hola"); 
  record.setAttribute("valor", "adios");
  record2.setAttribute("icon", "Segundo"); 
  record2.setAttribute("valor", "Segundo Adios");
  this.addData(record);
  this.addData(record2);
}

//la llamada createRecordComponent ,debería hacersela al crearse.
@Override
protected Canvas createRecordComponent (ListGridRecord record, Integer colNum) {
//como comprueba, porque setShowRecordComponentsByCell está a true, celda por celda, me quedo para actualizar solo cuando coincide
//la fila y la columna en la que he hecho el drop.
  if (record.equals(currentRecord) && (colNum.equals(col))) {
    updateRecordComponent(currentRecord,colNum,currentCanvas, true);
  }
  return null;
}

@Override
public Boolean willAcceptDrop(){
  return true;
}

@Override
public Canvas updateRecordComponent (ListGridRecord record, Integer colNum, Canvas component, boolean recordChange) {
  x1=this.getAbsoluteLeft();
  y1=this.getAbsoluteTop();
  x2 = component.getAbsoluteLeft();
  y2 = component.getAbsoluteTop();
  //currentCanvas.setSnapTo("C");
  addEmbeddedComponent(component, record, fil, colNum, EmbeddedPosition.WITHIN);      
  
  return component;
}

}