Kanban RTL issue with Column Toggle

[Boris Dongarov]

Hello,

The Collumn Toggle behaviour is different in RTL mode. After Kanban is rendered, if user expands and then collapses a column, the text becomes invisible only in RTL. If you compare the resulting HTML in F12 the difference between RTL and LTR can be easily seen:

RTL:

<div class="e-shrinkheader" style="position: relative; top: -123.917px;">Closed Deals<div class="e-shrinklabel">[<div class="e-shrinkcount">1</div>]</div></div>

LTR:

<div class="e-shrinkheader">Closed Deals<div class="e-shrinklabel">[<div class="e-shrinkcount">1</div>]</div></div>

If  "style" attribute is manually removed from DOM, the issue disappears.

We consider it a bug. Please let us know if this issue is on your radar.

[Buvana Sathasivam]

Hi Boris,   

  

Thanks for using Syncfusion Products.   

  

We were able to reproduce your reported issue.  This issue occurs only when it rendered the Kanban after the top space.  If you wish to show the collapsed header text in collapsed column, you can follow the below work around solution.     

  

We have found the row cell for clicked items and found the top position for rowcell and shrink label.  You can find the top position using row cell top and Kanban element top position and assign this value into shrinkHeader top position.  Please find the below code.   

  

toggleColumn.html   

  

$("#Kanban").ejKanban({   

                  ….     

              headerClick: 'header'    // Header click   

});   

   

function headerClick(args) {  // Triggered when you click the header   

                   var index = args.target.index();   

                   var key = $($("#Kanban").find('.e-columnrow .e-rowcell')[args.target.index()]).attr("data-ej-mappingkey");  // Get the key value for clicked header text    

                   var rowcell = $("#Kanban").find("td.e-rowcell[data-ej-mappingkey='"+ key + "']");  // Find all row cells which contains clicked text    

                   var bool = true;   

                   if (!args.target[0].classList.contains("e-shrinkcol")) {   

                       return;   

                   }   

                   for (var i = 0; i < rowcell.length; i++) {   

                       var contentTop = $(rowcell[i]).offset().top, sCountTop = $(rowcell[i]).find('.e-shrinklabel').offset().top;     

                       if (args.model.enableRTL && contentTop > sCountTop) {  // Check if rowcell top is exceeded on shrink label   

                           var sHeader = $(rowcell[i]).find(".e-shrinkheader");   

                           if (bool) {   

                               var elTop = contentTop - $("#Kanban").offset().top;  // Calculated original top position for Kanban rowcell   

                               var top = elTop - $("#Kanban").find(".e-kanbanheader").height();   // Exclude the Kanban header   

                               bool = false;   

                           }   

                           sHeader.css({ 'position': 'relative', 'top': top });   

                       }   

                   }   

              }   

       

  

JS Playground: https://jsplayground.syncfusion.com/tr3pzhfn    

  

We have confirmed the mentioned issue, “Collapsed shrink header not shown properly when collapsed and expand the columns with enableRTL property” as a defect and logged a defect report. This fix will be included on our Essential Studio Vol 2 SP-2, 2018 which will be rolled out by end August.    

  

Regards,   

Buvana S   

   

 

[Boris Dongarov]

Hi Buvana,

Unfortunately your solution didn't work for longer headers.

This is what I came up with:

            headerClick: function(args) {
                if (!args.target[0].classList.contains("e-shrinkcol") || !args.model.enableRTL) {
                    return;
                }
                var shrinkheader = $($("#Kanban").find('.e-columnrow .e-rowcell')[args.target.index()]).find(".e-shrinkheader");
                var meterWrap = $("<div class='e-kanban'><div class='e-kanbancontent'><div class='e-rowcell'><div class='e-shrinkheader' style='transform:none;position: absolute; width:auto; visibility:hidden; white-space:nowrap;'></div></div></div></div>");
                var meter = meterWrap.find(".e-shrinkheader");
                meter.html(shrinkheader.html());

                $('body').append(meterWrap);

                shrinkheader.css({ 'position': 'relative', 'top': '', 'transform': 'rotate(90deg) translate(' + (meter.width() - 25) + 'px)' });
                meterWrap.remove();
            },

[Buvana Sathasivam]

Hi Boris,   

  

Thanks for your sample.     

  

Your shared solution is working based on Kanban columns.  So, we have modified your solution and provided support for both Kanban columns and swimlanes.  Please find the modified JS playground.   

https://jsplayground.syncfusion.com/1uyntlfa       

  

Please get back to us if you need any assistance.   

  

Regards,   

Buvana S