Nested Tables

menashe

I use several nested tables; at least one ne has many row. If The selected row is nor within the visible window, then when I open the nested table it does not scroll to that highlighted/selected row. (If I scroll manually, the row is selected.)

I have based my nested tables on https://editor.datatables.net/examples/datatables/nested.html, and cannot see why mine do not scroll the selected row into view!

kthorngren

I don't have an easy way to setup the Editor nested datatable example. However you might be able to use the row().show() plugin to display the page with the selected row.

To try it add the initComplete option to the datatable config option. In initComplete enable the select event for the nested Datatable. Something like this:

  initComplete: function () {
    this.api().on('select', function ( e, dt, type, indexes ) {
      dt.row(  {selected: true} ).show().draw(false);
    })
  }

Here is a working example (not nested):
https://live.datatables.net/walotamo/1/edit

Let us know if it works.

Kevin

menashe

Kevin,

I did as you suggested; assuming that I placed it correctly, I could not get it to work.

kthorngren

Where did you place it?

It should go in the config section of the field with the nested Datatable. For example:

        {
            label: 'Site:',
            name: 'users.site',
            type: 'datatable',
            editor: siteEditor,
            optionsPair: {
                value: 'id'
            },
            config: {
                ajax: '../php/sitesNested.php',
                initComplete: function () {
                  this.api().on('select', function ( e, dt, type, indexes ) {
                    dt.row(  {selected: true} ).show().draw(false);
                  })
                },
                buttons: [
                    { extend: 'create', editor: siteEditor },
                    { extend: 'edit', editor: siteEditor },
                    { extend: 'remove', editor: siteEditor }
                ],
                columns: [
                    {
                        title: 'Name',
                        data: 'name'
                    },
                    {
                        title: 'Continent',
                        data: 'continent'
                    }
                ]
            }
        }

Did you install the row().show() plugin code?

Do you get errors in the browser's console?

I mentioned that I didn't have a way to test it with the Editor nested Datatable. So it might not work as I expect.

Kevin

menashe

That's where I put it. The datatable still shows at the beginning, i.e.,

The entry that is highlighted/selected (if I scroll way down) is "Merchandise - Tools".

menashe

No errors.

Perhaps, then, it does not work.

A long time ago, Allan seemed to imply that the scrolling to the selected row is built in, but that does not seem to be the case.

Any other possibilities??

menashe

And the plugin is installed. I just commented out the CDN reference the .js file, and then I did get an error.

menashe

It seems to me that if one were to implement his own nested tables--using a table variable--it woud work, because the plugin appears to work on a DataTable object.

kthorngren

Did you enable scrolling and turn off paging? The row().show() API goes to the page that contains the row returned by row().show().

Post your Editor filed config for the nested Datatable.

If you are using the Scroller extension then maybe you can use row().scrollTo(). Updated example:
https://live.datatables.net/walotamo/3/edit

Kevin

kthorngren

If you aren't using Scroller then try using scrollIntoView to jump to the selected row. For example:
https://live.datatables.net/doloyiqa/1/edit

Kevin

menashe

Hi Kevin,

I am posting the config; I have tried every one of the suggestions--to no avail!

            {
                className: 'category-table',
                label: 'Category:',
                name: 'items.category_id',
                type: 'datatable',
                editor: categoryEditor,
                table: 'categories',
                optionsPair: {
                    value: 'id',
                },
                config: {
                    initComplete: function() {
                        this.api().on('select', function(e, dt, type, indexes) {
                            dt.row({
                                selected: true
                            }).node().scrollIntoView(true);
                        })
                    },
                    order: [
                        [0, 'asc'],
                        [1, 'asc'],
                        [2, 'asc']
                    ],
                    ajax: {
                        type: "POST",
                        url: "server_side/scripts/categories.php",
                    },
                    serverSide: true,
                    buttons: [{
                            className: 'btn-light',
                            extend: 'create',
                            editor: categoryEditor,
                            formTitle: "Add Category",
                            text: "Add Category"
                        },
                        {
                            className: 'btn-light',
                            extend: 'edit',
                            editor: categoryEditor,
                            formTitle: "Edit Category",
                            text: "Edit Category"
                        },
                        {
                            className: 'btn-light',
                            extend: 'remove',
                            editor: categoryEditor,
                            formTitle: "Delete Category",
                            text: "Delete Category"
                        }
                    ],
                    columns: [{
                            className: 'full',
                            defaultContent: "",
                            title: 'Category',
                            data: 'category',
                        },
                        {
                            className: 'full',
                            defaultContent: "",
                            title: 'Sub Category',
                            data: 'sub_category1',
                        },
                        {
                            className: 'full',
                            defaultContent: "",
                            title: 'Sub Detail',
                            data: 'sub_category2',
                        }
                    ],
                    paging: false,
                    scrollY: '285px',
                    scrollCollapse: true,
                    scroller: true,
                    select: true,
                    language: {
                        select: {
                            rows: "<br>%d rows selected"
                        }
                    },
                }
            },

kthorngren

I was able to build a simple example:
https://live.datatables.net/guwafemu/479/edit

I realized the need to wait for the editor form to be displayed before trying to scroll to the row. I added the use of open to scroll to the row. The test case starts on the last page so you should be able to select an row, like Tiger, then the edit form should scroll to that row.

Kevin

menashe

Kevin,

I don't have time to implement it this moment, but... you are, as everyone says, amazing!!

kthorngren

I realized there is still one issue with my example. Use editor.one() instead of editor.on(). With editor.on() a new event handler will be added every time a row is edited.

          initComplete: function () {
            this.api().on('select', function ( e, dt, type, indexes ) {
              editor.one('open', function () { 
                dt.row(  {selected: true} ).node().scrollIntoView(true); 
              });
            })
          }

Updated example:
https://live.datatables.net/kemixipa/1/edit

Kevin

menashe

Kevin,

Thank you for all of your help! I saw your working example right before my eyes--but could not get it to work for me!

Then, based on your code, I remembered what you (or Allan) had suggested in terms of adjusting the column widths in a nested table.

So... I added the code to the existing handler (at the beginning) --and it works!

    itemsEditor.on('open', function(e, mode, action) {
        setTimeout(function() {
            itemsEditor.field('items.category_id').dt().row({
                selected: true
            }).node().scrollIntoView(true);
        }, 200)

        // Adjust the column headers on the Categories Nested DataTable. 
        // The timeout value of 200 appears to work optimally.
        setTimeout(function() {
            itemsEditor.field('items.category_id').dt().columns.adjust();
        }, 200);

        $('#template-items').css({
            'display': 'flex'
        });

        // Make Bootstrap dialog bigger
        // $(".modal-dialog").removeClass("modal-sm");
        // $(".modal-dialog").addClass("modal-lg");
    });