jQWidgets Forums

Tagged: arrow, Cell, edit, grid, jqxgrid, select

This topic contains 9 replies, has 3 voices, and was last updated by Peter Stoev 12 years, 9 months ago.

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

Author

Move from cell to cell Posts

August 13, 2012 at 8:46 am Move from cell to cell #6738

Falken

Member

Hello,

I would like to know if it is possible to edit mode using the arrow keys to move from cell to cell ?

Thank you for your response

August 13, 2012 at 10:05 am Move from cell to cell #6741

Dimitar

Participant

Hello Falken,

You can move through cells using the arrow keys and start editing with Enter. When you have finished editing, press Enter again and select another cell. The example below illustrates this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.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.selection.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];
            var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];
            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
            var priceValues =
            [
                "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
            ];
            for (var i = 0; i < 100; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var price = parseFloat(priceValues[productindex]);
                var quantity = 1 + Math.round(Math.random() * 10);
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                data[i] = row;
            }
            var source =
            {
                localdata: data,
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadComplete: function (data) { }
            });
            $("#jqxgrid").jqxGrid(
            {
                selectionmode: 'singlecell', // allows selecting a single cell
                editable: true, // allows editing a cell
                width: 670,
                source: dataAdapter,
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 100 },
                  { text: 'Last Name', datafield: 'lastname', width: 100 },
                  { text: 'Product', datafield: 'productname', width: 180 },
                  { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
                ]
            });
            $('#jqxgrid').jqxGrid('selectcell', 0, 'firstname'); // selects a cell, optional
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Dimitar

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

August 13, 2012 at 10:19 am Move from cell to cell #6742

Falken

Member

Dimitar thank you for your reply and your example.

I understood the movement of cell, but what I wish to do is to remain in edit mode and move me on ALL cells of the entire grid.

Best Regards,

August 13, 2012 at 11:10 am Move from cell to cell #6746

Dimitar

Participant

Hi Falken,

Here is a way of accessing the right or left cell in edit mode by pressing a key / key combination (excerpt from jqxGrid’s documentation):
Tab key is pressed – Selects the right cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the right cell and opens its editor.
Shift+Tab keys are pressed – Selects the left cell. If the Grid is in edit mode, saves the edit cell’s value, closes its editor, selects the left cell and opens its editor.

However, this only works for accessing cells on the same row.

Best Regards,
Dimitar

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

August 13, 2012 at 11:36 am Move from cell to cell #6747

Falken

Member

Thank you for your reply,

but there is no other method for this move as in a painting excel ?

Best Regards,
Falken

August 13, 2012 at 11:38 am Move from cell to cell #6748

Falken

Member

Thank you for your reply,

but there is no other method for this move as a grid in excel ?

Best Regards,
Falken

August 13, 2012 at 12:16 pm Move from cell to cell #6749

Dimitar

Participant

Hi Falken,

As far as I know, there is no other way. Once you start editing a jqxGrid cell, the arrow keys are used to navigate inside the editor, unlike Microsoft Excel.

Best Regards,
Dimitar

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

August 13, 2012 at 12:22 pm Move from cell to cell #6750

Falken

Member

ok Dimitar,

thank you for your answers and your help !

Best Regards,
Falken

August 13, 2012 at 1:01 pm Move from cell to cell #6751

Falken

Member

One last question,

if we buy a license with source code, would it be possible to add such a function ?
Could we have technical assistance to write the code ?

Thank you

August 13, 2012 at 4:08 pm Move from cell to cell #6755

Peter Stoev

Keymaster

Hi Falken,

– According to our EULA, you can modify and customize the source code. However, you need to distribute it minimized. The implementation of the editing functionality in jqxGrid is implemented in the jqxgrid.edit.js file. For more information about the EULA, read here: http://www.jqwidgets.com/licenseagreement/
– We usually do not make customizations and implementation of features on demand. However, you can contact our Sales Team at sales@jqwidgets.com for such requests.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.