Display field values in custom Editor form

ainglish · March 2022

Hi,
I'd like to know how to show field values in a custom Editor form without a label and input box:

Example:
My table row has:
id, first_name, last_name

I'd like to display the ID field as a non-editable element on my custom form.
Something like:

<h1>{id}</h1>
  <editor-field name="first_name"></editor-field>
  <editor-field name="last_name"></editor-field>

I don't want Editor to generate a label and input box for {id}, just the id value.
Possible?

colin · March 2022

You could do something like this: http://live.datatables.net/lixokave/1/edit

It's changing the text of an ID element when the form is opened:

  editor.on('open', function(e, mode, action) {
    if (action === 'edit' && mode === 'main') {
      $('#id').text(editor.ids());
    }    
  });

Hope that does the trick,

Colin

ainglish · March 2022

@Colin,

Thanks for the reply! I guess I should have been more clear in my given use case.
Your example accesses editor.ids() and works great.

How do I access a data field (let's say I want to show the name rather than the id)?

I can do something like this, but I wonder if there is a "cleaner" way...

    editor.on('open', function(e, mode, action) {
    if (action === 'edit' && mode === 'main') {
      var rowIdx = table.row( {selected: true } ).index();
      var cellData = table.cell( rowIdx, 1 ).data();
      $('#id').text(cellData);
    }    
  });

Users may reorder the columns, so using a column index isn't great. Is there a way to target the field by name?

allan · March 2022

Assuming you have the id in the row's data, you could use a readonly input to display the id. Make sure you disable setting of that field on the server-side as well (.set(false) if you are using our server-side libraries for example), just in case some monkey uses the inspector to mess with the field!

Allan

allan · March 2022

I should have answered your follow up question directly as well - sorry. Yes, that is a valid way to do it, although I would probably suggest using the row().id() method Colin mentioned rather than selected: true. The method you have is fine, but just in case you disconnect the editing from row selection at some point in future, this would resolve that.

Allan

colin · March 2022

I see. You can just reference the data from the row().data(), like this: http://live.datatables.net/lixokave/4/edit

  editor.on('open', function(e, mode, action) {
    if (action === 'edit' && mode === 'main') {
      var data = table.row( {selected: true } ).data()['name'];
      $('#id').text(data);
    }    
  });

Colin

ainglish · March 2022

Worked perfect. Thanks!

Display field values in custom Editor form

Display field values in custom Editor form

Answers

Howdy, Stranger!

Categories

DataTables

Display field values in custom Editor form

Display field values in custom Editor form

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables