How do I focus the right column with the enter key?

[mustafaParticipant]

hello
How can I focus on the right column when I press enter in a column?
and how do I get the dropDown to open automatically on the right ?
and How can I focus on the right column when I select an object in dropdown?

and How can I create a new blank line when I press enter on the down new row?

Could you please give an example?

thank you

[Yavor DashevParticipant]

Hi mustafa,

I have prepared a quick code example on how to achieve the functionalities that you have mentioned, except for the last one which I would like to ask you to give a bit more context of what exactly you want as a functionality.

And the code snippet that I have made for you:

                var dataAdapter = new $.jqx.dataAdapter(source);

                var cell;
                // create grid.
                $("#grid").jqxGrid(
                {
                    width: 670,
                    height: 300,
                    source: dataAdapter,                    
                    editable: true,
                    handlekeyboardnavigation: function (event) {
                        var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                        if (key == 13) {
                            cell = $('#grid').jqxGrid('getselectedcell');
                            if(cell.datafield ==='ShipName') {
                                $('#grid').jqxGrid('selectcell', cell.row, 'Freight');
                            }
                            if(cell.datafield === 'Freight') {
                                $('#grid').jqxGrid('selectcell', cell.row, 'ShipAddress');
                                
                            }
                            if(cell.datafield === 'ShipAddress') {
                                $('#grid').jqxGrid('selectcell', cell.row + 1, 'ShipName');
                            }
                            return true;
                        } 
                    },
                    ready: function()
                    {
                        $("#grid").jqxGrid('selectcell', 0, 'ShipName');
                        cell = $('#grid').jqxGrid('getselectedcell');
                        // focus grid.
                        $("#grid").jqxGrid('focus');
                    },
                    selectionmode: 'singlecell',
                    columns: [
                      { text: 'Ship Name', datafield: 'ShipName',columntype:'dropdownlist', 
                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            cell = $('#grid').jqxGrid('getselectedcell');

                            var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];

                            editor.jqxDropDownList({source: dataSource, autoOpen: true });

                            editor.on('select', function() {

                                if(cell.datafield ==='ShipName') {
                                    $('#grid').jqxGrid('selectcell', cell.row, 'Freight');
                                }
                                if(cell.datafield === 'Freight') {
                                    $('#grid').jqxGrid('selectcell', cell.row, 'ShipAddress');
                                }
                                if(cell.datafield === 'ShipAddress') {
                                    $('#grid').jqxGrid('selectcell', cell.row + 1, 'ShipName');
                                }
                            })
                        }
                    },
                      { text: 'Freight', datafield: 'Freight', width: 80, align: 'right', cellsformat: 'F2', cellsalign: 'right' },
                      { text: 'Ship Address', datafield: 'ShipAddress',columntype:'dropdownlist', align: 'left', width: 350, cellsalign: 'left',
                        createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            cell = $('#grid').jqxGrid('getselectedcell');

                            var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];

                            editor.jqxDropDownList({source: dataSource, autoOpen: true });

                            editor.on('select', function() {
                                if(cell.datafield ==='ShipName') {
                                    $('#grid').jqxGrid('selectcell', cell.row, 'Freight');
                                }
                                if(cell.datafield === 'Freight') {
                                    $('#grid').jqxGrid('selectcell', cell.row, 'ShipAddress');
                                }
                                if(cell.datafield === 'ShipAddress') {
                                    $('#grid').jqxGrid('selectcell', cell.row + 1, 'ShipName');
                                }
                            })
                        }
                    },
                    ]
                });
                $("#grid").on('cellselect', function (event) 
                    {
                        // event arguments.
                        var args = event.args;
                        var dataField = event.args.datafield;
                        var rowBoundIndex = event.args.rowindex;
                        
                        $("#grid").jqxGrid('begincelledit', rowBoundIndex, dataField);
                    });
            

Let me know if that works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[mustafaParticipant]

yes i wanted this
only How can I create elements in a new row when I press enter? example (dropdown input )

and just wondering if it’s possible
Can I use another element in the grid? ( select2 dropdown )

thank you so much

[Yavor DashevParticipant]

Hi mustafa,

Unfortunately for your first question this functionality is not supported by the jqxGrid.

However for your second question you can use the createwidget property of the columns to create a custom editor.

Example for custom editors: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/customizededitors.htm?web

Let me know what you think about this!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[mustafaParticipant]

