How to fill an editor update form selection list dynamically based on other fields' selected value

bjlap

Hi,
I have an editor update form that updates a record in a table and that has two fields with a selection list. The first field has a selection list that is queried from the database. Works fine. (field is of type 'select' and the c# initialisation code in the controller retrieves a list of values).

My question is, I want the values of the second list in the update form to be determined by the selected value in the first list. (The first list is a project list and the second list is an activity in the selected project.). So each time the user selects a value in the first list, the second list must be updated based on the selected value. How can this be done with datatable editor forms?

Thanks in advance,
Bert-Jan

btree

Hi,

you could do something like this:

editor.on('open', function( e, mode, action) {

 //Code on Open
 val val = editor.get('project_field');
 load_list(val); //Function to load Select List

 //Listener when User changes Dropdown
 editor.dependent( 'project_field', function ( val, data, callback ) {
     load_list(val); //Function to load Select List
 });

});

the load_list would be a ajax function where you get the items from the database for the project val

function load_list(val){
 $.ajax({
       type: "POST",
       url: 'controller.php',
       data: {action: 'load_activity', id: val}, 
       success:function(data) {
           e = $.parseJSON(data);  //make PHP JSON TO JQUERY OBJECT
               var obj = new Object;
               $.each(e,function(key, value)  //GET EACH OBJECT
               {
                    obj[value.job] = value.id;
               });
               editor.field('activity_field').update(obj);     //Update Select List
 })
}   

Cheers
Hannes

allan

Actually - you can simplify that code - dependent() will make the Ajax call for you. You can configure it to use a local function as @btree has, but you might find it easier to just let it make the call for you.

You will need to write an access API on the server that will accept the Ajax request and return the JSON with the options. The dependent() documentation has details of this.

Allan

bjlap

Thanks a lot! Got this to work by simply adding

editorHours.dependent('Project.Id', function (val, data, callback) {
                $.ajax({
                    url: '/Admin/GetActivities?projectId=' + val,
                    dataType: 'json',
                    success: function (json) {
                        callback(json);
                    }
                });

And I had to code a GetActivities controller action that return json with an option object and values for the activity form select input control