Announcement

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

    ListGrid useCellRollOvers:true with canSelectCells:false

    Hi Isomorphic,

    is the combination of useCellRollOvers:true with canSelectCells:false possible?
    I think that I could use cellRollOvers in my application, but don't like that when using them, the ListGrid only highlights the hovered cell and not the hovered row.
    I tried to "repair" this by canSelectCells:false, but this does not help. Is it possible to get the wanted effect (best in 5.1p)?

    BuiltInDS.java (+CountrySampleData.java from the client showcase):
    Code:
    package com.smartgwt.sample.client;
    
    import com.google.gwt.core.client.EntryPoint;
    import com.smartgwt.client.Version;
    import com.smartgwt.client.core.KeyIdentifier;
    import com.smartgwt.client.types.Alignment;
    import com.smartgwt.client.types.ListGridFieldType;
    import com.smartgwt.client.util.Page;
    import com.smartgwt.client.util.PageKeyHandler;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.Canvas;
    import com.smartgwt.client.widgets.IButton;
    import com.smartgwt.client.widgets.ImgButton;
    import com.smartgwt.client.widgets.Window;
    import com.smartgwt.client.widgets.events.ClickEvent;
    import com.smartgwt.client.widgets.events.ClickHandler;
    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.layout.HLayout;
    import com.smartgwt.client.widgets.layout.VLayout;
    
    public class BuiltInDS implements EntryPoint {
        private VLayout mainLayout;
        private IButton recreateBtn;
    
        public void onModuleLoad() {
            KeyIdentifier debugKey = new KeyIdentifier();
            debugKey.setCtrlKey(true);
            debugKey.setKeyName("D");
    
            Page.registerKey(debugKey, new PageKeyHandler() {
                public void execute(String keyName) {
                    SC.showConsole();
                }
            });
    
            mainLayout = new VLayout(20);
            mainLayout.setWidth100();
            mainLayout.setHeight100();
    
            recreateBtn = new IButton("Recreate");
            recreateBtn.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    recreate();
                }
            });
            mainLayout.addMember(recreateBtn);
            recreate();
            mainLayout.draw();
        }
    
        private void recreate() {
            Window w = new Window();
            w.setWidth("95%");
            w.setHeight("95%");
            w.setMembersMargin(0);
            w.setModalMaskOpacity(70);
            w.setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            w.setTitle("TITLE" + w.getTitle());
            w.setShowMinimizeButton(false);
            w.setIsModal(true);
            w.setShowModalMask(true);
            w.centerInPage();
    
            final ListGrid countryGrid = new ListGrid() {
                private HLayout rollOverCanvas;
                private ListGridRecord rollOverRecord;
    
                @Override
                protected Canvas getRollOverCanvas(Integer rowNum, Integer colNum) {
                    rollOverRecord = this.getRecord(rowNum);
                    if (colNum!=null && colNum == 1) {
                        if (rollOverCanvas == null) {
                            rollOverCanvas = new HLayout(3);
                            rollOverCanvas.setSnapTo("TR");
                            rollOverCanvas.setWidth(50);
                            rollOverCanvas.setHeight(22);
    
                            ImgButton editImg = new ImgButton();
                            editImg.setShowDown(false);
                            editImg.setShowRollOver(false);
                            editImg.setLayoutAlign(Alignment.CENTER);
                            editImg.setSrc("silk/comment_edit.png");
                            editImg.setPrompt("Edit Comments");
                            editImg.setHeight(16);
                            editImg.setWidth(16);
                            editImg.addClickHandler(new ClickHandler() {
                                public void onClick(ClickEvent event) {
                                    SC.say("Edit Comment Icon Clicked for country : " + rollOverRecord.getAttribute("countryName"));
                                }
                            });
    
                            ImgButton chartImg = new ImgButton();
                            chartImg.setShowDown(false);
                            chartImg.setShowRollOver(false);
                            chartImg.setLayoutAlign(Alignment.CENTER);
                            chartImg.setSrc("silk/chart_bar.png");
                            chartImg.setPrompt("View Chart");
                            chartImg.setHeight(16);
                            chartImg.setWidth(16);
                            chartImg.addClickHandler(new ClickHandler() {
                                public void onClick(ClickEvent event) {
                                    SC.say("Chart Icon Clicked for country : " + rollOverRecord.getAttribute("countryName"));
                                }
                            });
    
                            rollOverCanvas.addMember(editImg);
                            rollOverCanvas.addMember(chartImg);
                        }
                        return rollOverCanvas;
                    }
                    return null;
                }
            };
            countryGrid.setShowRollOverCanvas(true);
            // Disable the rollUnderCanvas because we're not using it.
            countryGrid.setShowRollUnderCanvas(false);
            countryGrid.setUseCellRollOvers(true);
            countryGrid.setCanSelectCells(false);
            
    
            countryGrid.setWidth(500);
            countryGrid.setHeight(224);
            countryGrid.setShowAllRecords(true);
    
            ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);
            countryCodeField.setAlign(Alignment.CENTER);
            countryCodeField.setType(ListGridFieldType.IMAGE);
            countryCodeField.setImageURLPrefix("flags/16/");
            countryCodeField.setImageURLSuffix(".png");
    
            ListGridField nameField = new ListGridField("countryName", "Country");
            ListGridField capitalField = new ListGridField("capital", "Capital");
            ListGridField continentField = new ListGridField("continent", "Continent");
            countryGrid.setFields(countryCodeField, nameField, capitalField, continentField);
            countryGrid.setCanResizeFields(true);
            countryGrid.setData(CountrySampleData.getRecords());
    
            w.addItem(countryGrid);
            w.show();
        }
    }
    Best regards
    Blama

    #2
    It sounds like you want simultaneous row and cell rollover, with row-level selection, is that right?

    If so, one way to do this would be an override of getCellCSSText() to return a different color or gradient if the cursor is over the cell (determined via getEventRow() / getEventCol())

    Comment


      #3
      Hi Isomorphic,

      thanks a lot, this seems to solve it with one little part missing. This is my code:
      Code:
                  @Override
                  protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
                      String text = super.getCellCSSText(record, rowNum, colNum);
                      if (this.isSelected(record))
                          return "background: #bdc3c7; /* cellSelected */";
                      else if (this.isHovered(record)) // API missing, also not found in ListGridRecord
                          return "background: #d5d9dc; /* cellOver, cellOverDark */";
                      else if ((rowNum & 1) == 0)
                          return "background: #f5f5f5; /* cellDark */";
                      else
                          return "background: #f9f9f9; /* cell */";
                  };
      It seems I can't detect hovered cells (the method "isHovered(record)" is not available). I assume there is a way to do this, because it works in a normal ListGrid, but perhaps the API is not exposed to SmartGWT?
      Could you add/enable this in 5.1?

      Best regards
      Blama
      Last edited by Blama; 22 Apr 2016, 01:18.

      Comment


        #4
        Hi Blama, you must use ListGrid.getEventRow/Column:
        Originally posted by Isomorphic View Post
        ...if the cursor is over the cell (determined via getEventRow() / getEventCol())

        Comment


          #5
          Hi claudiobosticco,

          in German there is a saying: "One who can read is at a plain advantage".
          This is my code now:
          Code:
                      @Override
                      protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
                          if (this.isSelected(record))
                              return "background: #bdc3c7; /* cellSelected */";
                          else if ([B]this.getEventRow() == rowNum[/B])
                              return "background: #d5d9dc; /* cellOver, cellOverDark */";
                          else if ((rowNum & 1) == 0)
                              return "background: #f5f5f5; /* cellDark */";
                          else
                              return "background: #f9f9f9; /* cell */";
                      };
          The only problem is that it is not called for all cells of the row I'm hovering from and the row I'm hovering to, only the cell I'm hovering from and the cell I'm hovering to.
          I'd need a way to have getCellCSSText() called for the whole row despite having set setUseCellRollOvers(true).

          Best regards
          Blama
          Last edited by Blama; 22 Apr 2016, 02:18. Reason: "and the ROW I'm hovering to" -> "and the CELL I'm hovering to"

          Comment


            #6
            Originally posted by Isomorphic View Post
            It sounds like you want simultaneous row and cell rollover, with row-level selection, is that right?
            Yes, correct. "Normal" ListGrid behavior with cell-level rollovers.

            Comment


              #7
              Originally posted by Blama View Post
              The only problem is that it is not called for all cells of the row I'm hovering from and the row I'm hovering to, only the cell I'm hovering from and the cell I'm hovering to.
              I'd need a way to have getCellCSSText() called for the whole row despite having set setUseCellRollOvers(true).
              I think you'll have to call ListGrid.refreshCellStyle on the other columns.

              Comment


                #8
                Hi claudiobosticco,

                thank you, this is working for me (refreshRow + RowOverHandler/RowOutHandler handler):
                Code:
                        final ListGrid countryGrid = new ListGrid() {
                            private HLayout rollOverCanvas;
                            private ListGridRecord rollOverRecord;
                            {
                                addRowOverHandler(new RowOverHandler() {
                                    @Override
                                    public void onRowOver(RowOverEvent event) {
                                        refreshRow(event.getRowNum());
                                    }
                                });
                
                                addRowOutHandler(new RowOutHandler() {
                                    @Override
                                    public void onRowOut(RowOutEvent event) {
                                        refreshRow(event.getRowNum());
                                    }
                                });
                            }
                
                            @Override
                            protected String getCellCSSText(ListGridRecord record, int rowNum, int colNum) {
                                if (this.isSelected(record))
                                    return "background: #bdc3c7; /* cellSelected */";
                                else if (this.getEventRow() == rowNum)
                                    return "background: #d5d9dc; /* cellOver, cellOverDark */";
                                else if ((rowNum & 1) == 0)
                                    return "background: #f5f5f5; /* cellDark */";
                                else
                                    return "background: #f9f9f9; /* cell */";
                            };
                
                            @Override
                            protected Canvas getRollOverCanvas(Integer rowNum, Integer colNum) {
                                ...
                                ...
                Isomorphic: Is this the way to go or could you offer a setter that takes care of this (making extra addRowOverHandler(), addRowOutHandler() and getCellCSSText() unnecessary)?
                I saw that there is refreshCellStyle(int rowNum, int colNum) but no refreshRowStyle(int rowNum).
                I assume it was added your performance reasons compared to refreshCell(). Could you also add it for row?

                Best regards
                Blama

                Comment

                Working...
                X