title: Kendo Grid column with Kendo Menu template
body: <p>I have a kendo grid with the following columns:  </p>
  
  <pre class="lang-js prettyprint-override"><code>var columns = [
      {title: "row", template: "#= gridRowCounter++ #"},
      {field: "FName", title: "Name"},
      {field: "LName", title: "Family"},
      {title: "Actions", template: 
              '&lt;ul id="menu#=gridRowCounter-1#" &gt;'+  
                  '&lt;li&gt;Action&lt;ul&gt;'+  
                      '&lt;li&gt;&lt;span class="k-link" onclick="edit()"&gt;Edit&lt;/span&gt;&lt;/li&gt;'+  
                      '&lt;li&gt;&lt;span class="k-link" onclick="delete()"&gt;Delete&lt;/span&gt;&lt;/li&gt;'+  
                  '&lt;/ul&gt;&lt;/li&gt;'+  
              '&lt;/ul&gt;'}
      ];  
  </code></pre>
  
  <hr>
  
  <p>I generate and initialize the grid first:  </p>
  
  <pre class="lang-js prettyprint-override"><code>$("#grid").kendoGrid({
      dataSource : myDS,
      columns : columns,
      change: function() {
          var menus = $("ul[id*='menu']");
          for(var i = 0; i &lt; menus.length; i++){  
              $(menus[i]).kendoMenu({
                  direction: "right",
                  animation: { open: { effects: "slideIn:right" } }
              });
          }
      }
  });  
  </code></pre>
  
  <p>and then initialize the menus by selecting a row.<br>
  It works and the menus are made but the sub menus are opened under the grid bounds and not appear.<br>
  I want you help me get the menus top of all elements.<br>
  Thanks.</p>