How to disable drag-drop reordering of rows in child table grid

Frappe Framework Customization
1

Hi!

I’m a month into the ERPNext customization scene and still learning the ropes.

I wanted to know if there is a way to disable reordering of rows in a grid?

Tried to write a custom script to remove the sortable-handle class using jQuery like it has been done in customize_form.js, but I can’t seem to get a reference to the row div with the sortable-handle class.

Custom Script:

frappe.ui.form.on("Sales Invoice", "refresh", function (frm) {
   frm.page.body.find('[data-fieldname="taxes"] [data-idx] .data-row').removeClass("sortable-handle");
});

Reference code:

//customize_form.js (Line 46)
setup_sortable: function(frm) {
   frm.doc.fields.forEach(function(f, i) {
      var data_row = frm.page.body.find('[data-fieldname="fields"] [data-idx="'+ f.idx +'"] .data-row');

      if(!f.is_custom_field) {
         data_row.removeClass('sortable-handle');
      } else {
         data_row.addClass("highlight");
      }
   });
},

I have tried using both onload and refresh events. I have also tried using the forEach loop just like in the reference code, but without success.

Any help would be appreciated. Thanks!

Other Attempts: (Thought I’d mention these.)

frappe.ui.form.on("Sales Invoice", "refresh", function (frm) {
   $('[data-fieldname="taxes"]').css("color", "red"); //Text becomes red for all rows except column headings.
});

frappe.ui.form.on("Sales Invoice", "refresh", function (frm) {
   $('[data-fieldname="taxes"] [data-idx] .data-row').css("color", "red"); //No effect.
});
2 Likes
2

Observed that the code for disabling drag-and-drop worked properly right after saving the document. (refresh).

Inspected the Custom Script and found that there were two handlers for the refresh event.

Removed the other handler and placed ‘frm.page.body.find’ call in a separate function.

Drag-and-drop sorting gets disabled after Save and remains disabled every time the document is opened for editing.

function disable_drag_drop(frm) {
   frm.page.body.find('[data-fieldname="taxes"] [data-idx] .data-row').removeClass('sortable-handle');
}

frappe.ui.form.on("Sales Invoice", "refresh", function (frm) {
   function disable_drag_drop(frm)
});

frappe.ui.form.on("Sales Invoice", "onload", function (frm) {
   function disable_drag_drop(frm)
});
4 Likes