Problems with Dropdownlist from Lookuptable

[ckay2003Participant]

Hi, I setup a grid and one column should be a dropdownlist, that is getting the label from a lookup-table in mysql. But I can’t get it to work. label always stays undefined. I used this example as a guide https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/gridkeyvaluescolumnwitharray.htm?web

The dataAdapter gvadapter delivers the correct results. I can’t find any error in my code.

var gvsource={
              datatype: "json",
              datafields: [
                  {name: 'label', type: 'string' },
                  {name: 'value', type: 'string'}
              ],
              url: './scripts/kategorien.php?action=getgv'
            };
            
            var gvadapter=new $.jqx.dataAdapter(gvsource,{
                loadComplete: function(records) {
                    var length = records.length;
                    console.log('GVs:'+length);
                },
                loadError: function(jqXHR, status, error) {
                    console.log('GVs Error:'+error);
                },
                beforeLoadComplete: function (records) {
                    console.log('GVs Lade Daten!');
                },
                autoBind: true
            });
            var source ={
                datatype: "json",
                datafields: [
                    { name: 'ID' },
                    { name: 'Kategorie' },
                    { name: 'Rückruf'},
                    { name: 'Bekannt'},
                    { name: 'Relevant'},
                    { name: 'Priorität'},
                    { name: 'GV', value: 'GVID', values: { source: gvadapter.records, value:'value', name:'label'}},
                    { name: 'GVID', type:'string'}
                ],
                id:'ID',
                url: './scripts/kategorien.php',
                updaterow: function (rowid,rowdata,commit) {
                    var data="action=update&Rückruf="+rowdata.Rückruf + "&ID="+rowdata.ID;
                    $.ajax({
                       dataType:'html' ,
                       url:'./scripts/kategorien.php',
                       data: data,
                       success: function (data,status,xhr){
                           console.log('success');
                           commit(true);
                       },
                       error: function(xhr,status,error) {
                           commit(false);
                           console.log('error:'+xhr.responseText);
                       }
                    });
                }
            };
            var dataAdapter=new $.jqx.dataAdapter(source);
            $("#kategoriediv").jqxGrid({
                source: dataAdapter,
                editable:true,
                width: 760,
                autoheight:true,
                selectionmode: 'singlecell',
                theme: theme,
                columns: [
                    { text: 'ID', datafield: 'ID', width: 50, editable: false },
                    { text: 'Kategorie', datafield: 'Kategorie', width: 300,editable:false },
                    { text: 'Rückruf', datafield: 'Rückruf', width: 70,editable:true, columntype: 'checkbox' },
                    { text: 'Bekannt', datafield: 'Bekannt', width: 70,editable:true, columntype: 'checkbox' },
                    { text: 'Relevant', datafield: 'Relevant', width: 70,editable:true, columntype: 'checkbox' },
                    { text: 'Priorität', datafield: 'Priorität', width: 100,editable:true },
                    { text: 'GV-Vorlage', datafield: 'GVID', displayfield:'GV', columntype:'dropdownlist',
                        createeditor: function(row, value, editor) {
                            editor.jqxDropDownList({
                               source: gvadapter, displayMember: 'label', valueMember: 'value' 
                            });
                        }
                    }
                ]
            });
            
            $("#kategoriediv").on('cellselect', function (event) {
                var column = $("#kategoriediv").jqxGrid('getcolumn', event.args.datafield);
                var value = $("#kategoriediv").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                var displayValue = $("#kategoriediv").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);

                console.log("Selected Cell - Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue);
            });

[MartinParticipant]

Hello ckay2003,

Please, take a look at this Forum Topic.
I suppose that the reason for the issue that you are having is the same.
Try setting async: false to your sources.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ckay2003Participant]

Hello Martin,
that helped, now the label is filled for the column. When I click on a cell the little arrow for the dropdown shows, but the dropdown doesn’t open. any ideas?

[MartinParticipant]

Hello ckay2003,

Try setting the dropDownList’s autoOpen property to “true”.
This will open it when the arrow shows and the mouse is over the dropdown.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ckay2003Participant]

That unfortunatly doesn’t change it. I can and could before change the entries with the keyboard, but they are not dropping down.

[ckay2003Participant]

this is strange. my grid has quite a lot of rows (over 700) and if I scroll down several pages it works, but not on the rows above.

[MartinParticipant]

Hello ckay2003,

Are the dropdowns not opening at all?
Do you have any errors in the console?
It doesn’t seems to be anything wrong in your code.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ckay2003Participant]

Well they are going into edit-mode so I can change the value with the keyboard, but it’s not dropping down the entries. I have no errors in the console.
And like I said before, if I scroll down a few hundred rows it suddenly works.
I haven’t tried yet, but maybe paging would solve this?

[ckay2003Participant]

The solution was indeed, to make the grid pageable. Now it works really good.

[MartinParticipant]

Hello ckay2003,

Thank you for the update!

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ckay2003Participant]

I just found another problem. Since I set the grid to pageable, the checkboxcolumns don’t change their status when clicked anymore.

[ckay2003Participant]

it seems that it’s not a problem with checkbox-columns alone. the event cellvaluechanged has the new value. the grid doesn’t show the updated value and updaterow is never fired.

