responsive visible method strange behavior

responsive visible method strange behavior

dougsmdougsm Posts: 5Questions: 2Answers: 0

Hello,

My routine uses version 1.0.7 and method visible() is working fine, it returns true only for the columns that fits the page.
When I try to use version 2.2.2, the method only returns true, no matter actual state of each column.

this.myDataTable.columns().every(function (i) {
            if (i > 0) {

                console.log('visible', this.visible());

            }
        });

What can I do to use a recent version and get the same result?

Thank you.
Doug

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @dougsm ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    One quick point, column().visible() is concerned about visibility, not those hidden due to responsiveness. Use column().responsiveHidden() to determine if the column is technically visible, but just hidden due to responsiveness.

  • dougsmdougsm Posts: 5Questions: 2Answers: 0

    Thank you!

    Just changed the method and got the right behavior.

    this.myDataTable.columns().every(function (i) {
                if (i > 0) {
     
                    console.log('visible', this.responsiveHidden());
     
                }
            });
    
  • dougsmdougsm Posts: 5Questions: 2Answers: 0

    This generated another issue,

    I´m using method columns().visible(false|true) to hide/show the responsive columns but with it seems that the responsive extension do not recognise those changes.

    What method can I use to hide/show columns work with responsive extension??

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    Hi @dougsm ,

    I´m using method columns().visible(false|true) to hide/show the responsive columns but with it seems that the responsive extension do not recognise those changes.

    It's behaving as expected here. I've hidden the Office column (column 2) and when columns are removed responsively the Office information isn't being displayed. If you've got your own responsive.details.renderer you will need to consider that visibility in your code.

    What method can I use to hide/show columns work with responsive extension??

    Just use column().visible(),

    Cheers,

    Colin

  • dougsmdougsm Posts: 5Questions: 2Answers: 0

    The problem is that I´m doing a dynamic list of toggle buttons of each column like here. It´s because I can´t find a way to specify a container for those buttons and apply CSS for the buttons.
    So I made a solution myself, but i´m struggleing with it.
    As you can see here different methods gave me a different result for the same purposes. It´s confusing.

    I want to put the column buttons inside a modal DIV. Is there a way?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    I'm not clear what the question is, or what's wrong, but a key thing to consider is that column().visible() when called as a getter only returns false if it's been hidden by column().visible() or the visibility toggle buttons (as they just wrap to that API call anyway). If the column was removed due to responsiveness, column().visible() would still return true.

    I want to put the column buttons inside a modal DIV. Is there a way?

    You could do something like this example here - you can place the buttons into any container.

    Cheers,

    Colin

This discussion has been closed.