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

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

bjlapbjlap Posts: 29Questions: 11Answers: 1

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

Replies

  • btreebtree Posts: 99Questions: 14Answers: 11

    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

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • bjlapbjlap Posts: 29Questions: 11Answers: 1

    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

This discussion has been closed.