jQuery UI Widgets Forums Grid Problems with Dropdownlist from Lookuptable

Tagged: ,

This topic contains 17 replies, has 2 voices, and was last updated by  Martin 5 years, 7 months ago.

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author

  • ckay2003
    Participant

    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);
                });
    

    Martin
    Participant

    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/


    ckay2003
    Participant

    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?


    Martin
    Participant

    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/


    ckay2003
    Participant

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


    ckay2003
    Participant

    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.


    Martin
    Participant

    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/


    ckay2003
    Participant

    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?


    ckay2003
    Participant

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


    Martin
    Participant

    Hello ckay2003,

    Thank you for the update!

    Best Regards,
    Martin

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


    ckay2003
    Participant

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


    ckay2003
    Participant

    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.


    Martin
    Participant

    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/


    ckay2003
    Participant

    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

    Martin
    Participant

    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/

Viewing 15 posts - 1 through 15 (of 18 total)

You must be logged in to reply to this topic.