hello yavor
my first question .. I think I didn’t explain my question well.
In this example, there is a new line creation. I want to create a dropdown on the new line I want.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?arctic

and second question.. Is it true that I can create another plugin dropdown using createwidget?

and
When we buy jqwidgets licensed, is it necessary to buy it for each computer?
thank you

[Yavor DashevParticipant]

Hi mustafa,

Using the demo that you have shared as a example I have modified it so that it may suit your need.
The code snippet for this:

 $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                height: 350,
                source: dataAdapter,
                editable: true,
                showtoolbar: true,
                rendertoolbar: function (toolbar) {
                    var me = this;
                    var container = $("<div style='margin: 5px;'></div>");
                    toolbar.append(container);
                    container.append('<input id="addrowbutton" type="button" value="Add New Row" />');
                    container.append('<input style="margin-left: 5px;" id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />');
                    container.append('<input style="margin-left: 5px;" id="deleterowbutton" type="button" value="Delete Selected Row" />');
                    container.append('<input style="margin-left: 5px;" id="updaterowbutton" type="button" value="Update Selected Row" />');
                    $("#addrowbutton").jqxButton();
                    $("#addmultiplerowsbutton").jqxButton();
                    $("#deleterowbutton").jqxButton();
                    $("#updaterowbutton").jqxButton();
                    // update row.
                    $("#updaterowbutton").on('click', function () {
                        var datarow = generaterow();
                        var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#grid").jqxGrid('updaterow', id, datarow);
                            $("#grid").jqxGrid('ensurerowvisible', selectedrowindex);
                        }
                    });

                    // create new row.
                    $("#addrowbutton").on('click', function () {
                        var datarow = generaterow();
                        var commit = $("#grid").jqxGrid('addrow', null, {firstname: ''});
                        var rows = $('#grid').jqxGrid('getrows');
                        $("#grid").jqxGrid('begincelledit', rows.length - 1, "firstname");
                    });

                    // create new rows.
                    $("#addmultiplerowsbutton").on('click', function () {
                        $("#grid").jqxGrid('beginupdate');
                        for (var i = 0; i < 10; i++) {
                            var datarow = generaterow();
                            var commit = $("#grid").jqxGrid('addrow', null, null);
                        }
                        $("#grid").jqxGrid('endupdate');
                    });

                    // delete row.
                    $("#deleterowbutton").on('click', function () {
                        var selectedrowindex = $("#grid").jqxGrid('getselectedrowindex');
                        var rowscount = $("#grid").jqxGrid('getdatainformation').rowscount;
                        if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                            var id = $("#grid").jqxGrid('getrowid', selectedrowindex);
                            var commit = $("#grid").jqxGrid('deleterow', id);
                        }
                    });
                },
                columns: [
                  { text: 'First Name', datafield: 'firstname', width: 200,
                  createeditor: function (row, cellvalue, editor, celltext, cellwidth, cellheight) {
                            cell = $('#grid').jqxGrid('getselectedcell');

                            var dataSource = ['Cappuccino', 'Caramel Latte', 'Caffe Espresso'];

                            editor.jqxDropDownList({source: dataSource, autoOpen: true });

                            editor.on('select', function() {
                                if(cell.datafield ==='ShipName') {
                                    $('#grid').jqxGrid('selectcell', cell.row, 'Freight');
                                }
                                if(cell.datafield === 'Freight') {
                                    $('#grid').jqxGrid('selectcell', cell.row, 'ShipAddress');
                                }
                                if(cell.datafield === 'ShipAddress') {
                                    $('#grid').jqxGrid('selectcell', cell.row + 1, 'ShipName');
                                }
                            })
                        } },
                  { text: 'Last Name', datafield: 'lastname', width: 200 },
                  { 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',  cellsalign: 'right', cellsformat: 'c2' }
                ]
            });    
        

And for your second question, yes it is possible use another widgets for which I have shared a demo in my previous post.

And for you last question it depends for how many developers you want to use jQWidgets, if you intend to use it with more than one developers you will have to use the ‘Team license’.

Let me know what you think about this!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[mustafaParticipant]

i will try the code
Where can I see team license prices?

thank you

[Yavor DashevParticipant]

Hi mustafa,

You can see the prices here: https://www.jqwidgets.com/license/

Or if you need any additional information regarding the licensing feel free to contact sales@jqwidgets.com

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[Author]

Posts