jQuery UI Widgets Forums Grid Dependent Dropdown inside JQXGRID

This topic contains 7 replies, has 2 voices, and was last updated by  Dimitar 7 years, 11 months ago.

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • Dependent Dropdown inside JQXGRID #85158

    Kiran
    Participant

    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

    • This topic was modified 7 years, 11 months ago by  Kiran.
    Dependent Dropdown inside JQXGRID #85160

    Kiran
    Participant
    { 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
    }
    Dependent Dropdown inside JQXGRID #85283

    Dimitar
    Participant

    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/

    Dependent Dropdown inside JQXGRID #85354

    Kiran
    Participant

    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

    • This reply was modified 7 years, 11 months ago by  Kiran. Reason: Added last line with more detials
    • This reply was modified 7 years, 11 months ago by  Kiran.
    Dependent Dropdown inside JQXGRID #85376

    Dimitar
    Participant

    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/

    Dependent Dropdown inside JQXGRID #85380

    Kiran
    Participant

    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

    Dependent Dropdown inside JQXGRID #85426

    Kiran
    Participant

    Hello Dimitar,

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

    Thanks,
    Kiran

    Dependent Dropdown inside JQXGRID #85454

    Dimitar
    Participant

    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/

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.