ICEfaces
  1. ICEfaces
  2. ICE-11378

ace:dataTable, extend Click Events demo to automatically select text of input field

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 4.2, EE-3.3.0.GA_P05
    • Fix Version/s: 4.3, EE-3.3.0.GA_P06
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      Any

      Description

      Find a way to extend the ace:dataTable > Click Events demo to switch a cell to edit mode and to have the contents of the first input field already selected with a single click. This may or may not require adding code at the component level.

        Activity

        Hide
        Arturo Zambrano added a comment -

        r52171, r52172: added utility function to automatically select the text of the first text input or textarea of a container (4.0 trunk and 3.3 EE maintenance branch)

        Show
        Arturo Zambrano added a comment - r52171, r52172: added utility function to automatically select the text of the first text input or textarea of a container (4.0 trunk and 3.3 EE maintenance branch)
        Hide
        Arturo Zambrano added a comment - - edited

        Follow these steps to modify the Click Events demo to accomplish the desired behaviour.

        1. Make sure that icefaces-ace.jar has been compiled using the latest revision, which should include the utility function mentioned in the previous comment.

        2. Modify dataTableClick.xhtml in the showcase application to trigger the 'toggleListener' action listener on the 'cellClick' ajax event, (instead of 'cellDblClick').

        <ace:ajax event="cellClick" listener="#{dataTableClick.toggleEditor}" />
        

        3. Modify the DataTableClick.java class in the following two ways:

        • Import the class org.icefaces.util.JavaScriptRunner.
        • Add the following code in the 'toggleEditor' method, right after the line that activates the cell editor.
          JavaScriptRunner.runScript(FacesContext.getCurrentInstance(),
          "(function(){ice.ace.DataTable.selectFirstInput('"+editor.getClientId()+"');})();");
          
        Show
        Arturo Zambrano added a comment - - edited Follow these steps to modify the Click Events demo to accomplish the desired behaviour. 1. Make sure that icefaces-ace.jar has been compiled using the latest revision, which should include the utility function mentioned in the previous comment. 2. Modify dataTableClick.xhtml in the showcase application to trigger the 'toggleListener' action listener on the 'cellClick' ajax event, (instead of 'cellDblClick'). <ace:ajax event= "cellClick" listener= "#{dataTableClick.toggleEditor}" /> 3. Modify the DataTableClick.java class in the following two ways: Import the class org.icefaces.util.JavaScriptRunner. Add the following code in the 'toggleEditor' method, right after the line that activates the cell editor. JavaScriptRunner.runScript(FacesContext.getCurrentInstance(), "(function(){ice.ace.DataTable.selectFirstInput('" +editor.getClientId()+ "');})();" );
        Hide
        Ken Fyten added a comment -

        Resolved.

        Show
        Ken Fyten added a comment - Resolved.
        Hide
        Arturo Zambrano added a comment -

        r52176, r52177: modified ace:dataTable > Click Events demo to show this functionality (4.0 trunk and 3.3 EE maintenance branch)

        Show
        Arturo Zambrano added a comment - r52176, r52177: modified ace:dataTable > Click Events demo to show this functionality (4.0 trunk and 3.3 EE maintenance branch)
        Hide
        Ken Fyten added a comment -

        Reopened.

        • Needs to display a horizontal scrollbar if necessary (styling on editable fields is wider than normal col widths.
        • Is there anyway to get out of edit mode after you dbl-click a cell to edit it?
        Show
        Ken Fyten added a comment - Reopened. Needs to display a horizontal scrollbar if necessary (styling on editable fields is wider than normal col widths. Is there anyway to get out of edit mode after you dbl-click a cell to edit it?
        Hide
        Arturo Zambrano added a comment -

        r52425: added automatic overflow styling to div container of the table, in order do display a scrollbar when the table width increases as a result of cells switching to edit mode

        To exit edit mode one simply has to double click again on the same cell (outside of the text field).

        Show
        Arturo Zambrano added a comment - r52425: added automatic overflow styling to div container of the table, in order do display a scrollbar when the table width increases as a result of cells switching to edit mode To exit edit mode one simply has to double click again on the same cell (outside of the text field).
        Hide
        Arturo Zambrano added a comment -

        r52426: added some simple javascript code to the demo to trigger a cell double click event when double clicking on the text fields and added the same functionality when pressing the esc key on the text fields, in order to exit the edit mode on the cell

        Show
        Arturo Zambrano added a comment - r52426: added some simple javascript code to the demo to trigger a cell double click event when double clicking on the text fields and added the same functionality when pressing the esc key on the text fields, in order to exit the edit mode on the cell

          People

          • Assignee:
            Arturo Zambrano
            Reporter:
            Arturo Zambrano
          • Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: