Cursor focus at click on editor.jqxListBox in a jqxGrid cell ?

[mixcoderParticipant]

Hi. I’m interested in a editable grid with a column of type filterable listbox such that that each gridcell contains a listbox which is filterable. The following code works but I don’t know how to get the value selected in a cell? also I would like to hear whether it is possible to focus the cursor in the listbox searchinput when you click at a grid cell? Otherwise you have to click 2 times. First at the cell and then at the searchinput field.

$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
editable: true,
editmode: ‘selectedcell’,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 80 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 80 },
{
text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 177,
initeditor: function (row, cellvalue, editor) {
editor.jqxListBox({ source: data3, filterable: true });
}
},

[mixcoderParticipant]

Btw: I know that I specify a columntype: ‘dropdownlist. But if I specify a columntype ‘listbox’ it doesn’t work at all.

[HristoParticipant]

Hello mixcoder,

If you want to set specific filter type in the filter row you should use filtertype.
You could choose – ‘list’, ‘checkedlist’, ‘date’ for all possible values you could find in our API Documentation in columns property:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm?search=grid

When you determinate value in the columntype property it is about that column and it has to mean the editing process.
I would like to suggest you look at the mentioned approach on this topic, “how to set cursor (caret) position in ‘filterrow'”:
http://www.jqwidgets.com/community/topic/moving-the-cursor-between-the-grid-and-filter-row/
If this does not help please, clarify it with more details what you want to achieve?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[mixcoderParticipant]

Hi Hristo, i’m interested in a grid like excel where you can jump between the cells and edit the cells without too many mouseclicks. When leaving a row i will send row data to the server. Cells (columns) are the types “text”, “date” and “listbox”. Listbox must be with a search inputfield which mean that option “filterable” on the listbox is true.

I’m not interested in a search/filter row.

I have seen many grids but soo far jqwidgets seems to be the best choice. However i really need to be able to have a listbox type and also to enter the grid fields easy with just one mouseclick or keyboard arrows.

[HristoParticipant]

Hello mixcoder,

Please, take a look at this demo:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/filtering-menu-custom-widgets.htm?light
You could find (“FirstName” and “LastName” columns) how you could create a custom filter menu and there you could set the ListBox with ‘filtering’.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[mixcoderParticipant]

Hello Hristo thanks for your help :).. Its a bit hard to explain but I want a listbox in each cell. I have posted the code and just want to know how to get the value the user enter and then i also ask whether it is possible to enable the cursor in the inputfield at the first mouseclick.

[HristoParticipant]

Hello mixcoder,

Please, take a look at this example:
https://www.jseditor.io/?key=grid-with-filterable-dropdownlist
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[mixcoderParticipant]

Hi again, I still have to mouseclick 2 times to edit the dropdown input field. I also have to mouseclick 2 times to edit the columns with a textfield.

Is it possible somehow to change the grid in a way you only have to mouseclick one time to edit dropdown input search field and normal textfields as well?

Then it would really be a perfect grid. It already seems pretty cool. Thanks

[HristoParticipant]

Hello mixcoder,

You should use open method of the DropDownList in the initedotor callback function of the Grid.
Please, take a look at this example:
https://www.jseditor.io/?key=grid-with-filterable-dropdownlist-1

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[mixcoderParticipant]

Hello Hristo – you are the man of the day. It works perfect now! Thank you very much for your help.

[Author]

Posts