Kendo UI bug與jQuery版本

Question

我在同一頁面上有Kendo UI網格和Kendo UI窗口。該窗口包含用於記錄插入的表單元素，記錄由網格中的一行表示。但由於我不知道的原因，當我打開窗戶並再次關閉並重新打開時，Kendo UI縮小了100倍。我不想破解窗口，所以我尋找替代解決方案。

我已經使用jQuery 1.7.2。我已經更新jQuery到版本1.8.0。並開窗，關閉和重新開放工作。我很高興，直到我意識到現在電網濾波器沒有工作。當我點擊一個網格過濾器時，沒有任何反應，沒有彈出窗口，什麼都沒有。這是什麼原因以及解決方案是什麼？

編輯：

這是我的代碼（我已經更換URL的值）。網格過濾器正在使用jQuery 1.7.2。和窗口重新打開與新版本的jQuery一起工作。另外，如果我刪除排序黑客，網格篩選器彈出窗口仍然不顯示。 。

var hshflt = {}; 
    var addWindow; 
    var editWindow; 
    var init = false; 
    //Sort Hack 

    /* 
    Changes all dataSources to case insensitive sorting (client side sorting). 
    This snipped enable case insensitive sorting on Kendo UI grid, too. 

    The original case sensitive comparer is a private and can't be accessed without modifying the original source code. 
    tested with Kendo UI version 2012.2.710 (Q2 2012/July 2012). 
    */ 

    var CaseInsensitiveComparer = { 

     getterCache: {}, 

     getter: function (expression) { 
      return this.getterCache[expression] = this.getterCache[expression] || new Function("d", "return " + kendo.expr(expression)); 
     }, 

     selector: function (field) { 
      return jQuery.isFunction(field) ? field : this.getter(field); 
     }, 

     asc: function (field) { 
      var selector = this.selector(field); 
      return function (a, b) { 

       if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) { 
        a = selector(a).toLowerCase(); // the magical part 
        b = selector(b).toLowerCase(); 
       } 

       return a > b ? 1 : (a < b ? -1 : 0); 
      }; 
     }, 

     desc: function (field) { 
      var selector = this.selector(field); 
      return function (a, b) { 

       if ((selector(a).toLowerCase) && (selector(b).toLowerCase)) { 
        a = selector(a).toLowerCase(); // the magical part 
        b = selector(b).toLowerCase(); 
       } 

       return a < b ? 1 : (a > b ? -1 : 0); 
      }; 
     }, 

     create: function (descriptor) { 
      return this[descriptor.dir.toLowerCase()](descriptor.field); 
     }, 


     combine: function (comparers) { 
      return function (a, b) { 
       var result = comparers[0](a, b), 
     idx, 
     length; 

       for (idx = 1, length = comparers.length; idx < length; idx++) { 
        result = result || comparers[idx](a, b); 
       } 

       return result; 
      }; 
     } 
    }; 

    kendo.data.Query.prototype.normalizeSort = function (field, dir) { 
     if (field) { 
      var descriptor = typeof field === "string" ? { field: field, dir: dir} : field, 
    descriptors = jQuery.isArray(descriptor) ? descriptor : (descriptor !== undefined ? [descriptor] : []); 

      return jQuery.grep(descriptors, function (d) { return !!d.dir; }); 
     } 
    }; 

    kendo.data.Query.prototype.sort = function (field, dir, comparer) { 

     var idx, 
length, 
descriptors = this.normalizeSort(field, dir), 
comparers = []; 

     comparer = comparer || CaseInsensitiveComparer; 

     if (descriptors.length) { 
      for (idx = 0, length = descriptors.length; idx < length; idx++) { 
       comparers.push(comparer.create(descriptors[idx])); 
      } 

      return this.orderBy({ compare: comparer.combine(comparers) }); 
     } 

     return this; 
    }; 

    kendo.data.Query.prototype.orderBy = function (selector) { 

     var result = this.data.slice(0), 
comparer = jQuery.isFunction(selector) || !selector ? CaseInsensitiveComparer.asc(selector) : selector.compare; 

     return new kendo.data.Query(result.sort(comparer)); 
    }; 

    kendo.data.Query.prototype.orderByDescending = function (selector) { 

     return new kendo.data.Query(this.data.slice(0).sort(CaseInsensitiveComparer.desc(selector))); 
    }; 
    //Sort Hack 

    $("#refresh-btn").click(function() { 
     refreshGrid(); 
    }); 

    var grid; 

    function getPageIndex() { 
     if (!(grid)) { 
      return 0; 
     } 
     return grid.pager.page() - 1; 
    } 

    function getPageSize() { 
     if (!(grid)) { 
      return 10; 
     } 
     return grid.pager.pageSize(); 
    } 

    function getFilters() { 
     if (!(grid)) { 
      return ""; 
     } 
     return grid.dataSource.filter(); 
    } 

    function getSorts() { 
     if (!(grid)) { 
      return ""; 
     } 
     var arr = grid.dataSource.sort(); 
     if ((arr) && (arr.length == 0)) { 
      return ""; 
     } 
     var returnValue = ""; 
     for (var index in arr) { 
      var type = ""; 
      for (var col in grid.columns) { 
       if (grid.columns[col].field === arr[index].field) { 
        type = grid.columns[col].type; 
       } 
      } 
      returnValue += ((returnValue.length > 0) ? (";") : ("")) + arr[index].field + "," + (arr[index].dir === "asc") + "," + type; 
     } 
     return returnValue; 
    } 

    function getColumns() { 
     if (!(grid)) { 
      return ""; 
     } 
     var columns = ""; 
     for (var col in grid.columns) { 
      if (columns.length > 0) { 
       columns += ";"; 
      } 
      columns += grid.columns[col].field + "," + grid.columns[col].type; 
     } 
     return columns; 
    } 

    var initGrid = true; 
    var grid2Data; 

    function getDataSource() { 
     $.ajax({ 
      type: 'POST', 
      url: 'mydsurl' + getParams(), 
      data: "filter=" + JSON.stringify(getFilters()) + "&columns=" + getColumns(), 
      success: function (param) { grid2Data = param; }, 
      //dataType: dataType, 
      async: false 
     }); 
     return grid2Data.Data; 
    } 

    var shouldClickOnRefresh = false; 
    function refreshGrid() { 
     shouldClickOnRefresh = false; 
     $.ajax({ 
      type: 'POST', 
      url: 'mydsurl' + getParams(), 
      data: "filter=" + JSON.stringify(getFilters()) + "&columns=" + getColumns(), 
      success: function (param) { grid2Data = param; }, 
      //dataType: dataType, 
      async: false 
     }); 
     grid.dataSource.total = function() { 
      return grid2Data.Total; 
     } 
     for (var col in grid.columns) { 
      if ((grid.columns[col].type) && (grid.columns[col].type === "Date")) { 
       for (var row in grid2Data.Data) { 
        grid2Data.Data[row][grid.columns[col].field] = new Date(parseInt((grid2Data.Data[row][grid.columns[col].field] + "").replace("/Date(", "").replace(")/", ""))); 
       } 
      } 
     } 
     grid.dataSource.data(grid2Data.Data); 
     shouldClickOnRefresh = true; 
    } 

    function getParams() { 
     return getPageSize() + "|" + getPageIndex() + "|" + getSorts(); 
    } 

    function bindGrid() { 
     var editUrl = 'myediturl'; 
     if (!(editWindow)) { 
      editWindow = $("#edit-window"); 
     } 
     $(".k-button.k-button-icontext.k-grid-edit").each(function (index) { 
      $(this).click(function() { 
       if (!editWindow.data("kendoWindow")) { 
        editWindow.kendoWindow({ 
         title: "Edit User", 
         width: "60%", 
         height: "60%", 
         close: onClose, 
         open: onEditOpen, 
         content: editUrl + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"] 
        }); 
       } 
       else { 

        editWindow.data("kendoWindow").refresh(editUrl + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"]); 
        editWindow.data("kendoWindow").open(); 
       } 
       editWindow.data("kendoWindow").center(); 
       return false; 
      }) 
     }); 
     $(".k-button.k-button-icontext.k-grid-delete").each(function (index) { 
      $(this).click(function() { 

       var r = confirm("Are you sure you want to delete this user?"); 
       if (r == true) { 
        $.ajax({ 
         type: 'POST', 
         url: 'mydelurl' + $("#grid").data().kendoGrid.dataSource.view()[index]["ID"], 
         success: function (param) { refreshGrid(); }, 
         async: false 
        }); 
       } 
       return false; 
      }); 
     }); 
    } 

    function onDataBound() { 
     if (!(shouldClickOnRefresh)) { 
      shouldClickOnRefresh = true; 
      bindGrid(); 
     } 
     else { 
      refreshGrid(); 
     } 
    } 

    $(function() { 
     $("#grid").kendoGrid({ 
      dataBound: onDataBound, 
      dataSource: { 
       autoSync: true, 
       data: getDataSource(), 
       serverPaging: true, 
       schema: { 
        model: { 
         fields: { 
          Email: { type: "string" }, 
          FullName: { type: "string" }, 
          LogCreateDate: { type: "date" }, 
          RoleName: { type: "string" }, 
          UserName: { type: "string" } 
         } 
        }, 
        total: function (response) { 
         return grid2Data.Total; 
        } 
       }, 
       pageSize: 10 
      }, 
      toolbar: ["create"], 
      scrollable: true, 
      sortable: true, 
      filterable: true, 
      pageable: { 
       input: true, 
       numeric: false, 
       pageSizes: true 
      }, 
      columns: [ 
        { 
         command: ["edit", "destroy"], 
         title: "&nbsp;" 
        }, 
        { 
         field: "Email", 
         title: "Email", 
         type: "String" 
        }, 
        { 
         field: "FullName", 
         title: "Full Name", 
         type: "String" 
        }, 
        { 
         field: "LogCreateDate", 
         title: "Created", 
         type: "Date", 
         template: '#= kendo.toString(LogCreateDate,"MM/dd/yyyy") #' 
        }, 
        { 
         field: "RoleName", 
         title: "Role", 
         type: "Custom" 
        }, 
        { 
         field: "UserName", 
         type: "String" 
        } 
       ], 
      editable: "popup" 
     }); 
     grid = $("#grid").data("kendoGrid"); 

     function onAddOpen() { 
     } 



     addWindow = $("#add-window"); 
     $(".k-button.k-button-icontext.k-grid-add").click(function() { 
      if (!addWindow.data("kendoWindow")) { 
       addWindow.kendoWindow({ 
        title: "Add User", 
        width: "60%", 
        height: "60%", 
        close: onClose, 
        open: onAddOpen, 
        content: 'myaddurl' 
       }); 
      } 
      else { 
       addWindow.data("kendoWindow").open(); 
      } 
      addWindow.data("kendoWindow").center(); 
      addWindow.data("kendoWindow").refresh(); 
      return false; 
     }); 

    }); 

    function onClose() { 
     $("#refresh-btn").click(); 
    } 

    function onEditOpen() { 
     //editWindow.data("kendoWdinow").center(); 
    } 

Answer 1

我第二次入侵了Kendo UI，這次我解決了它與jQuery 1.8.3的不兼容問題。使用下面的技巧：

$(".k-grid-filter").each(function(index) { 
    $(this).click(function() { 
     $($(".k-filter-menu.k-popup.k-group.k-reset")[index]).offset({ 
      left: $($(".k-grid-filter")[index]).offset().left - $($(".k-filter-menu.k-popup.k-group.k-reset")[index]).width(), 
      top: $($(".k-grid-filter")[index]).offset().top + $($(".k-grid-filter")[index]).height()}) 
     }) 
    }); 

我已經把這個攻入第一個瞧的文件加載事件，它的工作原理。這個黑客確實看起來很醜陋，但在設計之後它會看起來像新的一樣。我很高興我找到了解決辦法，但我很不高興，我不得不兩次攻擊Kendo UI。除了錯誤之外，這是一個非常好的工具。

Answer 2

的jQuery 1.8＃僅與劍道UI兼容 - 2012年第二季度SP1（2012.2 913）或更高版本..

如果劍道UI版本早，你應該更新它。