bindingcomplete jqxGrid('focus');

[DavidSimmonsParticipant]

Is there a way to when a page loads set focus on the grid for keyboard navigation. I tried this but does not work.

$(jqxgrid).on(“bindingcomplete”, function (event) {
$(jqxgrid).jqxGrid(‘focus’);
});

[Peter StoevKeymaster]

Hi,

Do you bind to “bindingcomplete” before or after the Grid’s initialization? If you bind to it before the Grid’s initialization and “jqxgrid” in your code is a valid i.e $(jqxgrid).length > 0, then the widget will be focused and you will be able to use the keyboard.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavidSimmonsParticipant]

Not sure I know if I bind before or after. How do I tell?

[Peter StoevKeymaster]

Hi,

Check in your code whether you bind to the event before or after calling the jqxGrid’s constructor i.e you should have in your code $(“#grid”).jqxGrid to initialize the widget. You should bind to the “bindingcomplete” before that line. Otherwise, the Grid’s binding could be already completed at the point you bind to the event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DavidSimmonsParticipant]

Seems simple, but I must be missing something….

$(jqxgrid).on(“bindingcomplete”, function (event) {
$(jqxgrid).jqxGrid(‘focus’);
});

$(jqxgrid).jqxGrid({
theme: theme,
width: ‘99.9%’,
height: 800,
source: dataAdapter,
scrollbarsize: 10,
sortable: true,
sorttogglestates: 1,
altrows: true,
pageable: true,
pagesize: 28,
columns: [
{text: ‘ID’, dataField: ‘ID’, width: 60, pinned: true, hidden: false, editable: false, filterable: false},
{text: ‘Category’, dataField: ‘Category’, width: 100, editable: true},
{text: ‘Message’, dataField: ‘Message’, width: 600, editable: false},
{text: ‘Notes’, dataField: ‘Notes’, width: 400, editable: true},
{text: ‘Created’, dataField: ‘Created’, width: 160, editable: false, filterable: false},
{text: ‘CreatedBy’, dataField: ‘CreatedBy’, width: 160, editable: false},
{text: ‘Updated’, dataField: ‘Updated’, width: 160, editable: false, filterable: false},
{text: ‘UpdatedBy’, dataField: ‘UpdatedBy’, width: 160, editable: false, filterable: true},
{text: ”, dataField: ”, width: ‘100%’, editable: false, filterable: false}
]
});

[DavidSimmonsParticipant]

Ok this is working for page end, home, up and down keys but not cursor keys. I am assuming that there needs to be another step to actually use the cursor keys…. Is that correct?

[Author]

Posts