On Edit() item not selected when select list filled with 'dependent()' function

bjlap · November 2015

Hi,
I use Editor to do crud operations on a table. There is one issue I cannot fix.
When modifying a record, all fields are displayed in the form with their current value set or selected correctly. This works fine for all fields except one. This is a select field that is filled by calling the function registered with dependent event. See code below. What happens is that the 'ActivityId' field select list is filled based on the value of field 'ProjectId'. By the way, the dependent function works fine, the activity select list is filled correctly (with all activities for the selected project), it is only that the current activity is not selected when editing a record.

Also, the second time a row is edited (by pressing the 'edit' button for the second time), this works fine! My feeling is that the first time a row is edited, the select list for 'ActivityId' is not filled in time for the selected Activity item to be set. On the second edit (of the same row), it looks like the select list with activities exists already and the current item can be selected.

Is there a way to set the select list for the activityid column a little bit earlier or something the first time a row is edited? It can only happen on or after the row is selected because the projectid (data in the row) is needed to retrieve the select list for activities (as in the depend() method..

Or maybe it is possible to set the selected item after the dependent function has been called?

Thanks in advance,
Bert-Jan

            editorHours = createEditorHours();

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

nitel · November 2015

Hi, I have been having almost the exact same thing happening to me. Assuming I am using the same fields as yourself, my 'ActivityId' select is filled correctly upon changing my 'PojectId' select. But the first edit I do on any record, the 'ActivityId' does not contain the current value (even though the record contains one). If I exit out of the form, then edit it a second time, the value is there.

For my system I need to create a new 'Project' record where the 'Activity' filed is optional (i.e. can sometimes be null). So I have been adding a 'Please Select' option with a value of null to my repopulated select list. I have been assuming that it is this that is causing the problem?

bjlap · November 2015

Hmm, interesting, In my case ActivityId is also optional. I have an extra value added to the list of options, with a label 'Activity Not Specified'. All my keys are Guids, so I added an 'empty' guid. ('000-00 etc"), I am not sure if that was wise :-). Maybe that causes the problem. will try tonight without this value. if that works, there is still a problem, that 'Activity Not Specified' value is needed somehow, user must be able to select it. To be continued...

allan · November 2015

Hi,

Are you able to give me a link to the page so I can investigate what is happening? I'm wondering if there is an async load of the options and, although the value to be selected is not available when Editor tries to select it initially, it is then added - but because that value wasn't available initially, it can't then be reselected!

Thanks,
Allan

bjlap · November 2015

I will deploy something tonight... will let you know.

allan · November 2015

I think I've been able to successfully reproduce the error using:

    editor = new $.fn.dataTable.Editor( {
        ajax: "../php/staff.php",
        table: "#example",
        fields: [ {
            }, {
                label: "Position:",
                name: "position",
                type: 'select',
                options: [ 1,2,3 ]
            }, {
                label: "Office:",
                name: "office",
                type: 'select',
                options: [ 4,5,6 ]
            }
        ]
    } );

    editor.dependent( 'position', function ( val, obj, callback ) {
        setTimeout( function () {
            if ( val == 2 ) {
                callback( {
                    options: {
                        office: [ 7,8,9 ]
                    }
                } );
            }
        }, 1000 );
    } );

If I set Position in a record to "2" and Office to "8", then reload the page. Next try to edit that record and Office is not preselected to be "8" as it should be.

I'll need ot have a little think about how to correctly handle that. Let me get back to you.

Allan

bjlap · November 2015

Thanks a lot Allan, let me know how you get on..

allan · November 2015

Little update on this. I've just committed a change which will be in Editor 1.5.3 (which I plan to release shortly) that will address this issue for select.

Unfortunately it doesn't address this issue if it were to occur with other field types (generally not a problem with text inputs, but checkboxes might also stuff). It was proving to be quite difficult to come up with a solution that will resolve it for all cases without making everything async - which would change the API significantly.

I'm going to keep working on a generic fix, but the select lists will at least work correctly in this regard from 1.5.3.

Allan

bjlap · November 2015

Thanks, will update this weekend and met you know how I got on..

bjlap · November 2015

Hi Allan, I downloaded editor 1.5.3, installed and compiled the .net code, updated the .js and .css files. The issue now seems partially fixed. If a table with three rows is displayed, when editing the first two rows for the first time, the selected items are set correctly (preseleted) in the edit form, the third row however still has the issue that the value of the dependent field is not preselected when editing the row for the first time...

I hope this information helps you determining what is wrong.
Let me know what you can do,
Bert-Jan

allan · November 2015

Hi,

Unfortunately a three level dependency is somewhere that my localised fix isn't going to work- that would really need the more considerable structural change to how Editor sets the values. I'm still planning how that will actually work - and I don't really have a workaround at the moment because the select field type will get the value from the select element rather than using the raw value.

I am continuing to work on how to fix this fully, but I suspect it might take a little bit of time to get something that do work satisfactorily in this regard - sorry!

Allan

bjlap · November 2015

Thanks Alan, no problem if it takes some time to get a fix. One thing though, what I meant was that when a table with three rows is displayed (each with a similar set of fields where one select list depends on another), this works fine for the first two rows, but the third row still has the issue. Example:

Project | Activity
Project1 | Activity1
Project1| Activity 2
Project 3 | Activity3 -> when editing this row, the activity field in the select form is not preselected correctly.

Bert-Jan

slicksystems · February 2016

Hi, has there been any progress on this? We also have some cascading dropdowns that go 3 levels deep, and cannot figure out a way to get it to work.

Steve

allan · February 2016

I'm targeting the next major version of Editor for this fix, but that is likely some months off I'm afraid. At the moment the only way around this is to use an async: false Ajax fetch for the data feeds.

Allan

On Edit() item not selected when select list filled with 'dependent()' function

On Edit() item not selected when select list filled with 'dependent()' function

Answers

Howdy, Stranger!

Categories

DataTables

On Edit() item not selected when select list filled with 'dependent()' function

On Edit() item not selected when select list filled with 'dependent()' function

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables