Display field values in custom Editor form

ainglish

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

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

@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

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

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

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

Worked perfect. Thanks!