Dependent Dropdown inside JQXGRID

[KiranParticipant]

Hello,

I’m using the Jqwidgets in my school project. However, I’m unable to continue further due to dependency dropdown in grid.
I checked , which was answered by Peter Stoev. This will work if the values are static or hard coded. However, I need to get the values from db. Here is what I tried. Please help.

Code:
`{ text: ‘Group’, datafield: ‘group1’, columntype: ‘dropdownlist’,
initeditor: function (row, column, editor) {
// assign a new data source to the combobox.

var teamName= $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “team”);

if(teamName){
$.ajax({
url:’getGroups.php?teamName=’+teamName,
type:”GET”,
success:function(result){
alert(result); // I’m getting the required data here.
groupnames=(result);
}

});

}
editor.jqxDropDownList({ autoDropDownHeight: true, source: groupnames });
},
// update the editor’s value before saving it.
cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;
},
width: “9%”,cellclassname: “columncolorEdit”, cellsrenderer: renderer
}`

Thanks,
Kiran

[KiranParticipant]

{ text: ‘Group’, datafield: ‘group1′, columntype: ‘dropdownlist’, initeditor: function (row, column, editor) {
var teamName= $(‘#jqxgrid’).jqxGrid(‘getcellvalue’, row, “team”);
if(teamName){
$.ajax({
      url:’getGroups.php?teamName=’+teamName,
      type:”GET”,
     success:function(result){
     alert(result); // I’m getting the required data here.
     groupnames=(result);
     }
    });
}
editor.jqxDropDownList({ autoDropDownHeight: true, source: groupnames });
},

cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
// return the old value, if the new value is empty.
if (newvalue == “”) return oldvalue;
},
width: “9%”,cellclassname: “columncolorEdit”, cellsrenderer: renderer
}

[DimitarParticipant]

Hello Kiran,

I think that in your case you should apply the logic presented in the PHP integration demo Cascading ComboBox. You may require a unique ID (key) that connects both sources (similar to the datafield “CustomerID” in the demo).

If you need any further assistance, please do not hesitate to contact us again.

Best Regards,
Dimitar

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

[KiranParticipant]

Hello Dimitar,
Thanks for your help.
I followed the steps mentioned demo. But still unable to get the data. Can you please help.

var groupSource =
		{
			datatype: "json",
			datafields: [
                                { name: 'teamId'},
				{ name: 'group1Name'},
                                { name: 'sl'}
			        ],
                       
			url: 'getGroups.php',
			cache: false,
			async: false
		};

  var groupAdapter = new $.jqx.dataAdapter(groupSource);

——

 { text: 'Team', datafield: 'team',columntype: 'dropdownlist',
                        createeditor: function (row, column, editor) {
                             editor.jqxDropDownList({ autoDropDownHeight: true, source: teamnames});
                        }, cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                       if (newvalue == "") return oldvalue;
                            else{
                                groupSource.data = {teamId: newvalue};
                                groupAdapter = new $.jqx.dataAdapter(groupSource);
                            }
                        },    
            
                      width:  "7%",cellclassname: "columncolorEdit", cellsrenderer: renderer },

{ text: 'Group', datafield: 'group1', columntype: 'dropdownlist',
                        createeditor: function (row, column, editor) {
                           editor.jqxDropDownList({ autoDropDownHeight: true, source: groupAdapter });
                        },
                       cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            if (newvalue == "") return oldvalue;
                        },    
                       width:  "9%",cellclassname: "columncolorEdit", cellsrenderer: renderer }

I’m able to receive the teamId to getGroups.php when ever there is change in team dropdown and process and returns the json values. However, I cannot see any details in group drop down. I’m unable to understand where I’m going wrong. Please help.

Thanks,
Kiran

[DimitarParticipant]

Hi Kiran,

I think you should update the “Group” column’s source in the initeditor callback function. Please note that createeditor is called when the cells editor is created (once), but initeditor is called each time the cells editor is opened.

Best Regards,
Dimitar

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

[KiranParticipant]

Hello Dimitar,

Made following change. But still no success.

{ text: 'Group', datafield: 'group1', columntype: 'dropdownlist',
                        initeditor: function (row, column, editor) {
                           editor.jqxDropDownList({ autoDropDownHeight: true, source: groupAdapter });
                        },
                       cellvaluechanging: function (row, column, columntype, oldvalue, newvalue) {
                            if (newvalue == "") return oldvalue;
                        },    
                       width:  "9%",cellclassname: "columncolorEdit", cellsrenderer: renderer }

But one thing, the drop down height is getting adjusted based upon content, but with blank field.
I guess, I’m near to solution but not sure what I’m missing. 🙁

Thanks,
Kiran

[KiranParticipant]

Hello Dimitar,

Can you please create a page or code and share. I’m urgent need of it.

Thanks,
Kiran

[DimitarParticipant]

Hello Kiran,

Unfortunately, we cannot provide you with a complete solution because we do not have access to your back end or data. Your approach seems correct and the issue may originate in another part of the code. Could you, please share if there are any errors thrown in your browser’s console? You can also check if the data adapter correctly receives the data using the callback function loadComplete. More information about it can be found here: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdataadapter/jquery-data-adapter.htm.

Best Regards,
Dimitar

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

[Author]

Posts