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

        Arturo Zambrano created issue -
        Arturo Zambrano made changes -
        Field Original Value New Value
        Assignee Arturo Zambrano [ artzambrano ]
        Ken Fyten made changes -
        Fix Version/s 4.3 [ 13096 ]
        Fix Version/s EE-3.3.0.GA_P06 [ 13114 ]
        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()+ "');})();" );
        Arturo Zambrano made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #52171 Thu Dec 14 13:41:13 MST 2017 art.zambrano ICE-11378 added utility function to automatically select the text of the first text input or textarea of a container
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/ace/component/resources/icefaces.ace/datatable/datatable.js
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Hide
        Ken Fyten added a comment -

        Resolved.

        Show
        Ken Fyten added a comment - Resolved.
        Ken Fyten made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        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)
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #52176 Mon Dec 18 17:46:05 MST 2017 art.zambrano ICE-11378 modified ace:dataTable > Click Events demo to show this functionality
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/java/org/icefaces/samples/showcase/example/ace/dataTable/DataTableClick.java
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        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?
        Ken Fyten made changes -
        Resolution Fixed [ 1 ]
        Status Resolved [ 5 ] Reopened [ 4 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #52425 Wed May 02 17:30:04 MDT 2018 art.zambrano ICE-11378 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
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/dataTable/dataTableClick.xhtml
        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).
        Arturo Zambrano made changes -
        Status Reopened [ 4 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #52426 Wed May 02 17:51:27 MDT 2018 art.zambrano ICE-11378 added some simple javascript code 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
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/webapp/resources/examples/ace/dataTable/dataTableClick.xhtml
        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
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #52427 Thu May 03 09:45:26 MDT 2018 art.zambrano ICE-11378 slight text modifications
        Files Changed
        Commit graph MODIFY /icefaces4/trunk/icefaces/samples/showcase/showcase/src/main/resources/org/icefaces/samples/showcase/view/resources/messages.properties
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

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

            Dates

            • Created:
              Updated:
              Resolved: