jqxInput in jqxGrid keeps losing focus

[en88Participant]

Hi, I’m trying to use a jqxInput within a jqxGrid, and have run into an issue where the jqxInput loses focus immediately and only allows one letter to be entered at a time. Javascript below:

$(document).ready(function () {
        //prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: "id" },
                { name: "firstNames" },
                { name: "surname" },
                { name: "dob" },
                { name: "createdDate" },
                { name: "status" },
                { name: "screeningOfficer" },
            ],
            url: "http://localhost:56845/api/BusinessAdministrator",
            pagesize: 20,
            pager: function (pagenum, pagesize, oldpagenum) {
                // callback called when a page or page size is changed
            }
        };

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

        $("#businessAdministratorGrid").jqxGrid({
            width: '100%',
            autoheight: true,
            source: dataAdapter,
            pageable: true,
            pagermode: 'default',
            filterable: true,
            sortable: true,
            autoshowfiltericon: true,
            theme: "darkblue",
            editable: true,
            columns: [
                { text: 'Application ID', dataField: 'id', filtertype: 'checkedlist', editable: false },
                { text: 'First Names', dataField: 'firstNames', filtertype: 'checkedlist', editable: false },
                { text: 'Surname', dataField: 'surname', filtertype: 'checkedlist', editable: false },
                { text: 'Date of Birth', dataField: 'dob', filtertype: 'date', cellsformat: 'dd/MM/yyyy', editable: false },
                { text: 'Created Date', dataField: 'createdDate', filtertype: 'date', cellsformat: 'dd/MM/yyyy', editable: false },
                { text: 'Status', dataField: 'status', filtertype: 'checkedlist', editable: false },
                {
                    text: 'Screening Officer'
                    , columntype: 'template'
                    , dataField: 'screeningOfficer'
                    , filtertype: 'checkedlist'
                    , editable: true
                    , createeditor: function (row, cellValue, editor, cellText, width, height) {
                        var inputElement = $("<input/>").prependTo(editor);
                        inputElement.jqxInput({ source: dataAdapter, displayMember: "screeningOfficer", valueMember: "screeningOfficer", width: width, height: height });
                    }
                },
            ]
        });
    });

Thanks in advance for any help 🙂

[HristoParticipant]

Hello en88,

Please, take a look at this topic:
http://www.jqwidgets.com/community/topic/need-help-with-jqxinput-in-jqxgrid/
I would like to notice you to create new DataAdapter for new Widgets.
Hope this helps.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts