Can I Open a StandAlone Editor instance on a record's Foreign Key?

brendons

I have a datatable (students) that is built on a join of 2 sql tables - Students and Parents.
Students.StudentID,
Students.StudentName,
Students.ParentID
Parents.ParentID
Parents.ParentName

I have 2 editor instances - studentsEditor and parentsEditor. The studentsEditor is attached to the students datatable. The parentsEditor is not attached to any datatable.
The regular Edit button opens the studentsEditor no problems.

I want to add a second button to open the parentsEditor as a stand alone Editor and have it operate on the parent record that is defined by the ParentID (by passing in the ParentID value to the editor instance).

For my parentsEditor button I've tried:

      buttons: [
                        {extend: "edit", editor: studentsEditor},
                        {extend: "remove", editor: studentsEditor},
                        {extend: "selectedSingle",
                            text: "Edit Parent",
                            action: function (e, dt, node, config) {
                                parentsEditor
                                .edit(dt.rows({selected: true}).data()[0].Students.ParentID.valueOf(), true);        
                            }
                        }

but that just opens an empty lightbox.

How do I call the parentsEditor to open as a stand alone Editor from my new button? I tried to follow the stand alone editor example in the php docs but could not see where the data-editor-field fits in.
Thanks in advance
Brendon

allan

Hi Brendon,

With a standalone Editor, if the values aren't available in the HTML (using the Editor data-* attributes) you need to use the API to set the values - specifically val(), field().val() or one of the similar setter methods. You'll need to get the data you want to use from the selected row (which you already have from your row().data() call.

There is another consideration to make - Editor PHP and .NET libraries can actually edit the fields from the joined table as part of the master form, if that is all you want to do. You just need to make sure you submit the primary key value of the joined table for the row you want to edit - typically in a hidden field (hidden)!

Allan

brendons

Thanks for the reply Allan.
I did consider the solution to 'edit the fields from the joined table as part of the master form', but as the production version has 3 quite 'wide' tables, then the edit form would have too many fields to be practical (I purposely simplified my example so I could explain it clearly).

I was also concerned about the amount of data that was being returned by the initial query (1000 rows, 3 tables of 20 columns). I wanted to present just a few fields from the query in the initial datatable and then drill down for the full details from each table in its own standalone editor.

Your suggestion to use the API to set the values was spot on and I am now able to open a standalone editor for each of my tables as required.

Many thanks.

In case it helps others I have included a snippet from my final code.

I use the ForeignKey_ID of the selected row in an ajax call to retrieve the full record which I load into a standalone instance of an editor. Sweet!

 {extend: "selectedSingle",
      text: "Edit Parent2",
      action: function (e, dt, node, config) {
      if (dt.rows({selected: true}).data()[0].enrollment_applications.Guardian2ID.valueOf() != 0) {
         var guard2ID = dt.rows({selected: true}).data()[0].enrollment_applications.Guardian2ID.valueOf();
      } else {
          return;
      }
      $.ajax({
          url: "php/enrGuardiansData.php",
          dataType: "json",
          type: "POST",
          data: 
              {
                   ID: guard2ID
              },
          success: function (result) 
               {
                    var guard2FirstName = result["data"][0]["GuardianFirstName"];
                    var guard2LastName = result["data"][0]["GuardianLastName"];
                    var guard2Email = result["data"][0]["GuardianEmail"];
                     ... (more fields)

                    guardian1Editor
                        .edit(guard2ID, false)
                        .set('GuardianFirstName', guard2FirstName)
                        .set('GuardianLastName', guard2LastName)
                        .set('GuardianEmail', guard2Email)
                        ... (set more fields)

                        .buttons({
                             label: "Save",
                                            fn: function () {
                                                this.submit();
                                            }
                         })
                         .open();
                }
          });
      }
  },

allan

Looks awesome - thanks for sharing your code with us!

Allan