Collapse individual search panes with individual button

Collapse individual search panes with individual button

valredrvalredr Posts: 21Questions: 7Answers: 0

I have implemented Search Pane and i want to have the option to collapse the individual search panes as it is vertically tacked.
Can you please help here

This question has an accepted answers - jump to answer

Answers

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

    How do you mean collapse? Do you mean not to show the pane at all? Or to close it? If you could explain more, please, that will help us understand the issue.

    Colin

  • valredrvalredr Posts: 21Questions: 7Answers: 0

    Thanks @colin for your reply.
    The below is the expected result that i need to achieve

    The current implemented looks as below

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

    Ah, I see, thanks for the explanation. There's no option to close them, but you can vertically stack them - see example here. You might be able to collapse them with some clever CSS perhaps, but that's not something currently supported, I'm afraid.

    Colin

  • valredrvalredr Posts: 21Questions: 7Answers: 0

    @colin Thanks for your reply I have vertically stacked it as per the link mentioned but the main requirement was to collapse the individual search pane.
    Currently I lack the knowledge of the clever css, I could use some help if you can provide me some guidance like some third party css or something
    Thanks

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

    You could try something like this. It's a bit clunky - you have to click on one of the elements in the header of the pane, but it works well enough. It'll work just as well when the panes are vertically stacked too.

    Colin

  • valredrvalredr Posts: 21Questions: 7Answers: 0

    @colin WOW thanks you are a life saver this will do very well. I was tryign all the ugly css code all morning but this looks good. Thanks.
    Just one more thing is that i am using the below code like a down ward arrow to indicate the dropdown

        var btn = $('<span class="caret"></span>');
        $(".dtsp-buttonGroup").append(btn);
    

    Is this the right way of doing it or there is a better way of implementing the same.
    Once again really appreciate your help

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

    Could you update the test case to demonstrate that, please, that'll help to get us seeing the same thing,

    Colin

  • valredrvalredr Posts: 21Questions: 7Answers: 0

    @colin Thanks for your reply. Please find below the test case

    http://live.datatables.net/kowapasi/4/edit?html,css,js,output

    the caret icon changes position if all panes are minimized.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    It needs:

    div.dtsp-columns-1 {
      width: 100%;
    }
    

    http://live.datatables.net/kowapasi/5/edit

    Allan

  • valredrvalredr Posts: 21Questions: 7Answers: 0

    @allan Thanks for your reply.
    When it collapse all the pane the span icon changes position, it should remain the same when all the tables are collapsed.
    Kindly suggest.

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    edited August 2021 Answer ✓

    I don't see that behavior with Allan's example using Chrome on the Mac. Please let us know the steps to recreate the issue in Allan's example. Otherwise please update the example to show the problem.

    Kevin

  • frenzy1frenzy1 Posts: 10Questions: 1Answers: 0

    Hello @colin,

    Would it be possible to get it to work with
    initCollapsed: true,
    on each pane?

    http://live.datatables.net/kowapasi/26/edit

    meaning - the panes are collapsed initially, and then on a click they'll appear and another click disappear.

    Thank you.

  • frenzy1frenzy1 Posts: 10Questions: 1Answers: 0

    I got it to work with

            $('.dtsp-hidden').each(function() {
                $(this).removeClass('dtsp-hidden').hide();
            });
    
  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @frenzy1 , @valredr ,

    Just to note that the functionality mentioned above here was later added as a full feature. The collapsing of panes should now work with no extra configuration - see here.

    Thanks,
    Sandy

Sign In or Register to comment.