Declined
Last Updated: 20 Sep 2013 11:53 by ADMIN
Stephen
Created on: 20 Sep 2013 01:02
Category: Kendo UI for jQuery
Type: Feature Request
1
Fix browser scroll issue when a grid is focused (e.g. click sort or filter icons)
Happens In chrome (and opera) when a grid is first rendered.
If you click the sort or filter icon, the grid becomes focused.  As a result, the browser scrolls the window, even though the grid is already focused.  This causes an issue if you have a fixed header, since the grid becomes obstructed.  The following is a modified version of existing kendo code, and will keep the grid where it belongs, so it does not move (works for us).  Hope it helps, and either way thanks for a great product:

   function focusTable(table, direct) {

     // MODIFICATION:
     // capture window x/y position in order to restore it at end of function.
     // this is necessary since chrome/opera will scroll focused elements into
     // view, even if they are visible.

     var x = window.x;
     var y = window.y;
     var scrollable = $(table).closest(":scrollable('vertical')");
     var scrollLeft= scrollable[0].scrollLeft;
     var scrollTop = scrollable[0].scrollTop;

     var msie = browser.msie;
     if (direct === true) {
         table = $(table);
         var condition = msie && table.parent().is(".k-grid-content,.k-grid-header-wrap"),
             scrollTop, scrollLeft;
             if (condition) {
                 scrollTop = table.parent().scrollTop();
                 scrollLeft = table.parent().scrollLeft();
             }

             if (msie) {
                 try {
                     //The setActive method does not cause the document to scroll to the active object in the current page
                     table[0].setActive();
                 } catch(e) {
                     table[0].focus();
                 }
             } else {
                 table[0].focus(); //because preventDefault bellow, IE cannot focus the table alternative is unselectable=on
             }

             if (condition) {
                 table.parent().scrollTop(scrollTop);
                 table.parent().scrollLeft(scrollLeft);
             }

     } else {
         $(table).one("focusin", function(e) { e.preventDefault(); }).focus();
     }

     if(browser.webkit || browser.opera) {
       window.scrollTo(x, y);
       scrollable.scrollTop(scrollTop);
       scrollable.scrollLeft(scrollLeft);
     }
  }
  
  function tableClick(e) {
    var currentTarget = $(e.currentTarget),
        isHeader = currentTarget.is("th"),
        currentTable = currentTarget.closest("table")[0];

    if (kendo.support.touch) {
        return;
    }

    if (currentTable !== this.table[0] && currentTable !== this.thead.parent()[0]) {
        return;
    }

    this.current(currentTarget);

    // MODIFICATION:
    // Removed timeout so the table can focus now (as required).
    // That way if the user clicks the filter icon first, the table
    // will focus and the filter menu will display.  Else table will
    // focus some 250 msecs from now, after the filter menu shows.
    // In such a case, the menu would blur immediately, and close.

    if (isHeader || !$(e.target).is(":button,a,:input,a>.k-icon,textarea,span.k-icon,.k-input,.k-multiselect-wrap")) {
        focusTable(currentTable, true);
    }

    if (isHeader) {
        e.preventDefault(); //if any problem occurs, call preventDefault only for the clicked header links
    }
  }

   ui.plugin(Grid);
   ui.plugin(VirtualScrollable);
})(window.kendo.jQuery);
1 comment
ADMIN
Brandon
Posted on: 20 Sep 2013 11:53
Please log this issue via the Kendo UI Forums or by creating a ticket in your account.