jQuery UI Widgets Forums Grid start editing and cursor to the end of a word

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 7 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • Jane
    Participant

    Hi,

    I have a problem with editing cells. Is there any way to set the cursor to the end of the word so that when you start editing has not been marked text in a cell,but the cursor was on the end of words just?

    Thank you for your help.


    Dimitar
    Participant

    Hello Jane,

    This can be achieved through a custom editor. In the demo Custom Column Editor modify the first column as follows:

    columns: [
        {
            text: 'First Name', columntype: 'template', datafield: 'firstname', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) {
                // construct the editor.
                var inputElement = $("<input/>").prependTo(editor);
                inputElement.jqxInput({ source: getEditorDataAdapter('firstname'), displayMember: "firstname", width: width, height: height });
            },
            initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                // set the editor's current value. The callback is called each time the editor is displayed.
                var inputField = editor.find('input');
                inputField.val(cellvalue);
                inputField.jqxInput('selectLast');
            },
            geteditorvalue: function (row, cellvalue, editor) {
                // return the editor's value.
                return editor.find('input').val();
            }
        },

    and your required functionality will be implemented.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/


    Jane
    Participant

    Thanks, it works well. I still needed to advise how to do the editing with key F2, after which the word is again selected.

    Jane


    Dimitar
    Participant

    Hi Jane,

    As I understand, you wish to enter edit mode and select all text in the cell on pressing F2. If this is the case, please take a look at the further expanded example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxslider.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = generatedata(200);
    
                var source =
                {
                    localdata: data,
                    datatype: "array",
                    updaterow: function (rowid, rowdata, commit) {
                        // synchronize with the server - send update command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failder.
                        commit(true);
                    },
                    datafields:
                    [
                        { name: 'firstname', type: 'string' },
                        { name: 'lastname', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'quantity', type: 'number' },
                        { name: 'price', type: 'number' },
                        { name: 'date', type: 'date' }
                    ]
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                var getEditorDataAdapter = function (datafield) {
                    var source =
                     {
                         localdata: data,
                         datatype: "array",
                         datafields:
                           [
                               { name: 'firstname', type: 'string' },
                               { name: 'lastname', type: 'string' },
                               { name: 'productname', type: 'string' },
                               { name: 'available', type: 'bool' },
                               { name: 'quantity', type: 'number' },
                               { name: 'price', type: 'number' },
                               { name: 'date', type: 'date' }
                           ]
                     };
                    var dataAdapter = new $.jqx.dataAdapter(source, { uniqueDataFields: [datafield] });
                    return dataAdapter;
                }
    
                var pressedKey = null;
    
                // initialize jqxGrid
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    editable: true,
                    selectionmode: 'singlecell',
                    handlekeyboardnavigation: function (event) {
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                        if (key == 113) {
                            pressedKey = "F2";
                        };
                    },
                    columns: [
                      {
                          text: 'First Name', columntype: 'template', datafield: 'firstname', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) {
                              // construct the editor.
                              var inputElement = $("<input/>").prependTo(editor);
                              inputElement.jqxInput({ source: getEditorDataAdapter('firstname'), displayMember: "firstname", width: width, height: height });
                          },
                          initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                              // set the editor's current value. The callback is called each time the editor is displayed.
                              var inputField = editor.find('input');
                              inputField.val(cellvalue);
                              if (pressedKey == "F2") {
                                  inputField.jqxInput('selectAll');
                              } else {
                                  inputField.jqxInput('selectLast');
                              };
                              pressedKey = null;
                          },
                          geteditorvalue: function (row, cellvalue, editor) {
                              // return the editor's value.
                              return editor.find('input').val();
                          }
                      },
                      {
                          text: 'Last Name', datafield: 'lastname', columntype: 'template', width: 80, createeditor: function (row, cellvalue, editor, cellText, width, height) {
                              // construct the editor.
                              var inputElement = $("<input/>").prependTo(editor);
                              inputElement.jqxInput({ source: getEditorDataAdapter('lastname'), displayMember: "lastname", width: width, height: height });
                          },
                          initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                              // set the editor's current value. The callback is called each time the editor is displayed.
                              var inputField = editor.find('input');
                              if (pressedkey) {
                                  inputField.val(pressedkey);
                                  inputField.jqxInput('selectLast');
                              }
                              else {
                                  inputField.val(cellvalue);
                                  inputField.jqxInput('selectAll');
                              }
                          },
                          geteditorvalue: function (row, cellvalue, editor) {
                              // return the editor's value.
                              return editor.find('input').val();
                          }
                      },
                      {
                          text: 'Products', columntype: 'template', datafield: 'productname',
                          createeditor: function (row, cellvalue, editor, cellText, width, height) {
                              // construct the editor. 
                              editor.jqxDropDownList({
                                  checkboxes: true, source: getEditorDataAdapter('productname'), displayMember: 'productname', valueMember: 'productname', width: width, height: height,
                                  selectionRenderer: function () {
                                      return "Please Choose:";
                                  }
                              });
                          },
                          initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                              // set the editor's current value. The callback is called each time the editor is displayed.
                              var items = editor.jqxDropDownList('getItems');
                              editor.jqxDropDownList('uncheckAll');
                              var values = cellvalue.split(/,\s*/);
                              for (var j = 0; j < values.length; j++) {
                                  for (var i = 0; i < items.length; i++) {
                                      if (items[i].label === values[j]) {
                                          editor.jqxDropDownList('checkIndex', i);
                                      }
                                  }
                              }
                          },
                          geteditorvalue: function (row, cellvalue, editor) {
                              // return the editor's value.
                              return editor.val();
                          }
                      },
                     {
                         text: 'Quantity', width: 200, columntype: 'custom', datafield: 'quantity',
                         createeditor: function (row, cellvalue, editor, cellText, width, height) {
                             // construct the editor. 
                             editor.jqxSlider({ step: 1, mode: 'fixed', showTicks: false, min: 0, max: 30, width: width, height: height });
                         },
                         initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                             // set the editor's current value. The callback is called each time the editor is displayed.
                             var value = parseInt(cellvalue);
                             if (isNaN(value)) value = 0;
                             editor.jqxSlider('setValue', value);
                         },
                         geteditorvalue: function (row, cellvalue, editor) {
                             // return the editor's value.
                             return editor.val();
                         }
                     }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.