SearchPane dialog with close button

SearchPane dialog with close button

imicimic Posts: 5Questions: 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: 51,422Questions: 1Answers: 7,754 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: 5Questions: 0Answers: 0
    edited February 7

    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: 51,422Questions: 1Answers: 7,754 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: 51,422Questions: 1Answers: 7,754 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: 5Questions: 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: 5Questions: 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: 51,422Questions: 1Answers: 7,754 Site admin

    Cool - thanks for posting back with your tweaks.

    Allan

Sign In or Register to comment.