2016-12-28 3 views
1

이 링크를 따라 KendoUI 그리드에서 사용자 정의 도구 모음을 만들려고합니다 : http://demos.telerik.com/kendo-ui/grid/toolbar-template하지만 오류가 발생합니다. 내가 문제는 내가 그것을 위해 솔루션을 알아낼 수 없습니까의 된 시간 모르겠어요TypeError : r.getClientRects가 함수가 아닙니다.

<div id="example"> 
    <script type="text/x-kendo-template" id="template"> 
     <div class="toolbar"> 
      <label class="category-label" for="category">Show products by category:</label> 
      <input type="search" id="category" style="width: 150px" /> 
     </div> 
    </script> 
    <div id="grid"></div> 
    <script> 
     $(document).ready(function() { 
      var grid = $("#grid").kendoGrid({ 
       dataSource: { 

        transport: { 
         read: { 
          url: 'http://localhost:52738/Default1/KendoDataAjaxHandle', 
          type: "post", 
          dataType: "json" 
         } 
        }, 
        schema: { 
         data: "Data", 
         total: function (response) { 
          return $(response.Data).length; 
         } 
        }, 
        pageSize: 10 
       }, 
       toolbar: kendo.template($("#template").html()), 
       groupable: true, 
       sortable: true, 
       pageable: { 
        refresh: true, 
        pageSizes: true, 
        buttonCount: 5 
       }, 
       columns: [ 
          { 
           field: "CustomerAltID", 
           filterable: true 
          }, 
          { 
           field: "CustomerID", 
           title: "Customer ID" 
          }, 

          { 
           field: "CustomerName", 
           title: "Customer Name", 

           template: "<div class='customer-photo'" + 
                  "style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" + 
                 "<div class='customer-name'>#: CustomerName #</div>" 
          }, 
          { 
           field: "Gender", 
           title: "Gender", 
           template: "<div class='gender-photo'" + 
                  "style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>" 

          } 
       ] 
      }); 
      var dropDown = grid.find("#category").kendoDropDownList({ 
       dataTextField: "Gender", 
       dataValueField: "CustomerID", 
       autoBind: false, 
       optionLabel: "All", 
       dataSource: { 

        severFiltering: true, 
        transport: { 
         read: { 
          url: 'http://localhost:52738/Default1/KendoDataAjaxHandle', 
          type: "post", 
          dataType: "json" 
         } 
        }, 
        schema: { 
         data:"Data" 
        } 
       }, 
       change: function() { 
        var value = this.value(); 
        if (value) { 
         grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) }); 
        } else { 
         grid.data("kendoGrid").dataSource.filter({}); 
        } 
       } 
      }); 
     }); 
    </script> 
</div> 

:

이것은 내 코드에서 일을하려고하고있는 무슨이다. 나는 1.12

+0

무엇이 오류입니까? 사용할 수없는 dataSource 끝점 외에도 도구 모음에는 레이블과 DropDownList (http://dojo.telerik.com/@Stephen/aSIni)가 있습니다. 문제를 보여주는 dojo/jsfiddle을 제공 할 수 있습니까? 3.1 대신 검도와 함께 제공되는 jQuery 버전을 사용해 보셨습니까? 충돌을 배제하기 위해 jQuery-UI를 포함하지 않고 (이 코드에서는 필요하지 않음) 시도해 보셨습니까? –

답변

2

문제로 인해 jQuery를 버전 3.1을 현재 jQuery를 함께 작동하지 않습니다

검도를 사용하는 것입니다 jQuery를 3.1 및 jQuery를 UI- 버전 - 다음을 사용하고

v3, 공식적으로. 하지만 분명히 일할 수 있습니다. jquery-migrate도 포함 시키면됩니다. jQuery를의 http://www.telerik.com/forums/jquery-3-0

공식적으로 지원되는 버전은 다음과 같습니다 : 그것은 검도 R3 2016 SP2 또한 jQuery를 3.1.1로 작업을해야한다고 http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions 하는 것으로. 그래서

을 수행 할 수 있습니다

  1. /함께 제공하면
  2. 를 사용하거나와 jQuery를 3.1를 사용하는 검도의 어떤 버전에서 지원되는 jQuery를 버전을 사용
  3. 또는 사용을 JQuery와 - 마이그레이션 검도 R3 2016 SP2 및 jQuery 3.1. 1
0

이 GitHub의 문제 https://github.com/jquery/jquery/issues/3157에 언급 된 또 다른 대답은 HTML에서 <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>을 포함하는 것입니다. 이것은 나를 위해 일했다