keyboard navigation fails for server call

[dwarikanathParticipant]

Hi,

I have grid which calls a server method on row selection. I call server method using ajax using rowselect event of the grid.But the up-down arrow key does not work for the scenario. Is it possible to enable this keyboard navigation feature for the same.

Here is our script

var source = {
            datatype: "json",
            datafields: [
                            { name: 'ApplicationID' },
                            { name: 'ProfileID' },
                            { name: 'StudentID' },
                            { name: 'OccupationID' },
                            { name: 'MediCalID' },
                            { name: 'SelectedApplicationIndex' },
                            { name: 'Name' },
                            { name: 'ApplicantDate', type: 'date' },
                            { name: 'Gender' },
                            { name: 'DateOfBirth', type: 'date' },
                            { name: 'State' },
                            { name: 'Replacing' },
                            { name: 'Status' }
            ],
            url: Applicant.ApplicantDtailsUrl +
                        "?orderBy=" + $("#hdnsortcolumn").val() +
                        "&orderByDirection=" + $("#hdnsortdirection").val() +
                        "&StationID=" + $("#StationID").val() +
                        "&ChannelID=" + $("#ChannelID").val() +
                        "&ProgramID=" + $("#ProgramID").val() +
                        "&TabID=" + $("#TabID").val(),
            contentType: "application/json; charset=utf-8",
            id: 'ApplicationID'
        };

        var dataAdapter = new $.jqx.dataAdapter(source, {
            downloadComplete: function (data, status, xhr) { },
            loadComplete: function (data) { },
            loadError: function (xhr, status, error) { }
        });
        
        $("#jqxgrid").jqxGrid({
            width: '100%',
            source: dataAdapter,
            theme: 'greenshed',
            columnsresize: true,
            filterable: true,
            sortable: true,
            pageable: false,
            selectionmode: 'singlerow',
            groupable: false,
            enabletooltips: true,
            autoshowfiltericon: true,
            keyboardnavigation: true,
            height: 395,
            columns: [
                         { text: 'ApplicationID', datafield: 'ApplicationID', width: 0 },
                         { text: 'ProfileID', datafield: 'ProfileID', width: 0 },
                         { text: 'StudentID', datafield: 'StudentID', width: 0 },
                         { text: 'OccupationID', datafield: 'OccupationID', width: 0 },
                         { text: 'MediCalID', datafield: 'MediCalID', width: 0 },
                         { text: 'SelectedApplicationIndex', datafield: 'SelectedApplicationIndex', width: 0 },
                         { text: 'Name', datafield: 'Name', width: '20%' },
                         { text: 'Application  Date', datafield: 'ApplicantDate', width: '15%', cellsformat: 'MM/dd/yyyy' },
                         { text: 'Sex', datafield: 'Gender', width: '5%' },
                         { text: 'Date of Birth', datafield: 'DateOfBirth', width: '15%', cellsformat: 'MM/dd/yyyy' },
                         { text: 'State', datafield: 'State', width: '10%' },
                         { text: 'Replacing', datafield: 'Replacing', width: '15%' },
                         { text: 'Status', datafield: 'Status', width: '20%' }

            ],
            ready: function () {
            },
        });

        $("#jqxgrid").on("bindingcomplete", function (event) {
            if ($('#jqxgrid').jqxGrid('getrowid', 0) == null) {
                $('#divMainHeader').html('');
                SEIS.Common.Core.DisableTab();
                SEIS.Common.Core.DisableControl();
                $('#totCount').text('');
                $('#selectrowindex').text('');
                $('#of').text('');
            }
            else {
                SEIS.Common.Core.EnableTab();
                SEIS.Common.Core.EnableControl();
            }
           
            $("#jqxgrid").jqxGrid('hidecolumn', 'ApplicationID');
            $("#jqxgrid").jqxGrid('hidecolumn', 'ProfileID');
            $("#jqxgrid").jqxGrid('hidecolumn', 'StudentID');
            $("#jqxgrid").jqxGrid('hidecolumn', 'OccupationID');
            $("#jqxgrid").jqxGrid('hidecolumn', 'MediCalID');
            $("#jqxgrid").jqxGrid('hidecolumn', 'SelectedApplicationIndex');
            $('#jqxgrid').jqxGrid('selectrow', $('#jqxgrid').jqxGrid('getcellvalue', 0, "SelectedApplicationIndex"));
            $('#jqxgrid').jqxGrid('ensurerowvisible', $('#jqxgrid').jqxGrid('getcellvalue', 0, "SelectedApplicationIndex"));
        });

 $('#jqxgrid').on('rowselect', function (event) {
                var rows = $('#jqxgrid').jqxGrid('getrows');
                $('#totCount').text(rows.length);
                $('#selectrowindex').text((event.args.rowindex + 1));
                $('#of').text(' of ');

                Applicant.FillHiddenValueOnGridRowSelect(event.args.rowindex)
            });

            $("#jqxgrid").on("sort", function (event) {
                var sortinformation = event.args.sortinformation;
                var sortcolumn = sortinformation.sortcolumn;
                var sortdirection;

                if ($('#hdnsortcolumn').val() == sortcolumn) {
                    if ($('#hdnsortdirection').val() == "ASC") {
                        sortdirection = "DESC";
                    }
                    else {
                        sortdirection = "ASC";
                    }

                }
                else {
                    sortdirection = "ASC";
                }

                $('#hdnsortcolumn').val(sortcolumn);
                $('#hdnsortdirection').val(sortdirection);

                -- here we are calling the same grid
            });

