jQWidgets Forums

Tagged: Cell, column, createeditor, custom, editor, grid, Input, Input Group, jqxgrid, jqxinput

This topic contains 4 replies, has 2 voices, and was last updated by hypertyper 11 years, 1 month ago.

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

Author

Input Group in Grid Posts

May 15, 2014 at 10:37 am Input Group in Grid #54494

Participant

Hi,

I want to place a “Input Group” like in the example of the jqxInput-Control (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/index.htm?%28arctic%29#demos/jqxinput/inputgroup.htm) in a grid-cell as editor.

How to realize that?

Regards,
Robert

May 15, 2014 at 2:10 pm Input Group in Grid #54510

Dimitar

Participant

Hello Robert,

Please check out the demo Custom Column Editor. Here is how to modify the first column (“First Name”) to set an input group as its editor:

columns: [
    {
        text: 'First Name', columntype: 'template', datafield: 'firstname', width: 150, createeditor: function (row, cellvalue, editor, cellText, width, height) {
            // construct the editor.
            var inputElement = $("<div><input type='text' /><div id='search'><img alt='search' width='16' height='16' src='../../images/search_lg.png' /></div></div>").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');
            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();
        }
    },

Best Regards,
Dimitar

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

May 15, 2014 at 3:29 pm Input Group in Grid #54515

hypertyper

Participant

Hi Dimitar,

thank you for your response but this does not show a input field grouped with a button. What I want is a cell which has a text-editor and a button. When the user clicks to the button a second window should appear (thats my work then) where he can select something. Afterthen the selected value from the second window should appear in the cell then.

You do have a nice example for the jqxInput component:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxinput/inputgroup.htm

That’s how I want it in a grid. Is that possible?

Thanks in advance,
Robert

May 16, 2014 at 5:28 am Input Group in Grid #54535

Dimitar

Participant

Hi Robert,

It is possible and I have shown you how to implement it. That is, as a cell editor, so you would have to enter a cell in edit mode (with double click on it) to see the input group. Here is the complete 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;
            }

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                    {
                        text: 'First Name', columntype: 'template', datafield: 'firstname', width: 150, createeditor: function (row, cellvalue, editor, cellText, width, height) {
                            // construct the editor.
                            var inputElement = $("<div><input type='text' /><div id='search'><img alt='search' width='16' height='16' src='../../images/search_lg.png' /></div></div>").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');
                            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: '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>

You cannot, however, have widgets displayed in grid cells directly but only as editors.

Best Regards,
Dimitar

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

May 16, 2014 at 7:56 am Input Group in Grid #54546

hypertyper

Participant

Hi Dimitar,

now it works. Thousand thanks to you! Great support!

Have a nice weekend!

Regards,
Robert

Author

Posts

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

You must be logged in to reply to this topic.