Maybe I missed something, but I can't find a way to do it.

Here are more details on what I'm trying to do:

I have two tables:
- Table "items"
- item_id
- item_name
- ...
- Table "subitems":
- subitem_id
- item_id
- subitem_name
...

I want to be able to perform CRUD operations on my subitems directly from the "items" editor.

My first idea was to use a nested editor like this: https://editor.datatables.net/examples/datatables/nested (or multiple version).
However, that isn't the solution because the nested editor lists all the "subitems", and the user needs to select them.
I only want to be able to CRUD "subitems" linked to the current "item" through the "subitems.item_id".

Is there a way to do that with a nested editor?

If not, how could I do it?

Thanks, Renaud

I tried opening child editor from datatables field buttons like this:
{ extend: 'create', editor: incRefundsEditor, formOptions: {onEsc: 'none', nest: true} }
but nothing happened, Escape still closes both editors.

When I add onEsc: 'none' to parent editor this way it works as intended. But still opening child editor and pressing Escape closes both editors.

Any ideas?

        {
            data: 'users',
            render: (data) => data.length
        }

We make the sum of a users' field, for example their age?

I found this post but I am not sure it is pointing me in the right direction.

Thanks and regards

See example here:
https://live.datatables.net/holeqaca/4/edit

The POST is executed to url: https://live.datatables.net/upload/%7Bid%7D and the {id} is not replaced.

I think this is a bug.
Is it possible to fix it?

I came across this error in my app, wanted to see if a minimal example in live.datatables.net would have the same result. In both cases there is an error in the _fnScrollDraw function when scrollX is set to true. Any help is appreciated.

I intend to have an editor field where the user can add email addresses. These will not be stored in a separate table from which the options can be retrieved. These will be stored the table I'm editing which will store these as a@example.com;b@example.com. I initially tried doing this with select2 using its tags feature, but the data which is already in the table isn't shown when I bring up the editor modal. (The table already has single email addresses as text fields, but I want to add the feature allowing the user to add or create multiple addresses)

I want to create a link to a test case, but first I want to verify that select2 is an ok way to do this. Most of the selects in my application are select2.

I looked briefly at the tags data type, but I don't think this works for my use case.

Assuming select2 is fine, where is the best place to find a live version I can clone to show my problem?

Out of the box, Editor has very useful server-side field validation:
https://editor.datatables.net/manual/php/validation

(Lately I've especially taken advantage of the relatively new dependsOn() method!)

But occasionally data is submitted from the client-facing fields that don't match the fields in my table.

These non-database fields are used to do other things on the backend, but my point here is that I've previously done validation on those non-database fields in a global validator, which doesn't allow me to use the built-in field validation tools from Editor and also returns a global error instead of a field-specific one, so the UI isn't as helpful.

MY OLD WAY

// Requires: id, player_code, and school_code (all database fields)
// And either school_code or school_name_manual (not database fields) for other processing

Editor::inst( $db, 'players_seasons' )
    ->fields(
         
        Field::inst( 'id' ),
        Field::inst( 'player_code' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'season_code' )
            ->validator( 'Validate::notEmpty' )
    )

    // Non-database fields checked in a global validator
    ->validator( function ( $editor, $action, $data ) {
        if ( $action === Editor::ACTION_CREATE ) {   
            foreach ( $data['data'] as $pkey => $values ) {
                if (
                    empty($values['school_code'])
                    && empty($values['school_name_manual'])
                ) {
                    return "School cannot be blank";
                }
                return true;
            }
        }
        return true;
    });

However I've recently realized that by using both set(false) and get(false), the server-side Editor will accept those non-database fields without fussing they don't match the fields in the table and I can use field validation:

MY NEW WAY

// Requires: id, player_code, and school_code (all database fields)
// And either school_code or school_name_manual (not database fields) for other processing

Editor::inst( $db, 'players_seasons' )
    ->fields(
        Field::inst( 'id' ),
        Field::inst( 'player_code' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'season_code' )
            ->validator( 'Validate::notEmpty' ),
        
        // Non-database fields checked in a field validator
        // with ->set(false)->get(false)
        
        Field::inst( 'school_name_manual' )->set(false)->get(false),
        
        Field::inst( 'school_code' )->set(false)->get(false),
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'School cannot be blank' )
                ->dependsOn(function ($val, $row, $host) {
                    return empty($row['school_name_manual']);
                })
            ))
    );

This does the same thing except it's cleaner coding and the error for a missing school_code and school_name_manual shows on the client side under the specific field the client sees.

Suggestion for @allan would be to include an ignore() method (or submit(false) or something similar) that would do the same as the ->set(false)->get(false), such as:

SUGGESTION

// Requires: id, player_code, and school_code (all database fields)
// And either school_code or school_name_manual (not database fields) for other processing

Editor::inst( $db, 'players_seasons' )
    ->fields(
        Field::inst( 'id' ),
        Field::inst( 'player_code' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'season_code' )
            ->validator( 'Validate::notEmpty' ),
        
        // Non-database fields
        // with ->ignore() (or submit(false) or something similar)
        
        Field::inst( 'school_name_manual' )->ignore(),
        
        Field::inst( 'school_code' )->ignore(),
            ->validator( Validate::notEmpty( ValidateOptions::inst()
                ->message( 'School cannot be blank' )
                ->dependsOn(function ($val, $row, $host) {
                    return empty($row['school_name_manual']);
                })
            ))
    );

In the Desktop view Limit Results is left-aligned and Search is right-aligned. On small devices maybe under 768px, not sure, they are stacked and center-aligned.

1) What CSS do I need to add (to my custom css) to make the small device view the only view?
2) How then do I make both Limit Results and Search left-aligned in the view

This is BS4, but would like to be able to do this with BS5 too.

Much thanks

I tried to download the .exe file (such requirements). During a example upload, it caused the page to refresh. I got around this by adding it to the ajax field.

{
    name: 'File',
    data: 'File',
    label: 'File',
...
    type: 'upload',
    attr: {
        accept: ".exe,.msi",
    },

    ajax: function (files, done) {
        if (files.length == 0) return;
        done(files)
    },

    display: function (file) {
        return `<span> ${file.name} </span>`;
    },

},

It worked, and when I submit, I see in the data that the field has a value with the type FILE.

create: {
    type: 'POST',
    url: 'route',
    data: function (d) {
        debugger
        var file = d.data[0].ClientVersion.File; // file exist
       

        return d;
    },

},

But then I've an errors

jquery.js:10073  Uncaught TypeError: Illegal invocation
jquery.js:10073  Uncaught (in promise) TypeError: Failed to execute 'arrayBuffer' on 'Blob': Illegal invocation

I've tried to set contentType but it not helped.

    contentType: 'application/x-www-form-urlencoded',

What should I do to send it to .net editor endpoint?

I don't need this file saved on server some way. I need to store it to database via MemoryStream. I've set for now in endpoint

.SetFormatter((val,data)=>{
    var file = val as IFormFile;
    if(file is null) return null;
    using (var memoryStream = new MemoryStream())
    {
        file.CopyTo(memoryStream);
        var fileContent = memoryStream.ToArray();
        return fileContent;
    }
}),

Maybe some solution to do this in js before sending file, rewrite field into byte array and send like standard value?

The API has mode(), which is either create, edit, or remove.

But for events, such as open, the parameters are function( e, mode, action ), where the mode is main, inline, or bubble.

The action parameter is where the create, edit, or remove are found.

There have been a couple of times I've programed an event where I've done:

editor.on('open', function (e, mode, action) {
    // Should be "action == 'edit'" but the
    // api method "mode()" has thrown me off
    if (mode == 'edit') {
        ...
    }
});

The inconsistency always makes me wonder if it wouldn't be better to use the terminology from the event fields and have an action() method that will eventually replace the mode() method?

I am trying to get a one-to-many join with the PHP libs working but I am having issues setting it up.
For some reason the link method does not set up the joins as i expect

What i am trying to do:
- I have table MATERIALS containing all my materials with fields ID, DESCRIPTION, etc
- a table CHECKLIST containing regulated materials with fields ID, MATERIAL_ID (links to table MATERIALS), etc
- and a table CHECKLIST_ALTERNATIVES containing alternatives materials for a regulated material with fields CHECK_ID (links to table CHECKLIST) andMATERIAL_ID(links to tableMATERIALS`)

The query I am trying to recreate (I think) is:

SELECT DISTINCT MATERIALS.ID as 'dteditor_pk',
    ALTERNATIVES.DESCRIPTION
FROM MATERIALS
JOIN CHECKLIST
    ON CHECKLIST.MATERIAL_ID = MATERIAL.ID
JOIN CHECKLIST_ALTERNATIVES
    ON CHECKLIST_ALTERNATIVES.CHECK_ID = CHECKLIST.ID
JOIN MATERIALS ALTERNATIVES
    ON ALTERNATIVES.ID = CHECKLIST_ALTERNATIVES.MATERIAL_ID

because i am referencing the MATERIALS table twice i need to alias the second instance.
This seems to return the data correctly if i run the query directly on the database:

dteditor_pk DESCRIPTION
6443 test material 1
6447 test material 2
etc

but this requires three joins which link method does not support.
So i create a VIEW combining CHECKLIST_ALTERNATIVES and MATERIALS on field MATERIAL_ID:

SELECT DISTINCT VDSTAM.ID as 'dteditor_pk',
    ALTERNATIVES.DESCRIPTION
FROM MATERIALS
JOIN CHECKLIST
    ON CHECKLIST.MATERIAL_ID = MATERIALS.ID
JOIN CHECKLIST_ALTERNATIVES_VIEW ALTERNATIVES
    ON ALTERNATIVES.CHECK_ID = CHECKLIST.ID

This still returns the correct data when checked running the query.

Implementing this with the PHP libs:

$editor = Editor::inst($db, 'MATERIALS', "ID");

$fields = array();
$fields[] = Field::inst('MATERIALS.ID');
$fields[] = Field::inst('MATERIALS.DESCRIPTION');
$fields[] = Field::inst('CHECKLIST.MATERIAL_ID');

$editor->fields($fields);
$editor->leftJoin('CHECKLIST', 'CHECKLIST.MATERIAL_ID', '=', 'MATERIALS.ID');

$m = Mjoin::inst('MATERIALS');
$m->link('MATERIALS.ID', 'CHECKLIST.MATERIAL_ID');
$m->link('CHECKLIST_ALTERNATIVES_VIEW.CHECK_ID', 'CHECKLIST.ID');

$fields = array();
$fields[] = Field::inst('DESCRIPTION'); // should be from CHECKLIST_ALTERNATIVES_VIEW

$m->fields($fields);

$editor->join($m);

The generated SQL query is:

SELECT DISTINCT [MATERIAL].[ID] as 'dteditor_pkey',
    [MATERIALS].[OMSCHRIJVING1] as 'OMSCHRIJVING1' 
FROM  [MATERIALS]
JOIN [CHECKLIST] 
    ON [MATERIALS].[ID] = [CHECKLIST].[MATERIAL_ID]   
JOIN [MATERIALS] 
    ON [MATERIALS].[CHECK_ID] = [CHECKLIST].[ID]

This generates an SQL error because it is trying to set up a self-referencing table MATERIALS without an alias.
But this is not the query i am looking for anyway compared to the query above.

It seems the second link is not used (correctly):

$m->link('CHECKLIST_ALTERNATIVES_VIEW.CHECK_ID', 'CHECKLIST.ID');

should not lead to:

JOIN [MATERIALS] 
    ON [MATERIALS].[CHECK_ID] = [CHECKLIST].[ID]

Can you provide any insight into how to deal with this issue?
I hope everything is clear, if not i can add more info

I have an overview page where they can see how many sub categories one person had, for example a person Joe Doe have an overview page which has said it had 8 requests.

I want to make from this number 8 a link to another existing DataTable (query.php) and open this page which this 8 records.

The query.php looks like this:

<div class="pb-5">
    <table id="table-request" class="table-responsive stripe hover row-border compact nowrap">
      <thead>
        <tr>
          <th>Clientnumber</th>
          <th>Name</th>
          <th>Product</th>          
        </tr>
      </thead>
      <tbody>          
      </tbody>  
    </table> 
  </div>

$(document).ready(function() {

new DataTable('#table-request', {
ajax: {
    url: '/crm/ajax/request-data.php',
    type: 'POST'
},
columns: [        
    { data: 'request.clientnumber' },        
    { data: 'request.name' },
    { data: 'request.product' }
],
columnDefs: [
  { targets: [0], className: 'dt-body-left'},
  { targets: [0], render: DataTable.render.number( '.', ',', 0 ) }
],      
order: [[0, 'asc']],
pagingType: 'full_numbers',
pageLength: 25, 
language: {
  url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/nl-NL.json'
},          
search: {
  smart: false
} 
});

If the client has clientnumber 3, how can I make a link from the overview page which opens the query.php and filter out only clientnumber 3? So only 8 records are visible?

Kind regards,

Arie

I'm installing from npm, which is of course the normal natural way to do this in a TypeScript application.

https://editor.datatables.net/manual/installing/

I'm running, as of a few days ago, the most current version of each relevant package:

    "@datatables.net/editor-dt": "^2.4.2",
    "datatables.net-dt": "^2.3.2",
    "datatables.net-react": "^1.0.1",

And I'm starting with just the tiniest bit of code, roughly this:

import DataTable from 'datatables.net-react';
import DataTablesCore from 'datatables.net-dt';
import Editor from '@datatables.net/editor-dt';

DataTable.use(DataTablesCore);

The last line results in a bevy of TypeScript errors. The errors go away if commenting out the line that imports the editor. This is because the editor is bringing in a different set of TypeScript definitions, causing that last line, which doesn't even mention editor, to become broken.

An actual working example with TypeScript, Editor, and Data Table would resolve the question of whether this is possible and what combinations of versions, etc., are needed to make it work.

@Stacey1134 has a solution in the comments about how to avoid that brief flash of custom templates for Editors on page load.

An example of that flash can be found here:
https://editor.datatables.net/examples/simple/template-attribute.html
or https://editor.datatables.net/examples/simple/template.html

My previous solution was similar to his (hiding the template in the html and then using the API to show it), but since then I've started to just put all my templates in a special section of the page that is hidden:

<!-- All custom templates go inside this div -->
<div hidden>
   <div id="customForm">
      yada yada yada
   </div>
</div>

Now all my custom templates are hidden when the page loads and I can get rid of all initEditor code.

I would propose this as the best practice

The problem was with an attempted database call when it was not needed, and the value and labels being swapped for manual entries.

I've posted the details in an issue (https://github.com/DataTables/Editor-NET/issues/29) and submitted a pull request with the fix (https://github.com/DataTables/Editor-NET/pull/30)

Most of those requests were addressed with the Editor 2.5 release (thanks, @allan!), but I wanted to capture the remainder here, not necessarily with the assumption that they'll be added, but just to clean up the conversation.

1) Include the input with the wrap around navigation
The up/down arrows would include the input with the wrap around:
* Arrow down from the input moves to the first record
* Arrow up from the first record moves to the input
* Arrow up from the input moves to the last record
* Arrow down from the last record moves to the input

2) Fully expose the ajax method
Mentioned as a possible future feature to mirror how the ajax object is used elsewhere:

new DataTable.Editor({
    ajax: '/api/data',
    fields: [{
        label: 'Counties:',
        name: 'county',
        type: 'tags',
        ajax: {
            url: '/api/counties',
            data: {
                state: 'Texas',
                yet_another_param: function () {
                    let foo = 42
                    return foo
                }
            }
    }],
    // ...
})

3) Ability to use rowGroup
Mentioned the possibility of an optgroup.

4) Bootstrap floating labels
Not sure how this would look for tags but perhaps above the dte-tag?

5) Dropdown occasionally "disconnected" from field
Setting fields.className to 'block' or entering mobile mode seems to cause the dropdown to be placed lower than what it should be.

To duplicate, view the following link in mobile mode and create a new entry to see the dropdown for the country tags is too low for the control (see picture): https://editor.datatables.net/examples/dropdown/tags-rendering.html

If there was an editor field below the country tag on the form then it would show between the country tag and the dropdown.

6) Option to have an initial AJAX load
I had requested this and the initial answer was to use field().update(), but I could never get it work.

However I happen to notice in the Editor 2.5.0 release notes that

tags and autocomplete didn't respect the update option of field().update().

Perhaps that was the issue I was having so I'll try again one day this week.

If so, shouldn't the field().update() documentation include tags and perhaps autocomplete?

Again, I'm very, very grateful to @allan for all the improvements that were incorporated from that initial thread!

    ->validator(function ($editor, $action, $data) {
    
        foreach ($data['data'] as $id => $d) {
                return "I don't like"; // <- Can I return for a specific field?
            }
        }
    
        return true;
    })

i18n( custom, token [, default] )

custom:

User defined string for this token. While it would be possible to check for this value outside the method, it is a common action to check for custom text values on objects (e.g. field configuration objects), so this is provided to simplify that logic. If not null or undefined, this value will be returned.

token:

The JS object notation string for the value that is to be loaded. For example for i18n.create.button, create.button would be given here.

The examples only use the custom argument:

editor.i18n('edit.button');

This would (and does for me) return the string 'edit.button' which is not what is needed

Instead i have to set:

editor.i18n(null, 'edit.button')

which does correctly return the string 'Update' as I would expect.

What is the usage of the custom argument?

Has anyone created an add-on for this or found a good solution? moment.js is only getting me so far...

To replicate the issue, double click the 'position' cell on the test case page.

When a record is selected and the Editor modal is closed, the following warning comes up in the console:

Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden.
Element with focus: <button.btn btn-primary>
Ancestor with aria-hidden: <div.modal fade DTED> <div class=​"modal fade DTED" style=​"display:​ block;​" aria-hidden=​"true">​…​</div>​

I'm not an expert on accessibility but in doing some research it seems the button on the modal (Element with focus: <button.btn btn-primary>) still has the focus when the modal closes, which generates the warning.

The editors for those child rows have tags, which of course have their own instance of a DataTable included.

I've noticed that each time I open and close a child row (and thereby creating/destroying the child row editor) I have some residual DataTables coming from somewhere.

While troubleshooting, I noticed when I don't include the child row Editor, the residual DataTables don't appear.

I haven't been able to pinpoint where those DataTables are coming from in my own code (so far), so I'm wondering if the residual DataTables are the ones associated with the tags and those aren't destroyed when the Editor itself is destroyed.

Does that sounds possible? Or do I need to continue checking my own code?