title: Kendo UI DataSource with Spring MVC model attribute
body: <p>I have a Spring MVC application, but I am creating the View with Kendo UI. I need to populate a table with data from model.attribute and then add a change function to the table so it is called when selection changes.
  I can populate the table with data just fine, but when I select a row I get the following error:</p>
  
  <pre><code>Uncaught TypeError: Cannot call method 'bind' of undefined.
  </code></pre>
  
  <p>It is thrown when the code reaches this line:</p>
  
  <pre><code>$("#pTable").data("kendoGrid").bind("change", function() {
  </code></pre>
  
  <p>I call the Controller and add the attribute <code>passengers</code> to the model, <code>pTable</code> is the id of the table I want to use for data found in <code>passengers</code>.</p>
  
  <p>My jsp file:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%&gt;
  &lt;%@ include file="/include.jsp"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
  &lt;title&gt;Airline Database&lt;/title&gt;
  
  &lt;link href="../styles/kendo.common.min.css" rel="stylesheet"&gt;
  &lt;link href="../styles/kendo.default.min.css" rel="stylesheet"&gt;
  
  &lt;script src="../js/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="../js/jquery-migrate-1.2.1.js"&gt;&lt;/script&gt;
  &lt;script src="../js/kendo.all.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;kendo:splitter name="pHorSplit"&gt;
          &lt;div id="pShow"&gt;
          &lt;kendo:grid name="pTable" selectable="true" sortable="true" filterable="true" pageable="false"&gt;
              &lt;kendo:grid-columns&gt;
                  &lt;kendo:grid-column title="Passenger ID" field="passengerID"/&gt;
                      &lt;kendo:grid-column title="Name" field="name"/&gt; 
                      &lt;kendo:grid-column title="Passport" field="passport"/&gt; 
                      &lt;kendo:grid-column title="Email" field="email"/&gt; 
                  &lt;/kendo:grid-columns&gt;
              &lt;kendo:dataSource data="${passengers}"&gt;&lt;/kendo:dataSource&gt;
          &lt;/kendo:grid&gt;   
          &lt;/div&gt;
          &lt;div id="pControl"&gt;
              //...
          &lt;/div&gt;
      &lt;/kendo:splitter&gt;
      &lt;script type="text/javascript"&gt;
          $("#pTable").data("kendoGrid").bind("change", function() {
              //...
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also tried with defining the dataSource schema, but I got the same result.
  Can anyone tell me why the data is loaded into the table but undefined at any other occassion?</p>