2014-04-29 3 views
11

저는 검도 그리드 및 검도 UI를 처음 사용했습니다. 내 질문에 내가이 오류를 Uncaught TypeError : undefined의 'replace'속성을 읽을 수 없습니다. Grid에서

<script id="rowTemplate" type="text/x-kendo-tmpl"> 
     <tr class='k-alt'> 
      <td> 
       ${ FirstName } ${ LastName } 
      </td> 
     </tr> 
      </script> 
rowTemplate

rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')), 

HTML 원인 내 KendoGrid

$("#Grid").kendoGrid({ 
      scrollable: false, 
      sortable: true, 
      pageable: { 
       refresh: true, 
       pageSizes: true 
      }, 
      dataSource: { 
       transport: { 
        read: { 
         url: '/Info/InfoList?search=' + search, 
         dataType: "json", 
         type: "POST" 
        } 

       }, 
       pageSize: 10 
      }, 
      rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')), 
      altRowTemplate: kendo.template($("#rowTemplate").html()) 
     }); 

라인에 내 코드입니다

Uncaught TypeError: Cannot read property 'replace' of undefined 

이 오류를 해결할 수있는 방법입니다

고마워요. :)

+2

내가 볼 수있는 유일한 이유는 jQuery를이 rowTemplate' ... 것은 당신이를 기록 할 수 있습니다 'id를 가진 요소를 찾을 수 없습니다 것입니다 '$ ("# rowTemplate"). length.의 값 반환 됨 반환되는 내용보기 –

+0

@ArunPJohny 0을 반환합니다. 이유는 ... –

+0

입니다. ID가 'rowTemplate' 인 요소가 없습니다. –

답변

21

jQuery가 요소를 찾을 수 없다고 생각합니다. 모든

먼저

var rowTemplate = document.getElementById("rowTemplate"); 

또는

var rowTemplate = $('#rowTemplate'); 

그런 다음 코드를 시도

var rowTemplate= document.getElementsByName("rowTemplate"); 

또는

요소를 찾아 다시

rowTemplate.html().replace(....) 
1

아래의 코드 스 니펫으로 시도해보십시오.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script> 
    <script> 
     function onDataBound(e) { 
      var grid = $("#grid").data("kendoGrid"); 
      $(grid.tbody).find('tr').removeClass('k-alt'); 
     } 

     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        type: "odata", 
        transport: { 
         read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
        }, 
        schema: { 
         model: { 
          fields: { 
           OrderID: { type: "number" }, 
           Freight: { type: "number" }, 
           ShipName: { type: "string" }, 
           OrderDate: { type: "date" }, 
           ShipCity: { type: "string" } 
          } 
         } 
        }, 
        pageSize: 20, 
        serverPaging: true, 
        serverFiltering: true, 
        serverSorting: true 
       }, 
       height: 430, 
       filterable: true, 
       dataBound: onDataBound, 
       sortable: true, 
       pageable: true, 
       columns: [{ 
        field: "OrderID", 
        filterable: false 
       }, 
          "Freight", 
          { 
           field: "OrderDate", 
           title: "Order Date", 
           width: 120, 
           format: "{0:MM/dd/yyyy}" 
          }, { 
           field: "ShipName", 
           title: "Ship Name", 
           width: 260 
          }, { 
           field: "ShipCity", 
           title: "Ship City", 
           width: 150 
          } 
         ] 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div id="grid"> 
    </div> 
</body> 
</html> 

다른 방법으로 같은 것을 구현했습니다.

1

속성이 pageable -> pageSizes: true 일 수 있습니다.

이것을 제거하고 다시 확인하십시오.

0

제 경우에는 뷰를 부분 뷰로 변환했기 때문에 "@section scripts"에서 템플릿을 제거하는 것을 잊었습니다. 섹션 블록을 제거하고 내 문제를 해결했습니다. 섹션이 부분 뷰에서 렌더링되지 않기 때문입니다.

0

이 모델에 ID를 정의하는 것이 중요하다

.DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(20) 
     .Model(model => model.Id(p => p.id)) 
    ) 
+2

영어로만 입력하십시오. 다른 언어의 번역을 추가하지 마십시오. –

관련 문제