KendoUI 그리드가 화면의 데이터와 함께 나타나지 않습니다.

안녕하세요 저는 Kendo UI 컨트롤을 사용하여 각도 2 어플리케이션을 개발 중입니다. 나는 검도 그리드를 설정하기 위해 검도 UI 사이트의 예를 따르고 있습니다. 어떤 이유로 화면에 아무 것도 나타나지 않습니다. 데이터는 응용 프로그램에서 참조되고 데이터 소스에 바인딩 된 로컬 products.js 파일에 저장됩니다.KendoUI 그리드가 화면의 데이터와 함께 나타나지 않습니다.

아래의 코드 Product.html

을 참조하십시오 내가 자바 스크립트와 CSS 파일에 대한 모든 참조를 확인하고 그들이 잘 보인다

var products = [{ 
    ProductID : 1, 
    ProductName : "Chai", 
    SupplierID : 1, 
    CategoryID : 1, 
    QuantityPerUnit : "10 boxes x 20 bags", 
    UnitPrice : 18.0000, 
    UnitsInStock : 39, 
    UnitsOnOrder : 0, 
    ReorderLevel : 10, 
    Discontinued : false, 
    Category : { 
     CategoryID : 1, 
     CategoryName : "Beverages", 
     Description : "Soft drinks, coffees, teas, beers, and ales" 
    } 
}, { 
    ProductID : 2, 
    ProductName : "Chang", 
    SupplierID : 1, 
    CategoryID : 1, 
    QuantityPerUnit : "24 - 12 oz bottles", 
    UnitPrice : 19.0000, 
    UnitsInStock : 17, 
    UnitsOnOrder : 40, 
    ReorderLevel : 25, 
    Discontinued : false, 
    Category : { 
     CategoryID : 1, 
     CategoryName : "Beverages", 
     Description : "Soft drinks, coffees, teas, beers, and ales" 
    } 
}];

<!DOCTYPE html> 
    <html> 



    <head> 
     <title></title> 

     <link href="../../assets/css/kendo/2016.3.1028/kendo.common.min.css" rel="stylesheet" /> 
     <link href="../../assets/css/kendo/2016.3.1028/kendo.default.min.css" rel="stylesheet"/> 
     <link href="../../assets/css/kendo/2016.3.1028/kendo.default.mobile.min.css" rel="stylesheet" /> 
     <script src="../../scripts/kendo/2016.3.1028/jquery.min.js"></script> 
     <script src="../../scripts/kendo/2016.3.1028/kendo.all.min.js"></script> 

    </head> 
    <body> 

     <script src="../../scripts/shared/products.js"></script> 
     <div id="example"> 





      <div id="grid"></div> 

      <script> 
       $(document).ready(function() { 
        $("#grid").kendoGrid({ 
         dataSource: { 
          data: products, 
          schema: { 
           model: { 
            fields: { 
             ProductName: { type: "string" }, 
             UnitPrice: { type: "number" } 

            } 
           } 
          }, 
          pageSize: 20 
         }, 
         height: 550, 
         scrollable: true, 
         sortable: true, 
         filterable: true, 
         pageable: { 
          input: true, 
          numeric: false 
         }, 
         columns: [ 
          { field: "ProductName", title: "Units In Stock", width: "130px" }, 
          { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, 

         ] 
        }); 
       }); 
      </script> 

     </div> 


    </body> 

    </html>

Products.js. 개발자 도구를 사용하여 콘솔 창에 오류가 있는지 확인하려고했습니다.

출처

2016-11-05 Tom

같은 파일에서 사용하기 전에 데이터 소스를 만들어야합니다 (예 : http://www.telerik.com/forums/how-to-display-json-data-source-in-kendo-ui- 그리드 –

톰, 이것에 문제가 있습니다. 나는 그것을 테스트하고 잘 작동합니다. – andrescpacheco

데이터 소스를 할당하기 전에 다음을 추가했습니다. var sharedDataSource = new kendo.data.DataSource ({ data : products }); 하지만이 dosent가 작동하는 것 같습니다 – Tom

코드에 어떤 문제도 나타나지 않습니다.

어떤 브라우저를 사용하고 있으며 프로젝트의 파일 구조는 무엇입니까? js 및 css 파일에 대한 몇 가지 복잡한 경로를 사용하고 있습니다.

어쨌든 2 개의 작동 예제를 설정했습니다.

Codepen : http://codepen.io/xszaboj/pen/XNNKEv
GitHub의 프로젝트 github link

당신이 페이지에 오류가 표시되지 않는 이유는 귀하의 질문에 대답하지 않습니다. 그러나 그것이 도움이되기를 바랍니다.

코드는 당신과 동일합니다 : 여기

$(document).ready(function() { 
    $("#grid").kendoGrid({ 
     dataSource: { 
      data: products, 
      schema: { 
       model: { 
        fields: { 
         ProductName: { type: "string" }, 
         UnitPrice: { type: "number" } 

        } 
       } 
      }, 
      pageSize: 20 
     }, 
     height: 550, 
     scrollable: true, 
     sortable: true, 
     filterable: true, 
     pageable: { 
      input: true, 
      numeric: false 
     }, 
     columns: [ 
      { field: "ProductName", title: "Units In Stock", width: "130px" }, 
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" }, 

     ] 
    }); 
});

내 파이어 폭스 네트워크 캡처입니다. 우리가 비교할 수 있도록 내 github 프로젝트에 포함시켜 주시겠습니까?

출처

2016-11-17 11:44:02 xszaboj

나는 그것이 내가 당신이 아니라 어떻게 작동하는지 이해하지 못합니다. 내가 div 요소에 서비스에 의해 반환 된 JSON 개체를 인쇄 할 수 있어요. 또한 그리드에서 직접 데이터를 할당하려고 시도했지만 그 작업은하지 않았습니다.document.ready 함수를 사용하여 document.write를 시도했지만 jint가 작동하지 않는다는 느낌이 들었습니다. 그러나 dint는 아무 것도 인쇄하지 않는 것 같습니다. – Tom

파이어 폭스와 파이어 버그를 설치했지만 문제를 추적 할 수 없습니다. jquery가 작동하지 않는 것과 확실히 관련이 있습니다. type 속성을 추가하여 링크를 수정하려고했습니다. – Tom

비교해 볼 수 있도록 파이어 폭스 네트워크를 포함시켜 주시겠습니까? – xszaboj

KendoUI 그리드가 화면의 데이터와 함께 나타나지 않습니다.

답변

관련 문제