--this is the method called from rowselect event 
Applicant.FillHiddenValueOnGridRowSelect = function (row) {
        var jsApplicationid, jsProfileId, jsStudentId, jsOccupationId, jsMedicalId;
        if (row != -1) {
            jsApplicationid = $('#jqxgrid').jqxGrid('getcellvalue', row, "ApplicationID");
            jsProfileId = $('#jqxgrid').jqxGrid('getcellvalue', row, "ProfileID");
            jsStudentId = $('#jqxgrid').jqxGrid('getcellvalue', row, "StudentID");
            jsOccupationId = $('#jqxgrid').jqxGrid('getcellvalue', row, "OccupationID");
            jsMedicalId = $('#jqxgrid').jqxGrid('getcellvalue', row, "MediCalID");
        }
        else {
            jsApplicationid = 0;
            jsProfileId = 0;
            jsStudentId = 0;
            jsOccupationId = 0;
            jsMedicalId = 0;
        }
        $("#currentApplicationID").val(jsApplicationid);
        $("#currentProfileID").val(jsProfileId);
        $("#currentStudentID").val(jsStudentId);
        $("#currentOccupationID").val(jsOccupationId);
        $("#currentMedicalID").val(jsMedicalId);

        $.ajax({

            type: 'POST',
            url: Applicant.SetSession + "?StationID=" + $("#StationID").val() +
                        "&ChannelID=" + $("#ChannelID").val() +
                        "&ProgramID=" + $("#ProgramID").val() +
                        "&TabID=" + $("#TabID").val(),
            data: $('#WorkingWithApplicantForm').serialize(),
            success: function (data) {
                SEIS.Common.Core.ShowHeader(0, 'intApplicationID=' + ($("#currentApplicationID").val() != '' ? $("#currentApplicationID").val() : 0));
            },
            error: function (data) {
                //alert(data.responseText);
            }
        });
    }

[Peter StoevKeymaster]

Hi dwarikanath,

This may happen if on “rowselect” you directly or indirectly focus another HTML Element. The keyboard navigation will work only if the Grid widget is on Focus, but if the Grid widget loses the focus, the keyboard events will not be processed by the Grid.
Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[dwarikanathParticipant]

Thanks for your quick reply.

While the mouse pointer is on the grid keyboard navigation is working but whenever the mouse pointer is placed outside the grid keyboard navigation functionality stops working. Is this also is because of loosing focus from the grid? Then what should be the way to retain focus.

Thanks
Dwarikanath

[Author]

Posts