title: Kendo UI Grid with custom resize event won't display detail template in Internet Explorer
body: <p>I have a Kendo UI Grid that displays n-child records, that I also have a custom resize function that keeps the grid sized for the browser window height.  If I remove that resizeListener, the child records display as appropriate.  If I have the resizeListener bound, the child records do not display.</p>
  
  <p>This issue is specific to Internet Explorer 8 (sorry, it's a company policy limitation).  The grid functions normally in Firefox.</p>
  
  <p>I have tried using <code>$(window).off("resize")</code> when I activate the child template, in the databound, and in really a variety of random places that I thought might possibly work - but nothing so far.</p>
  
  <p>I'm looking for a solution or a work-around for IE.</p>
  
  <p>Here is the function:</p>
  
  <pre><code>function resizeGrid() {
      var gridElement = $("#boxesgrid");
      var dataArea = gridElement.find(".k-grid-content");
      var newGridHeight = $(document).height() &gt; 850 ? 850 : $(document).height() * .75;
      var newDataAreaHeight = newGridHeight * .7;
  
      dataArea.height(newDataAreaHeight);
      gridElement.height(newGridHeight);
      gridElement.data("kendoGrid").refresh();
  }
  
  var resizeListener = function () {
      $(window).one("resize", function () {
          resizeGrid();
          setTimeout(resizeListener, 500);
      });
  };
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;div class="col-md-2"&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Line of Business&lt;/div&gt;
      &lt;div class="panel-body" id="lobnav"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Application&lt;/div&gt;
      &lt;div class="panel-body" id="lobapp"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading"&gt;Filter&lt;/div&gt;
      &lt;div class="panel-body" id="jobfilter"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="col-md-10"&gt;
      &lt;div id="boxesgrid"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the rest of the javascript/kendo code:</p>
  
  <pre><code>$(document).ready(function () {
      resizeListener();
      var isParent, appId, lobId, boxId;
      var apiUrl = '@ViewBag.ApiUrl';
  
      var lobDataSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: apiUrl + "Lob"
              }
          },
          schema: {
              model: {
                  id: "LobId",
                  hasChildren: "HasChildren"
              }
          }
      });
  
      var appsDataSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: apiUrl + "App"
              },
              parameterMap: function (data, action) {
                  if (action === "read") {
                      data.lobid = lobId;
                      data.parent = isParent;
                      return data;
                  } else {
                      return data;
                  }
              }
          }
      });
  
      var filterDataSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: apiUrl + "Theme"
              }
          },
          schema: {
              model: { id: "FilterId" }
          }
      });
  
      var boxesDataSource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: apiUrl + "Process"
              },
              parameterMap: function (data) {
                  data.appid = appId;
                  data.parent = isParent;
                  data.lobid = lobId;
                  return kendo.stringify(data);
              }
          },
          schema: {
              data: "Data",
              total: "Total",
              model: { id: "JobId" }
          },
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
      });
  
      var lobnav = $("#lobnav").kendoTreeView({
          select: function (e) {
              var tree = this;
              var src = tree.dataItem(e.node);
              lobId = src.LobId;
              isParent = src.HasChildren;
          },
          change: function (e) {
              appsDataSource.read();
          },
          dataSource: {
              transport: {
                  read: {
                      url: apiUrl + "Lob"
                  }
              },
              schema: {
                  model: {
                      id: "LobId",
                      hasChildren: "HasChildren"
                  }
              }
          },
          loadOnDemand: false,
          dataTextField: "LobName"
      });
  
      var appnav = $("#lobapp").kendoListView({
          selectable: "single",
          autoBind: false,
          change: function () {
              var idx = this.select().index();
              var itm = this.dataSource.view()[idx];
              appId = itm.AppId;
              boxesDataSource.query({
                  page: 1,
                  pageSize: 35
              });
          },
          template: "&lt;div class='pointercursor'&gt;${AppName}&lt;/div&gt;",
          dataSource: appsDataSource
      });
  
      var jobsfilter = $("#jobfilter").kendoListView({
          selectable: "single",
          loadOnDemand: false,
          template: "&lt;div class='pointercursor' id=${FilterId}&gt;${FilterName}&lt;/div&gt;",
          dataSource: filterDataSource,
          dataBound: function () {
              var dsource = $("#jobfilter").data("kendoListView").dataSource;
              if (dsource.at(0).FilterName !== "All") {
                  dsource.insert(0, { FilterId: 0, FilterName: "All" });
              }
          },
          change: function () {
              var itm = this.select().index(), dataItem = this.dataSource.view()[itm];
              var appDs = appsDataSource.view(), apps = $("#lobapp").data("kendoListView"),
                  selected = $.map(apps.select(), function (item) {
                      return appDs[$(item).index()].AppName;
                  });
              if (selected.length &gt; 0) {
                  if (dataItem.FilterId !== 0) {
                      var $filter = new Array();
                      $filter.push({ field: "JobStatusId", operator: "eq", value: dataItem.FilterId });
                      jgrid.dataSource.filter($filter);
                  } else {
                      jgrid.dataSource.filter({});
                  }
              }
          }
      });
  
      var jgrid = $("#boxesgrid").kendoGrid({
          columns: [
              {
                  field: "AppName",
                  title: "App"
              },
              {
                  field: "JobId",
                  title: "Job Id"
              },
              {
                  field: "JobName",
                  title: "Job Name",
              },
              {
                  field: "JobStatus",
                  title: "Status"
              },
              {
                  field: "JobStatusId",
                  title: "Status Code"
              },
              {
                  field: "HasChildren",
                  title: "Has Children"
              },
              {
                  field: "ChildrenCount",
                  title: "Child Jobs"
              }
          ],
          sortable: {
              mode: "single",
              allowUnsort: true
          },
          pageable: {
              pageSizes: [35],
              numeric: true,
              refresh: true,
              pageSize: 35
          },
          autoBind: false,
          scrollable: true,
          resizable: true,
          detailInit: detailInit,
          dataSource: boxesDataSource
      }).data("kendoGrid");
  
      function detailInit(e) {
          var eventData = e;
          $.ajax({
              url: apiUrl + "ProcessJobs",
              type: "POST",
              data: {BoxId: e.data.JobId, AppId: e.data.AppId}, 
              dataType: "json",
              success: function(data, status, xhr) {
                  initializeDetailGrid(eventData, data);
              }
          });
      };
  
      function initializeDetailGrid(e, result) {
          var moreChildren = result[0].HasChildren;
          var gridBaseOptions = {
              dataSource: result,
              scrollable: false,
              sortable: true,
              columns: [
                  {
                      field: "ParentJobId",
                      title: "Parent Job"
                  },
                  {
                      field: "JobId",
                      title: "Job Id"
                  },
                  {
                      field: "JobName",
                      title: "Job Name",
                  },
                  {
                      field: "JobStatus",
                      title: "Status"
                  },
                  {
                      field: "JobStatusId",
                      title: "Status Code"
                  },
                  {
                      field: "HasChildren",
                      title: "Has Children"
                  },
                  {
                      field: "ChildrenCount",
                      title: "Child Jobs"
                  }
              ]
          };
  
          var gridOptions = {};
          if (moreChildren) {
              gridOptions = $.extend({}, gridBaseOptions, { detailInit: detailInit });
          } else {
              gridOptions = gridBaseOptions;
          };
          $("&lt;div/&gt;").appendTo(e.detailCell).kendoGrid(gridOptions);
      };
  });
  </code></pre>