How to set title for editor pop-up window

Evgeniy Vasyliev

Hi!

I have the following code:

// Create editor
tanksEditor = new $.fn.dataTable.Editor({
    table: "#tanks"
});

tanksEditor.add([{
        type:  "select",
        label: "Fuel grade",
        name: "fuelGradeId",
        options: fuelGradeNamesList
    },{
        type: "text",
        label: "Height, mm",
        name: "height",
        attr:  {
            maxlength: 5,
            placeholder: 'Tank height, mm',
            required: true
        }
    }]
);

// Fill in tanks datatable
tanksDatatable = $('#tanks').DataTable({    
    dom: 't',
    "ordering": false,
    responsive: true,
    data: tanksData,
    columns: [
        {
            data: null,
            className: "text-center tanksEditorEdit cursorPointer",
            defaultContent: '<i class="fas fa-pencil-alt"></i>'
        },
        { data: 'id' },
        { data: 'fuelGradeId' },
        { data: 'height' }
    ],
    columnDefs: [
        {
            targets: 0,
            className: 'dt-body-center',
            "width": '5%'
        },
        {
            targets: 1,
            className: 'dt-body-center',
            "width": '10%'
        },
        {
            targets: 2,
            className: 'dt-body-center',
            "width": '55%'
        },
        {
            targets: 3,
            className: 'dt-body-center',
            "width": '30%'
        }
    ]
});

// Edit record
$('#tanks').on('click', '.tanksEditorEdit', function(e) {
    e.preventDefault();

    tanksEditor.edit($(this).closest('tr'), {
        title: 'Edit record for tank',
        buttons: 'Update'
    });
});

So, the editor is shown on click on the first row of the datatable with pencil icon.

My question is: how to set title for the editor pop-up window to insert the id field from the datatable, something like: 'Edit record for tank 1'?

kthorngren

Is this what you are looking for?
https://editor.datatables.net/reference/api/title()

Kevin

allan

Get the data for the row using row().data() and use that to build up the title - e.g.:

var row = $(this).closest('tr');
var rowData = tanksEditor.row(row).data();

tanksEditor.edit(row, {
  title: 'Edit record for tank '+rowData.id,
  buttons: 'Update'
} );

Assuming you have an id property of course.

Allan