SearchPane dialog with close button

SearchPane dialog with close button

imicimic Posts: 6Questions: 0Answers: 0

Thanx for great extension!
Could you please show example or direction to write code (extend SearchPane button) to include Close button under all panes!

Replies

  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin

    I'm not 100% sure what you mean. What will the close button do? Is it a button per pane?

    Thanks,
    Allan

  • imicimic Posts: 6Questions: 0Answers: 0
    edited February 2020

    It is one button under all panes which closes SearchPanes dialog box.
    For example in editor extension there is option to include custom buttons. I wonder if something similar is possible with SearchPanes extension?

    $('#myTable').DataTable( {
        buttons: [
            {
                extend: 'edit',
                editor: myEditor,
                formButtons: [
                    {
                        label: 'Close',
                        fn: function () { this.close(); }
                    },
                    'Save row'
                ]
            },
            'searchPanes', // default searchPanes dialog with no buttons
            {
                extend: 'searchPanes',
                formButtons: [ //this would be nice option to have custom buttons in searchPanes 
                    {
                        label: 'Close',
                        fn: function () { this.close(); }
                    }
                ]
            },
        ]
    } );
    
  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin

    Thanks for the clarification - I understand now. Possibly is the answer - I'm not sure what else that feature would be used for, but we'll take a look and see if we come up with anything. Will post back when we have an answer.

    Allan

  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin

    We've just been thinking about it a bit, and you could do something like this:

    table.on('buttons-action', function (e, button) {
      $(table.searchPanes.container()).append(
        $('<button>Close</button>').click(function () {
          table.button().popover(false);
        });
      });
    });
    

    Allan

  • imicimic Posts: 6Questions: 0Answers: 0

    Thank you. Yes, your code is what I am looking for. Used it with little modifications:

      table.on('buttons-action', function (e, button) {  
        if (!$(".dtsp-closePanes")[0]){
            $(table.searchPanes.container()).append(
                $('<button class="dtsp-closePanes">Aizvērt</button>').click(function(){
                    table.button().popover(false);
                })
            );
        }    
      }); 
    

    Maybe there is some event which can be used in this case?

  • imicimic Posts: 6Questions: 0Answers: 0

    After some testing it appears that another IF is needed:

      table.on('buttons-action', function (e, buttonApi, dataTable, node, config ) {  
        if(config.hasOwnProperty('_panes')){
          if (!$(".dtsp-closePanes")[0]){
              $(table.searchPanes.container()).append(
                  $('<button class="dtsp-closePanes">Close</button>').click(function(){
                      table.button().popover(false);
                  })
              );
          }    
        }
      });  
    

    Without additional checking multiple buttons are created.

  • allanallan Posts: 63,534Questions: 1Answers: 10,475 Site admin

    Cool - thanks for posting back with your tweaks.

    Allan

  • mjusticemjustice Posts: 1Questions: 0Answers: 0

    Sorry, I'm learning this as I go here - thanks to you both for figuring this out.

    Does this need to be in the same script that the datatable is initialized?
    Thanks!

  • asichiasichi Posts: 1Questions: 0Answers: 0

    I used this for my use case (Bootstrap 4 css).

    table.on('buttons-action', function (e, buttonApi, dataTable, node, config) {
         $(table.searchPanes.container().find('.dtsp-clearAll')).after(
              $('<button class="dtsp-closePanes col-auto btn btn-light">Close</button>').click(function () {
                   table.button().popover(false);
              })
         );
    });
    
  • AcunnAcunn Posts: 1Questions: 0Answers: 0

    After some testing

    table.on('buttons-action', function (e, buttonApi, dataTable, node, config) {
                    if (config.hasOwnProperty('_panes')) {
                        if (!$(".dtsp-closePanes")[0]) {
                            $(table.searchPanes.container().find('.dtsp-clearAll')).after(
                                $(table.searchPanes.container().find('.dtsp-clearAll')).append(
                                    $('<button class="dtsp-closePanes">Close</button>').click(function () {
                                        table.button().popover(false);
                                    })
                                )
                            );
                        }
                        else {
                            $('.dtsp-closePanes').click(function () {
                                table.button().popover(false);
                            })
                        }
                    }
                });
    
    

    It renders multiple buttons without additional control and is poorly positioned

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    @Acunn I'm not clear if you're asking for help with the poor positioning. If so, 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

Sign In or Register to comment.