How to reload data to dependant combobox inside a grid ?

[wel]

I have a grid that has two dependant comboboxes and I am trying to make the second combobox reload its data when the first one change selection so I wrote this code:

Code:

<th data-options="field:'work_group_id',width:20,
                  formatter:function(value,row){
                       return row.work_group;
                  },
                  editor:{
                      type:'combobox',
                       options:{
                       valueField:'work_group_id',
                       textField:'work_group',
                       method:'get',
                       url:'pages/work_groups.php',
                       required:true,
                       onSelect: function(rec){
                           var loc_ed = $('#dg').datagrid('getEditor', {
                             index: 1,
                             field:'location_id'
                          });
                          var url = 'pages/get_locations.php';
                          $(loc_ed.target).combobox('reload', url);

                     }
                 }
            }

      ">Work Group
</th>

The problem I get JS error that loc_ed is null in the line $(loc_ed.target).combobox('reload', url); !! please advise

[jarry]

Please use 'onBeginEdit' event to get the editors and bind their dependent events. This tutorial shows how to create two dependent editors.

http://www.jeasyui.com/tutorial/datagrid/datagrid15.php

[wel]

I have a problem, I tried to write the code like in the example but using onSelect event but the first combobox text is disappear when I start edit and change selection, also the data for the first combobox is loaded twice why is that ?

Here are the code I used:

Code:

$(function(){
            $('#dg').edatagrid({
                url: 'pages/get_jobmsg.php',
                saveUrl: 'pages/save_jobmsg.php',
                updateUrl: 'pages/update_jobmsg.php',
                destroyUrl: 'pages/destroy_jobmsg.php',
                onBeginEdit:function(index,row){
                    var editors = $(this).datagrid('getEditors', index);

                    var ed_wg  = $(editors[2].target);
                    var ed_loc = $(editors[3].target);

                    ed_wg.combobox({
                        onSelect: function(rec){
                          var url = 'pages/get_locations.php';
                          ed_loc.combobox('reload', url);
                      }
                    });

                },

                onEndEdit: function(index,row){
                    var wg_ed = $(this).datagrid('getEditor', {
                        index:index,
                        field:'work_group_id'
                    });
                    row.work_group = $(wg_ed.target).combobox('getText');

                }
            });
        });

And the columns

Code:

<th data-options="field:'work_group_id',width:20,
                                    formatter:function(value,row){
                                        return row.work_group;
                                    },
                                    editor:{
                                        type:'combobox',
                                        options:{
                                            valueField:'work_group_id',
                                            textField:'work_group',
                                            method:'get',
                                            url:'pages/work_groups.php',
                                            required:true

                                        }
                                    }">Work Group
                                </th>

                                <th data-options="field:'location_id',width:20,
                                    formatter:function(value,row){
                                        return row.location_name;
                                    },
                                    editor:{
                                        type:'combobox',
                                        options:{
                                            valueField:'location_id',
                                            textField:'location_name',
                                            required:true
                                        }
                                    }">Location
                                </th>

And here is a video demonstrate the problem, please advise

https://vid.me/JUex

[jarry]

Please try this code instead.

Code:

onBeginEdit:function(index,row){
    var editors = $(this).datagrid('getEditors', index);

    var ed_wg  = $(editors[2].target);
    var ed_loc = $(editors[3].target);

    ed_wg.combobox('options').onSelect = function(rec){
        var url = 'pages/get_locations.php';
        ed_loc.combobox('reload', url);    
    }
},

[wel]

Many thanks Jarry you saved my day.