2014-04-29 10 views
11

Sono nuovo nell'usare Kendo Grid e Kendo UI. La mia domanda è come posso risolvere questo erroreUnchaught TypeError: impossibile leggere la proprietà 'replace' di undefined In Grid

Uncaught TypeError: Cannot read property 'replace' of undefined 

Questo è il mio codice sul mio 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()) 
     }); 

linea che causa l'errore

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

HTML di rowTemplate

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

Grazie :)

+2

l'unico motivo che posso vedere è che jQuery non è in grado di trovare l'elemento con id 'rowTemplate' ... è possibile accedere alla valore di '$ (" # rowTemplate "). length' e vedere cosa viene restituito –

+0

@ArunPJohny restituisce 0 –

+0

questa è la ragione ... non ci sono elementi con id' rowTemplate' nella tua pagina –

risposta

21

Penso che jQuery non riesca a trovare l'elemento.

Prima di tutto trovare l'elemento

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

o

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

o

var rowTemplate = $('#rowTemplate'); 

quindi provare il codice di nuovo

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

Si prega di provare con il frammento di codice qui sotto.

<!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> 

Ho implementato la stessa cosa con modalità diverse.

1

Potrebbe essere a causa della proprietà pageable -> pageSizes: true.

Rimuovere questo e ricontrollare.

0

Nel mio caso, stavo usando una vista che ho convertito in vista parziale e ho dimenticato di rimuovere il modello da "script @section". Rimozione del blocco di sezione, risolto il mio problema. Questo perché le sezioni non vengono renderizzate in viste parziali.

0

E 'importante definire un id nel modello

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

Please only english, do non aggiungere la traduzione per altre lingue. –