reorder editor not working

eyal_hb

i try to make reorder on my table, but i cant get it work!
i see there any pre-reorder event but after nothing happen
this is my code:

<script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<script src="~/js/jquery/DataFunction.js"></script>
<script language="javascript" type="text/javascript">

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

    editor = new $.fn.dataTable.Editor({

            ajax:'@Url.Action("GetDataMainSubject", "RegulationValues")',
            table: "#example",
            formOptions: {
                main: {
                    onBackground: null
                }
            },
        fields: [
                {
                    label: "אינדקס נושא ראשי:",
                    name: "Main_Subject_Regulation.Main_Subject_Order",
                    fieldInfo: "השדה יכול להיות ערוך רק ב drag and drop"
                },
                {
                    label: "שם נושא ראשי",
                    name: "Main_Subject_Regulation.Main_Subject_Title",

                },
                {
                    label: "מחלקה",
                    name: "Main_Subject_Regulation.Department_Id",
                    type: "select2",
                    "opts": {
                        "language": "he",
                        "dir": "rtl",
                        "allowClear": true,
                        "theme": "bootstrap",
                        "placeholder": {
                            "id": "",
                            "text": "בחרו מחלקה"
                        },
                    },

                }



        ],
        i18n: DTE_i18n


    });
      var table=  $('#example').DataTable({
            dom: "Bfrtip",
            ajax: '@Url.Action("GetDataMainSubject", "RegulationValues")',
              "language": {
                "url": "@HttpContext.Current.Application["VirDir"]/media/language/de_HEB.json"
              },
          order: [["0", "asc"]],
          columns: [
                //{
                //    data: null,
                //    defaultContent: '',
                //    className: 'select-checkbox',
                //    orderable: false
                //},
                { data: "Main_Subject_Regulation.Main_Subject_Order", className: 'reorder' },
                { data: "Main_Subject_Regulation.Main_Subject_Title" },
                { data: "Departments.departmentName" },
                {
                    data: null,
                    "orderable": false,
                    className: "center",
                    defaultContent: "<button class='btn btn-outline btn-success btn-sm editor_edit' style='border-radius: 40%;margin: auto;display: block'><i class='fas fa-pen' style='margin: 2px -2px 0px -1px;font-size:19px'></i></button>"

                },

                {
                    data: null,
                    className: "center",
                    "orderable": false,
                    defaultContent: "<button class='btn btn-outline btn-primary btn-primary btn-sm editor_duplicate' style='border-radius: 40%;margin: auto;display: block'><i class='fas fa-clone' style='margin: 2px -2px 0px -1px;font-size:19px'></i></button>"

                },
                {
                    data: null,
                    className: "center",
                    "orderable": false,
                    defaultContent: "<button class='btn btn-outline btn-primary btn-danger btn-sm editor_remove' style='border-radius: 40%;margin: auto;display: block'><i class='fas fa-trash-alt' style='margin: 2px -2px 0px -1px;font-size:19px'></i></button>"

                },
          ],

          rowReorder: {
              dataSrc: "Main_Subject_Regulation.Main_Subject_Order",
              editor: editor
          },
            //select: {
            //    style: 'os',
            //    selector: 'td:first-child'
          //},
          select: true,
          buttons: {
              buttons: [
                  { extend: "create", editor: editor, text: "חדש", className: "btn-primary" },
                  //{
                  //    extend: 'excel',
                  //    exportOptions: {
                  //        orthogonal: null,
                  //        columns: [0, 1, 2, 3, 4, 5]
                  //    },
                  //    className: "btn-outline btn-success",
                  //    text: '<i class="fas fa-file-excel"> יצוא לאקסל</i>',
                  //},

              ],
              dom: {
                  button: {
                      tag: "button",
                      className: "btn"
                  },
              }
          }
    });

   

    editor
        .on('postCreate postRemove', function () {
            // After create or edit, a number of other rows might have been effected -
            // so we need to reload the table, keeping the paging in the current position
            table.ajax.reload(null, false);
        })
        .on('initCreate', function () {
            // Enable order for create
            editor.field('Main_Subject_Regulation.Main_Subject_Order').enable();
        })
        .on('initEdit', function () {
            // Disable for edit (re-ordering is performed by click and drag)
            editor.field('Main_Subject_Regulation.Main_Subject_Order').disable();
        });

eyal_hb

i think i found the problem.
i have conflict between jquery-ui.js when i include this one in bundle the reorder not working when i exclude him from js bundle the reorder working..
what to do?

allan

Hi,

We'd really need a link to a page showing the error to be able to debug and understand the problem. It sounds like jQuery might be getting loaded twice? But I'm not certain.

Allan

eyal_hb

Allani just remove the jquery-ui and all work, i dont know why the conflict but i think there drag option in this jquery-ui script