Problems with editor 2.3.2

Problems with editor 2.3.2

GargiucnGargiucn Posts: 109Questions: 30Answers: 0

Good morning,
I installed editor 2.3.2 with Datatables 2.0.4 via download builder as I normally do.
Unfortunately with editor 2.2.2 and 2.3.2 the buttons disappear and chrome displays a whole series of errors (see attached images).
What can I do?
Thank you,

Before upgrade:

After upgrade:

Chrome error messages:

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    Those errors are coming from Bootstrap and FontAwesome, so odd that a DT upgrade generated them. Could you post your table initialisation code as well, please.

    Colin

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Actually, could you link to a page showing the issue please, so I can debug it. If you can't link to your own page, you can use https://live.datatables.net or JSFiddle to create an example showing the problem.

    Allan

  • GargiucnGargiucn Posts: 109Questions: 30Answers: 0

    After a few checks no more errors appear in the browser.
    I still don't see the buttons, though.
    I can make the buttons appear by modifying the program as follows:

    lengthChange: true,
    lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Tutti"] ],  
    language: {
       url: "plugins/italian.json"
     },
    /**** original ****
    initComplete: function () {  
        table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
    }
    /*
    /**** modified ****/
    layout: {
        topStart: {
            buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit', editor: editor },
            { extend: 'remove', editor: editor }
        ]
        }
    },
    

    but the lenghtMenu selector no longer appears...

    Giuseppe

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    Perhaps you could try:

    layout: {
        topStart: {
            buttons: [
              'pageLength',
              { extend: 'create', editor: editor },
              { extend: 'edit', editor: editor },
              { extend: 'remove', editor: editor }
          ]
        }
    }
    

    However, I'd really need a link to a page showing the issue, as I requested above, to be able to debug what is going wrong.

    Allan

  • GargiucnGargiucn Posts: 109Questions: 30Answers: 0

    My debug code is: uriruq
    Thanks,

    Giuseppe

  • GargiucnGargiucn Posts: 109Questions: 30Answers: 0

    Update.
    I tried editing the page editor/examples/styling/bootstrap4.html in the editor examples.
    Again, as it happens to me, I don't see the editor buttons if I replace "initcomplete" with "layout":

    /*** original ***/
    layout: {
        topStart: {
            buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit', editor: editor },
            { extend: 'remove', editor: editor }
        ]
        }
    },
    /*** modified ***/
    lengthChange: true,
    lengthMenu: [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "Tutti"] ],  
    initComplete: function () {
        test a) table.buttons().container()
            .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );  
        test b) this.api().buttons().container().appendTo('#example_wrapper .col-md-6:eq(0)');
    },  
    
    

    If I use "layout" I no longer see the nice drop-down list for the number of rows to display and have to use the "ugly" 'pageLength' button in layout.

    Thanks,
    Giuseppe

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    Take a look at the layout docs. There are many layers you can use to layout the elements. In your screenshot it looks like the length change element is above the buttons. Use top2Start to place the length change above the buttons. Here is a test case:
    https://live.datatables.net/guwafemu/494/edit

    Is this what you are looking for?

    If you are still having difficulties then update my test case to show the issues you are having. Your partial code snippets make it difficult to understand what you have and where the problem might be.

    Kevin

  • GargiucnGargiucn Posts: 109Questions: 30Answers: 0

    Hello,
    I have no problem with "layout" except having to rewrite the css for my button customization.
    I just find it strange that an update can lose compatibility with a previous version and force to edit all the .js files of my programs...

    Have a nice day,
    Giuseppe

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    Answer ✓

    The issue was this:

     .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
    

    With DataTables 2, the class names used for the Bootstrap 5 grid have changed. For example they use col-md-auto me-auto for a cell now.

    The v2 upgrade was the ideal time to make some long over due changes, that would unfortunately break backwards compability like this. It was a long standing problem that you would need to inject buttons using a selector as use to be the way it was done.

    The new layout option was designed to address exactly this. You can now control table control elements independently of the styling framework being used.

    It is a pain, I reckognise that, but there was no option but to break some limited backwards compatability. I think I managed to keep that more or less limited to to use of external selectors and a few other legacy points.

    Allan

Sign In or Register to comment.