Answers

• allan Posts: 64,596Questions: 1Answers: 10,683 Site admin

  June 6

  Hi Miklos,

  Two options:

  1. Render it as HTML on the server-side through a Markdown library and a get formatter (assuming you are using the Editor PHP, .NET or Node.js libraries).
  2. Do it on the client-side with a library such as this one. You would do that wherever it is that you are creating the child rows.

  If you are able to link to an example, I should be able to give a more specific answer.

  Allan
• koppanm Posts: 15Questions: 2Answers: 1

  June 6

  Many thanks Allan for your quick reply! I will give it a try and report back.
  I love DataTables and Editor, although I am an absolutely amateur, so it will not be easy for you to guide me through..
• koppanm Posts: 15Questions: 2Answers: 1

  June 6 edited June 6

  Dear Allan,
  Had no time to accomplish so far, just to read the info you have sent. Many thanks.
  Below is my code, maybe this clarifies my trouble. I truly appreciate your help.

  /*
   * Editor client script for DB table opdescript
   * Created by http://editor.datatables.net/generator
   */
  
  
  addEventListener("DOMContentLoaded", function () {
      var editor = new DataTable.Editor( {
          ajax: 'php/table.opdescript.php',
          table: '#opdescript',
          fields: [
              {
                  "label": "created_at:",
                  "name": "created_at",
                  "type": "datetime",
                  "format": "YYYY-MM-DD"
              },
              {
                  "label": "tags:",
                  "name": "tags"
              },
              {
                  "label": "content:",
                  "name": "content",
                  "type": "textarea",
                  "attr": {
          "placeholder": 'Please enter a description here'
      }
              }
          ]
      } );
  
  
  
  
  // Formatting function for row details - modify as you need
  function format(d) {
       //`d` is the original data object for the row
      return (
          '<dl>' +
          '<dt><b>Leírás:</b></dt>' +
          '<dd>' +
          d.content +
          '</dd>' 
          +
          '</dl>'
      );
  }
  
  
  
      var table = new DataTable('#opdescript', {
          ajax: 'php/table.opdescript.php',
          order: [ 1, 'desc' ],
          columns: [
          {
              className: 'dt-control',
              orderable: false,
              data: null,
              defaultContent: ''
          },
          { data: 'created_at' },
          { data: 'tags' }
  
      ],
          // columns: [
              // {
                  //"data": "created_at"
              //},
              //{
                  //"data": "tags"
              //},
              //{
                  //"data": "content"
              //}
          //],
          
          layout: {
              topStart: {
                  buttons: [
                      { extend: 'create', editor: editor },
                      { extend: 'edit', editor: editor },
                      { extend: 'remove', editor: editor }
                  ]
              }
          },
          language: {
          url: '//cdn.datatables.net/plug-ins/2.3.1/i18n/hu.json',
          },
          select: true,
  
      });
  
      // Add event listener for opening and closing details
  $('#opdescript tbody').on('click', 'td.dt-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);
   
      if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
      }
      else {
          // Open this row
          row.child(format(row.data())).show();
      }
  });
  
  
  
  
  });
  
• allan Posts: 64,596Questions: 1Answers: 10,683 Site admin

  June 6

  Awesome - thank you. I would suggest that line 43 in the above is where you could do the Markdown formatting - something like:

  markdown(d.content) +
  

  where markdown() is a function from an external library. I've used markdown-it before and found it to be very effective.

  Allan
• koppanm Posts: 15Questions: 2Answers: 1

  June 6

  And here is the link:
  https://mutetek.laparo.hu/page-6/page-9/opdescript.html
• koppanm Posts: 15Questions: 2Answers: 1

  June 6

  Many thanks, I go ahead and give it a try. You are providing an awesome support, thanks. TwoThumbsUp!
• koppanm Posts: 15Questions: 2Answers: 1

  June 6

  OK, now the child row is frozen. Table loads, but that is it.
• koppanm Posts: 15Questions: 2Answers: 1

  June 6

  Dear Allan, after reading a lot, I am getting a little bit closer. Which default JS file have you used from the the package author (jsdelivr.com)?
• koppanm Posts: 15Questions: 2Answers: 1

  June 6 Answer ✓

  Dear Allan, I have solved it.
  I have found the solution here:
  https://stackoverflow.com/questions/1867669/markdown-live-preview-in-textarea

  It is now working perfect.
  Thank you for your suggestion, it pushed me forward to achieve what I needed.
  I love the Editor and Datatables. Many thanks, Miklos
• allan Posts: 64,596Questions: 1Answers: 10,683 Site admin

  June 7

  Hi Miklos,

  Awesome - delighted to hear that you've got it working

  Allan