child row, coupled with onPageDisplay display controller

louking

Link to test case: http://live.datatables.net/ropewipo/2/edit
Description of problem:

I'm trying to adapt a few examples, and am running into trouble. I expect this is just some dumb bug in my code, but have been looking at it for a while, and maybe I'm misunderstanding something.

I'm using nunjunks with a precompiled template similar to the format() in https://datatables.net/examples/api/row_details.html. Essentially the template creates <div id="childrow-editform-{{ DT_RowId }}"></div> to hang onPageDisplay display controller on. The div gets created fine -- I'm just explaining some of the minor complexity in the test case. The rendering of this template replaces the format() in the row_details example.

This div is in the child row, and I'm attempting to display an Editor form for that child row using the appropriate display option, based on https://datatables.net/blog/2017-06-30. Since multiple child rows might be open, if the editor doesn't exist it is created when the row is shown. So potentially there will be an editor for each child row. (I think this is ok, right?). Since there doesn't seem to be a way to destroy an editor, the editor is maintained and the form just closed when the row is collapsed.

But my problem occurs when I first display the form. It looks like the form is being created, but there's no data / fields in it. I see the following, with nothing in the form_content div.

Can you see what I'm doing wrong?

<div id="childrow-editform-row_5">
   <div class="DTE DTE_Action_Edit">
      <div data-dte-e="head" class="DTE_Header">
         <div class="DTE_Header_Content"></div>
      </div>
      <div data-dte-e="processing" class="DTE_Processing_Indicator"><span></span></div>
      <div data-dte-e="body" class="DTE_Body">
         <div data-dte-e="body_content" class="DTE_Body_Content">
            <div data-dte-e="form_info" class="DTE_Form_Info"></div>
            <form data-dte-e="form" class="" style="display: block;">
               <div data-dte-e="form_content" class="DTE_Form_Content"></div>
            </form>
         </div>
      </div>
      <div data-dte-e="foot" class="DTE_Footer">
         <div class="DTE_Footer_Content"></div>
         <div data-dte-e="form_error" class="DTE_Form_Error"></div>
         <div data-dte-e="form_buttons" class="DTE_Form_Buttons"></div>
      </div>
   </div>
</div>

allan

So potentially there will be an editor for each child row. (I think this is ok, right?).

Yes, if you have an Editor instance per child row, like in this example. I don't actually see that in your example code though - it looks like there is just one Editor instance?

As the example doesn't run, I'm not actually quite clear on the goal here and how it is different on the blog post I've just linked above. Could you clarify that for me please?

Thanks,
Allan

louking

https://datatables.net/blog/2019-01-11 has an editor per row, but that editor operates on a new table, created when the row is expanded.

When the row is expanded, I'm trying to create a new editor for the main table's row within ChildRow.showChild with the line

this.editor[id] = new $.fn.dataTable.Editor(theseoptions)

My purpose eventually is to combine editing of the main table's fields, along with one or more subtables as documented in https://datatables.net/blog/2019-01-11.

This is but my first step, just to edit the fields from the main table, without the modal display, rather in a child row display.

louking

BTW, I've debugged it to the point where I see at line 6773 of dataTables.editor.js

dt.rows( identifier ).indexes().each( function ( idx ) {}

the function doesn't fire, so dt.rows( identifier).indexes() is not returning any values.

louking

And FWIW, here's my stack trace when I reach __dtRowSelector (note this is from my actual code, not the jsbin, but after ChildRow.showChild I would think this would be the same in the jsbin.

__dtRowSelector (dataTables.editor.js:6773)
fields (dataTables.editor.js:6930)
Editor._dataSource (dataTables.editor.js:4961)
Editor.edit (dataTables.editor.js:2794)
ChildRow.showChild (datatables-childrow.js:88)
(anonymous) (datatables-childrow.js:44)
dispatch (jquery.js:5237)
elemData.handle (jquery.js:5044)

allan

Oh I see! Thanks for the clarification. Have a look at this example which does what you want by the sounds of things.

Allan

louking

Hmm. That example seems to allow only one row to be open at a time, using the global editor instance.

I am trying to allow any row to be open, which is why I am trying to use separate editor instances. But maybe you're saying this can't be done using separate editor instances?

louking

So as not to be too much of a pest, I am going to proceed giving up on the idea of allowing multiple editor windows to be open at the same time in different child rows. (Allowing this might be confusing to the user anyway.)

Rather if the row is open I'll display the data in a child row and if the row is selected I'll display the edit form in the child row, allowing the edit. I'll have to figure out how to warn the user if they click between rows after they've made modifications, but that's another discussion, and had to be solved anyway if a row was closed.

I'd already marked your last post as "not answered" and don't see a way to correct that.