SearchBuilder RTL support

SearchBuilder RTL support

jonagsjonags Posts: 4Questions: 1Answers: 0

Link to test case:

http://live.datatables.net/luzexopi/1/edit

Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hi guys,

Do you plan to implement RTL to searchBuilder ? Currently the RTL doesn't work at all as expected on searchBuilder and we can't manage that by CSS because many elements styles are calculated on events.

See example above.

Thanks.

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    It isn't on the work list at the moment, but I would warmly welcome a pull request that adds support for RTL.

    Allan

  • jonagsjonags Posts: 4Questions: 1Answers: 0

    Sorry but i am not able to make this changes into the searchBuilder extension.
    Very sad that DataTables support RTL but not SearchBuilder, so we can't use it on RTL projects.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    If there is demand for it, or someone (yourself?) would like to sponsor the development of it, then I'll be able to prioritise it. But at the moment, there is such a backlog, I'm afraid there are a few other things that I need to work on first. Sorry.

    Allan

  • jonagsjonags Posts: 4Questions: 1Answers: 0

    No problem.
    Hope some others would request the same thing :)

  • jonagsjonags Posts: 4Questions: 1Answers: 0

    For those who need the same thing, here is a temp solution.

    Ps : Tested only with Bootstrap 5 datatables files and searchBuilder as a button.

    Add in your rtl css file this content :

    div.dataTables_wrapper { direction:rtl; }
    div.dataTables_wrapper div.dataTables_filter { text-align:left; }
    
    div.dtsb-searchBuilder { text-align:right; }
    div.dtsb-searchBuilder div.dtsb-titleRow { display:flex; justify-content:space-between; }
    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria .form-select { padding-left: 30px !important; padding-right: .75em !important; }
    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria select.dtsb-dropDown, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria input.dtsb-input { margin-left: .8em; margin-right: 0; }
    div.dtsb-searchBuilder div.dtsb-group div.dtsb-logicContainer { margin-left:.8em; margin-right:0; }
    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-delete, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-right, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-left { margin-left:.8em; margin-right:0; }
    div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-delete:last-child, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-right:last-child, div.dtsb-searchBuilder div.dtsb-group div.dtsb-criteria div.dtsb-buttonContainer button.dtsb-left:last-child { margin:0; }
    

    And add in a new JS file that you will load after datatables :

    (function($) {
        /**
         * -------------------------------------------------------------------------
         * On load
         * -------------------------------------------------------------------------
         */
        $(function() {
            /***********************************
             * Extend DataTable group
             ***********************************/
            $.extend(
                true,
                $.fn.dataTable.Group,
                {
                    prototype                           : {
                        setupLogic                          : function() {
                            // Remove logic button
                            this.dom.logicContainer.remove();
                            this.dom.clear.remove();
    
                            // If there are no criteria in the group then keep the logic removed and return
                            if(this.s.criteria.length < 1)
                            {
                                if(!this.s.isChild)
                                {
                                    this.dom.container.trigger('dtsb-destroy');
    
                                    // Set criteria left margin
                                    this.dom.container.css('margin-left', 0);
                                }
    
                                return;
                            }
    
                            this.dom.clear.height('0px');
                            this.dom.logicContainer.append(this.dom.clear);
    
                            // Prepend logic button
                            this.dom.container.prepend(this.dom.logicContainer);
    
                            for(var _i = 0, _a = this.s.criteria; _i < _a.length; _i++)
                            {
                                var crit                            = _a[_i];
    
                                if(crit.criteria instanceof $.fn.dataTable.Criteria)
                                    crit.criteria.setupButtons();
                            }
    
                            // Set width, take 2 for the border
                            var height                          = this.dom.container.outerHeight() - 1;
    
                            this.dom.logicContainer.width(height);
                            this._setLogicListener();
    
                            // Set criteria left margin
                            this.dom.container.css('margin-right', this.dom.logicContainer.outerHeight(true));
    
                            var logicOffset                     = this.dom.logicContainer.offset();
    
                            // Set horizontal alignment
                            var currentLeft                     = logicOffset.left;
                            var groupLeft                       = this.dom.container.offset().left;
                            var shuffleLeft                     = currentLeft - groupLeft;
                            var newPos                          = groupLeft + this.dom.container.outerWidth(true) - this.dom.logicContainer.height();
    
                            this.dom.logicContainer.offset({ left: newPos });
    
                            // Set vertical alignment
                            var firstCrit                       = this.dom.logicContainer.next();
                            var currentTop                      = logicOffset.top;
                            var firstTop                        = $(firstCrit).offset().top;
                            var shuffleTop                      = currentTop - firstTop;
                            var newTop                          = currentTop - shuffleTop;
    
                            this.dom.logicContainer.offset({ top: newTop });
    
                            this.dom.clear.outerHeight(this.dom.logicContainer.height());
    
                            // Set clear listner event
                            this._setClearListener();
                        },
                    },
                }
            );
        });
    })(jQuery);
    
  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    Superb - thanks for sharing that with us!

    Allan

  • alghorabaaalghorabaa Posts: 1Questions: 0Answers: 0

    Thanks a lot, your solution works like a charm when browsing in PCs, but buttons don't appear normally when browsing in mobiles.

Sign In or Register to comment.