Display field values in custom Editor form

Display field values in custom Editor form

ainglishainglish Posts: 9Questions: 2Answers: 0
edited March 2022 in Editor

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?

Answers

  • colincolin Posts: 15,091Questions: 1Answers: 2,580

    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

  • ainglishainglish Posts: 9Questions: 2Answers: 0

    @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?

  • allanallan Posts: 60,929Questions: 1Answers: 9,932 Site admin

    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

  • allanallan Posts: 60,929Questions: 1Answers: 9,932 Site admin

    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

  • colincolin Posts: 15,091Questions: 1Answers: 2,580

    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

  • ainglishainglish Posts: 9Questions: 2Answers: 0

    Worked perfect. Thanks!

Sign In or Register to comment.