I've implemented Custom display controller, however on submit, particular row is disappearing. When I refresh my page, I see it appears with values as expected (after create/update action). I don't see any error in my console, POST/PATCH is working as expected and returns JSON as required.

How do I fix this, please? Thank you!

My Debug is here and my complete JS code is this:

var editor; // use a global for the submit and return data rendering in the examples

(function () {

var Editor = $.fn.dataTable.Editor;
Editor.display.details = $.extend( true, {}, Editor.models.displayController, {
    "init": function ( editor ) {
        // No initialisation needed - we will be using DataTables' API to display items
        return Editor.display.details;
    },

    "open": function ( editor, append, callback ) {
        var table = $(editor.s.table).DataTable();
        var row = editor.s.modifier;

        // Close any rows which are already open
        Editor.display.details.close( editor );

        // Open the child row on the DataTable
        table
            .row( row )
            .child( append )
            .show();

        $( table.row( row ).node() ).addClass( 'shown' );

        if ( callback ) {
            callback();
        }
    },

    "close": function ( editor, callback ) {
        var table = $(editor.s.table).DataTable();

        table.rows().every( function () {
            if ( this.child.isShown() ) {
                this.child.hide();
                $( this.node() ).removeClass( 'shown' );
            }
        } );

        if ( callback ) {
            callback();
        }
    }
} );

} )();

$(document).ready(function() {
  var user_id = $("#user_groups_table").attr('data-user-id');
  var contname = $("#user_groups_table").attr('data-controller-name');
    editor = new $.fn.dataTable.Editor( {
      table: "#user_groups_table",
      template: '#user_groups_form',
      "i18n": {
          "edit": {
          "button": "Edit",
          "title":  "Update Group",
          "submit": "Update"
          },
          "create": {
          "button": "Add",
          "title":  "Add New Group",
          "submit": "Add Group"
          }},
      display: "details",
      idSrc: "id",
      ajax: {
          create: {
              type: 'POST',
              url:  '/strongbolt/user_groups'
          },
          edit: {
              type: 'PATCH',
              url:  '/strongbolt/user_groups/_id_'
          },
          remove: {
              type: 'DELETE',
              url:  '/strongbolt/user_group'
          }
      },
      fields: [ {
              label: "Group Name:",
              name: "name"
          }, {
              label: "Description:",
              name: "description"
          }, {
              type: "select2",
              label: "Users:",
              name: "users[].id",
              optionsPair: {
                label: 'name',
                value: 'id'
              },
              "opts": {
              "multiple": true,
              "placeholder": "Select User...",
              "allowClear": true
            }}, {
              type: "select2",
              label: "Roles:",
              name: "roles[].id",
              optionsPair: {
                label: 'name',
                value: 'id'
              },
              "opts": {
              "multiple": true,
              "placeholder": "Select Role...",
              "allowClear": true
            }}
      ]
    } );

// Here we modify params before they are sent to server
    editor.on( 'preSubmit', function ( e, data, action ) {
      if ( action === 'create' ) {
        data.strongbolt_user_group = {
          "name": data.data[0].name,
          "description": data.data[0].description,
          "user_ids": data.data[0].users.map(function(o) { return o.id; }),
          "role_ids": data.data[0].roles.map(function(o) { return o.id; }),
        };
        delete data.data;
      } else if ( action === 'edit' ) {
        $.each( data.data, function (id, value) {
        data.strongbolt_user_group = {
          "name": data.data[id].name,
          "description": data.data[id].description,
          "user_ids": data.data[id].users.map(function(o) { return o.id; }),
          "role_ids": data.data[id].roles.map(function(o) { return o.id; }),
        };
        });
        delete data.data;
      }
    } );

    var table = $('#user_groups_table').DataTable( {
        dom: "Bfrtip",
        ajax: $('#user_groups_table').data('source'),
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Search..."
        },
        columnDefs: [
            { width: 30, targets: 0 }
        ],
        columns: [
            {
                className:      'details-control',
                orderable:      false,
                data:           null,
                defaultContent: ''
            },
            { data: "name" },
            { data: "description" },
        ],
        "order": [[1, 'asc']],
        responsive: {
          details: {
              type: 'column'
          }
      },
      buttons: [
              {
                  extend: 'create',
                  editor: editor,
                  formButtons: [
                      {
                          label: 'Cancel',
                          fn: function () { this.close(); }
                      },
                      'Create'
                  ]
              }
          ]
    } );

    $('#user_groups_table').on( 'click', 'td.details-control', function () {
        var tr = this.parentNode;

        if ( table.row( tr ).child.isShown() ) {
            editor.close();
        }
        else {
            editor.edit(
                tr,
                'Edit row',
                [
                  {
                      "label": "Update row",
                      "fn": function () {
                          editor.submit();
                      }
                  }, {
                      "className": "delete",
                      "label": "Delete row",
                      "fn": function () {
                      // Close the edit display and delete the row immediately
                          editor.close();
                          editor.remove( tr, '', null, false );
                          editor.submit();
                        }
                    }
                ]
            );
        }
    } );

} );