title: Why are the contents of my KendoUI ListView disappear when I click on them?
body: <p>I've followed the editing example from <a href="http://demos.kendoui.com/web/listview/editing.html" rel="nofollow">this</a> tutorial, and managed to achieve a similar behavior for my web page, but there's a problem which I don't understand why it happens. Every time I click on the Edit button or Delete button, the element on the List View associated to those buttons disappears from the list. This is my javascript function for displaying the List View:</p>
  
  <pre><code>function swapDiv(e) {
      selection = e.value;
      var url = '';
      switch (selection) { //check from which endpoint I will be loading the contents for the list view
          case 'Usuarios':
              url = "http://127.0.0.1:81/SismosService.svc/usuario/index";
              template = '#usuariosTemplate';
              break;
          case 'Regiones':
              url = "http://127.0.0.1:81/SismosService.svc/region/index";
              template = '#regionesTemplate';
              break;
          case 'Clusters':
              url = "http://127.0.0.1:81/SismosService.svc/cluster/index";
              template = '#clustersTemplate';
              break;
          case 'Dispositivos':
              url = "http://127.0.0.1:81/SismosService.svc/dispositivo/index";
              template = '#dispositivosTemplate';
              break;
          case 'Eventos':
              url = "http://127.0.0.1:81/SismosService.svc/evento/index";
              template = '#eventosTemplate';
              break;
      }
      $.ajax({ //make the ajax call to load the contents for the list view
          url: url,
          success: function (data) {
              var src = null;
              if (template == '#eventosTemplate')
              {
                  src = getEventosArray(data); //the controls displayed for this kind of data are different from the rest
              }
              else
              {
                  src = data.Response; 
              }
              var ds = new kendo.data.DataSource({
                  data: src
              });
              $('#listView').kendoListView({ //create the kendo ui list view
                  dataSource: ds,
                  template: kendo.template($(template).html())
              });
          },
          error: function (data) {
              console.log('Error: ' + JSON.stringify(data));
          }
      });
      //animate the div where the list view and other controls are displayed
      $('#selectionBar').animate({
          left : '189'
      }, 500);
      $('#dataBar').animate({
          left: '0'
      }, 500);
      $('#myMap').animate({
          left : '370'
      }, 500);
  }
  </code></pre>
  
  <p>The templates I defined for the List View are in <a href="http://pastebin.com/QafEmUgV" rel="nofollow">this</a> link. Finally this is my View:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;link href="&lt;%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%&gt;" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="&lt;%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%&gt;" rel="stylesheet" type="text/css" /&gt;
      &lt;script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="&lt;%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%&gt;"&gt;&lt;/script&gt;
      &lt;script src="&lt;%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%&gt;" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"&gt;&lt;/script&gt;
      &lt;script src="&lt;%: Url.Content("~/Scripts/index/templateLoader.js")%&gt;" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="&lt;%: Url.Content("~/Scripts/index/main.js")%&gt;" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;%-- here goes my templates but for space reasons and to provide a more clean reading I put the templates separately --%&gt;
  
  
  &lt;/head&gt;
  &lt;body onload="GetMap();"&gt;
      &lt;div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent; left: 10px; "&gt;
          &lt;div id="mainDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent; left: 10px; "&gt;
              &lt;div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:20"&gt;
                  &lt;button id="btnUsuarios" value="Usuarios" style="position: absolute;left: 10px; right: 10px; top: 10px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)"&gt;Usuarios&lt;/button&gt;&lt;br /&gt;
                  &lt;button id="btnRegiones" value="Regiones" style="position: absolute;left: 10px; right: 10px; top: 70px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)"&gt;Regiones&lt;/button&gt;&lt;br /&gt;
                  &lt;button id="btnClusters" value="Clusters" style="position: absolute;left: 10px; right: 10px; top: 130px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)"&gt;Clusters&lt;/button&gt;&lt;br /&gt;
                  &lt;button id="btnDispositivos" value="Dispositivos" style="position: absolute;left: 10px; right: 10px; top: 190px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)"&gt;Dispositivos&lt;/button&gt;&lt;br /&gt;
                  &lt;button id="btnEventos" value="Eventos" style="position: absolute;left: 10px; right: 10px; top: 250px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)"&gt;Eventos&lt;/button&gt;&lt;br /&gt;
              &lt;/div&gt;
              &lt;div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9"&gt;
                  &lt;div class="k-toolbar k-grid-toolbar"&gt;
                      &lt;button class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"&gt;&lt;span class="k-icon k-add"&gt;&lt;/span&gt;Agregar&lt;/button&gt;
                  &lt;/div&gt;
                  &lt;div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" &gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8"&gt;
                  &lt;div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" &gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div id='myMap' style="border: thin solid black; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; "&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What's the reason for the contents of my List View to disappear? is it a behavior embedded in the Kendo UI List View control? How can I avoid this behavior?</p>
  
  <p>Thanks for any help.</p>