Drop Down in Grid not Initializing on Load

[njaParticipant]

Hi there,
I am trying to add a drop down for grid column. The problem is that when the grid loads the cell with the drop down is blank. If you click on the cell the drop down pops up and you can select a value.

This happens for the “DistrictCourtNumber” column with the list for the drop down being pulled from the database.

There is a dedicated list drop down for “CourtDecision” which is working correctly.

Thanks,
nja

           // ============ CREATE THE GRID ===================//
            // prepare the data, each datafield should have a “type” field – “string”, “number”, “bool” or “date”.
            var urlToGoTo = '/SB384record/geCurrentData/'
            var source = {
                type: "POST",
                datatype: "json",
                datafields: [
                    { name: 'SB384recordId', type: 'number' },
                    { name: 'SubmittingOrganizationORI', type: 'string' },
                    { name: 'DistrictCourtNumber', type: 'string' },
                    { name: 'DataItemID', type: 'string' },
                    { name: 'MessageTimestamp', type: 'date' },
                    { name: 'CourtCaseNumber', type: 'string' },
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'DateOfBirth', type: 'date' },
                    { name: 'CIInumber', type: 'string' },
                    { name: 'PetitionNumber', type: 'string' },
                    { name: 'CourtDecision', type: 'string' },
                    { name: 'DecisionDate', type: 'date' },
                    { name: 'RePetitionDate', type: 'date' },
                    { name: 'Active', type: 'bool' },
                    { name: 'CreatedAt', type: 'date' },
                    { name: 'CreatedBy', type: 'string' },
                    { name: 'LastEditedAt', type: 'date' },
                    { name: 'LastEditedBy', type: 'string' },
                    { name: 'SentBy', type: 'string' },

                ],
                url: urlToGoTo
            };

            var dataAdapter = new $.jqx.dataAdapter(source, {
                loadError: function (jqXHR, status, error) {
                    $("#resultMessage").html(error);
                },
            });

            $("#jqxGrid").jqxGrid({
                width: '100%',
                height: 650,
                source: dataAdapter,
                keyboardnavigation: false,
                editable: true,
                editmode: 'click',
                selectionmode: 'singlerow',
                autoshowloadelement: false,
                enabletooltips: true,
                sortable: true,
                filterable: true,
                showstatusbar: false,
                showaggregates: false,
                //pageable: true,
                altrows: true,
                columns: [
                    {
                        text: '  #', sortable: false, filterable: false, editable: false, menu: false, 
                        groupable: false, draggable: false, resizable: false,
                        datafield: '', columntype: 'number', width: 45,
                        cellsrenderer: function (row, column, value) {
                            return "<div style='margin:4px;text-align: center;'>" + (value + 1) + "</div>";
                        }
                    },
                    //{   text: 'Dist Court Nbr', datafield: 'DistrictCourtNumber', }, 
                    {
                        text: 'Dist Court Nbr', datafield: 'DistrictCourtNumber', displayfield: 'DistCourtNbrNameDisplay',
                        columntype: 'dropdownlist', width: 180, 
                        createeditor: function (row, column, editor) {
                            // var casenbr = $('#jqxInput').jqxInput('val');
                            var newLibURL = "/SB384record/DistCourtNumberDDLData/";
                            var newLibBySecSource =
                            {
                                datatype: "json",
                                datafields:
                                    [                                        
                                        { name: 'DistrictCourtNumber' },
                                        { name: 'DistCourtNbrNameDisplay' }
                                    ],
                                url: newLibURL,
                                async: false
                            };

                            // load adapter from our updated ajax source and assign to grid
                            var newLibDataAdapter = new $.jqx.dataAdapter(newLibBySecSource, {
                                loadError: function (jqXHR, status, error) {
                                    $("#resultMessagePubGrid").html(error);
                                },
                            });

                            editor.source = newLibDataAdapter;
                            editor.jqxDropDownList({
                                source: newLibDataAdapter,
                                displayMember: 'DistCourtNbrNameDisplay',
                                valueMember: 'DistrictCourtNumber',
                                //dropDownVerticalAlignment: 'bottom',
                                //dropDownHorizontalAlignment: 'left'
                            });
                        },

                    },
                    { text: 'Case Nbr', datafield: 'CourtCaseNumber', editable: true, width: 110, },
                    { text: 'First Name', datafield: 'FirstName', editable: true, width: 110, },
                    { text: 'Last Name', datafield: 'LastName', editable: true, width: 110, },
                    { text: 'Date of Birth', datafield: 'DateOfBirth', editable: true, width: 110, cellsformat: 'MM/dd/yyyy', cellsalign: 'right', },
                    { text: 'CII Nbr', datafield: 'CIInumber', editable: true, width: 110, },
                    { text: 'Petition Nbr', datafield: 'PetitionNumber', editable: true, width: 110, },
                    {
                        text: 'Court Decision', datafield: 'CourtDecision', editable: true, width: 150, columntype: 'dropdownlist',
                        createeditor: function (row, column, editor) {
                            // assign a new data source to the dropdownlist.
                            var list = ['Granted', 'Denied', 'Dismissed'];
                            editor.jqxDropDownList({ autoDropDownHeight: true, source: list });
                        },

                    },
                    { text: 'Decision Date', datafield: 'DecisionDate', editable: true, width: 110, cellsformat: 'MM/dd/yyyy', cellsalign: 'right', },
                    { text: 'Re-Petition Date', datafield: 'RePetitionDate', editable: true, width: 110, cellsformat: 'MM/dd/yyyy', cellsalign: 'right', },

                    // =========== Hide these fields ========
                    { text: 'Id', datafield: 'SB384recordId', width: 70, editable: false, hidden: false, },
                    { text: 'Org ORI', datafield: 'SubmittingOrganizationORI', editable: true, width: 110, },
                    { text: 'DOJ Item ID', datafield: 'DataItemID', editable: true, width: 110, },
                    { text: 'Message Timestamp', datafield: 'MessageTimestamp', editable: true, width: 110, },

                    { text: 'Active', datafield: 'Active', editable: true, width: 110, },
                    { text: 'CreatedAt', datafield: 'CreatedAt', editable: true, width: 110, },
                    { text: 'CreatedBy', datafield: 'CreatedBy', editable: true, width: 110, },
                    { text: 'LastEditedAt', datafield: 'LastEditedAt', editable: true, width: 110, },
                    { text: 'LastEditedBy', datafield: 'LastEditedBy', editable: true, width: 110, },
                    { text: 'SentBy', datafield: 'SentBy', editable: true, width: 110, },
                ],
            });

[Yavor DashevParticipant]

Hi nja,

The provided code snippet unfortunately was insufficient for reproducing the reported behavior using the 12.2 version of jQWidgets.

That is why I would like to ask to create a code example which reproduces the reported behavior.

Also I strongly recommend you to update to the latest version of jQWidgets.

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