[MartinParticipant]

Hello ckay2003,

Please, take a look at this Example.
You can see that both cellvaluechanged and updaterow are fired when you click on a checkbox.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[ckay2003Participant]

Yes usually it does. not in my case. it does effect all editable fields, not just the checkboxes… I edit a value/click a checkbox and when I finish it goes back to the original value…
cellvaluechanged is fired and has the new value, but updaterow never fires.

Here’s my updated source:

var gvsource={
              datatype: "json",
              datafields: [
                  {name: 'label', type: 'string' },
                  {name: 'value', type: 'string'}
              ],
              url: './scripts/kategorien.php?action=getgv',
              async: false
            };
            
            var gvadapter=new $.jqx.dataAdapter(gvsource,{
                loadComplete: function(records) {
                    var length = records.length;
                    console.log('GVs:'+length);
                },
                loadError: function(jqXHR, status, error) {
                    console.log('GVs Error:'+error);
                },
                beforeLoadComplete: function (records) {
                    console.log('GVs Lade Daten!');
                },
                autoBind: true
            });
            var source ={
                datatype: "json",
                datafields: [
                    { name: 'ID' },
                    { name: 'Kategorie' },
                    { name: 'Rückruf', type: 'bool'},
                    { name: 'Bekannt', type: 'bool'},
                    { name: 'Relevant', type: 'bool'},
                    { name: 'Priorität', type: 'int'},
                    { name: 'GV', value: 'GVID', values: { source: gvadapter.records, value:'value', name:'label'}},
                    { name: 'GVID', type:'string'}
                ],
                id:'ID',
                url: './scripts/kategorien.php',
                root: 'Rows',
                beforeprocessing: function(data) {
                    source.totalrecords=data[0].TotalRows;
                },
                async: true,
                updateRow: function (rowid,rowdata,commit) {
                    var data="action=update&ID="+rowid.ID+"&Rückruf="+rowdata.Rückruf + "&Kategorie="+rowdata.Kategorie+"&Bekannt="+rowdata.Bekannt+"&Relevant="+rowdata.Relevant+"&Priorität="+rowdata.Priorität+"&GVID="+$rowdata.GVID;
                    
                    $.ajax({
                       dataType:'html' ,
                       url:'./scripts/kategorien.php',
                       data: data,
                       success: function (data,status,xhr){
                           console.log(data);
                           commit(true);
                       },
                       error: function(xhr,status,error) {
                           commit(false);
                           console.log('error:'+xhr.responseText);
                       }
                    });
                }
            };
            var dataAdapter=new $.jqx.dataAdapter(source);
            $("#kategoriediv").jqxGrid({
                source: dataAdapter,
                editable:true,
                width: 820,
                autoheight:true,
                selectionmode: 'singlecell',
                altrows:true,
                theme: theme,
                pageable:true,
                virtualmode: true,
                rendergridrows: function(params) {
                    return params.data;
                },
                columns: [
                    { text: 'ID', datafield: 'ID', width: 50, editable: false },
                    { text: 'Kategorie', datafield: 'Kategorie', width: 300,editable:false },
                    { text: 'Rückruf', datafield: 'Rückruf', width: 70,editable:true, columntype: 'checkbox' },
                    { text: 'Bekannt', datafield: 'Bekannt', width: 70,editable:true, columntype: 'checkbox' },
                    { text: 'Relevant', datafield: 'Relevant', width: 70,editable:true, columntype: 'checkbox' },
                    { text: 'Priorität', datafield: 'Priorität', width: 100,editable:true },
                    { text: 'GV-Vorlage', datafield: 'GVID', displayfield:'GV', editable:true,width: 150, columntype:'dropdownlist',
                        createeditor: function(row, value, editor) {
                            editor.jqxDropDownList({
                               source: gvadapter, displayMember: 'label', valueMember: 'value' 
                            });
                        }
                    }
                ]
            });
            
            $("#kategoriediv").on('cellselect', function (event) {
                var column = $("#kategoriediv").jqxGrid('getcolumn', event.args.datafield);
                var value = $("#kategoriediv").jqxGrid('getcellvalue', event.args.rowindex, column.datafield);
                var displayValue = $("#kategoriediv").jqxGrid('getcellvalue', event.args.rowindex, column.displayfield);

                console.log("Selected Cell - Row: " + event.args.rowindex + ", Column: " + column.text + ", Value: " + value + ", Label: " + displayValue);
            });
            $("#kategoriediv").on('cellbeginedit', function (event) {
                console.log('edit');
            });
            $("#kategoriediv").on('cellendedit', function (event) {
                console.log('edit end');
            });
            $("#kategoriediv").on('cellvaluechanged', function (event) {
                var args=event.args;
                console.log('cell changed: old value:'+args.oldvalue+' new value:'+args.newvalue);
            });

Sample Output in Console:

edit
cell changed: old value:false new value:true
edit end

[MartinParticipant]

Hello ckay2003,

We still could not reproduce this issue.
Can you provide some more details like browser, device?

You can try calling the grid’s updaterow method on cellvaluechanged or cellendedit.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts