Invoke Edit and pass in cell-selector

Invoke Edit and pass in cell-selector

rldean1rldean1 Posts: 141Questions: 66Answers: 1

TL;DR: Can the Editor form show only targeted cells during a multi-select? (Cells that I pass in via row-selector and cell-selector would be the only inputs on display in the form?)

I'm intercepting a multi-select. If more than one row is selected, I want to show the Editor form, but I don't want to show all the fields.

I figured out how to invoke an edit with a row-selector, like this:

// Button Edit action function (e, dt, node, config)

let rows = dt.rows( { selected: true } ).indexes()

if (rows.count() > 1) {
    // invoke Editor form for multis
    editor.edit(
        rows
    );

} else {
    // do my own form for onesies
     renderRetireeEditModal(dt, editor, rows);
};

I can't seem to figure out how to pass in cells with a cell-selector. I've tried different variations of this:

let rows = dt.rows( { selected: true } ).indexes()
let cells = dt.cells(rows, ['.cell-invitesent', '.cell-awardordered'])

editor.edit(
    cells
);

My thought process was that I could invoke the Editor form with specific cells, and only those cells would show.

Would it be better just to hide all the other columns in combination with multiEditable: false?

Is there a way to use .fields() to achieve what I'm talking about?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    edited January 2022

    Hi,

    Great question. Yes this is possible, but there are one or two little extra steps that need to be taken (and on reviewing the docs, that isn't clear - apologies - I'll sort that out).

    Here is a mini example of cell based editing: http://live.datatables.net/jorutoji/15/edit . Note using ctrl-click to select multiple cells.

    There are two key parts here:

    1. You need to pass in an object to the edit() method's first parameter with the cells property set, so Editor knows it is working on cells.
    2. You must set the scope property for the form options to be cell if you want to just edit the data for the selected cells. Otherwise the scope is row by default and the whole row would be editable (even if only the fields selected are actually shown!).

    If you wanted to get really fancy, you could allow the user to change what gets selected on click using these buttons and then in the edit button have a different edit operation based on what was selected (e.g. it could be the full row editing, or cell based editing).

    Allan

  • rldean1rldean1 Posts: 141Questions: 66Answers: 1

    @allan

    Okay, check out my attempts with your example as the baseline.

    I think I'm trying to target the "Cross product between row and column selectors" as described here.

    I think I'm trying to use this function: function cells( rowSelector, columnSelector [, modifier ] ) to pass in those specific cells.

  • allanallan Posts: 63,523Questions: 1Answers: 10,473 Site admin
    Answer ✓

    http://live.datatables.net/jorutoji/18/edit

    The problem was with the column selector you used. DataTables doesn't (currently) have a method by which you can select columns based on the columns.data property. There is a selector for columns.name which you could use, but in the example I've just used the column index.

    Allan

Sign In or Register to comment.