title: ag grid not loading in Internet Explorer with polymer 2.0
body: <p>We have created custom element for ag-grid with polymer 2.0. The component is loaded  as expected in chrome ,how ever it is not loaded in IE. If any one have a solution for this problem,please let us know.Please find below the code that i have tried:</p>
  
  <p>ag-grid.html
  Ag-grid component html file</p>
  
  <pre><code>   &lt;link rel="import" href="/bower_components/ag-grid-polymer/ag-grid-polymer.html"&gt;
      &lt;link rel="import" href="./parent-child-renderer.html"&gt;
      &lt;script src="/bower_components/webcomponentsjs/webcomponents-lite.js"&gt;&lt;/script&gt;
      &lt;!--&lt;link rel="stylesheet" href="./ag-grid.css"&gt;--&gt;
      &lt;dom-module id="simple-grid-example"&gt;
          &lt;template id="template"&gt;
  
              &lt;head&gt;
                  &lt;script src="/bower_components/ag-grid/dist/ag-grid.js"&gt;&lt;/script&gt;
                  &lt;link rel="stylesheet" href="/src/ag-grid/ag-grid.css"&gt;
                  &lt;link rel="stylesheet" href="/bower_components/ag-grid/dist/styles/ag-grid.css"&gt;
                  &lt;link rel="stylesheet" href="/bower_components/ag-grid/dist/styles/theme-fresh.css"&gt;
  
              &lt;/head&gt;
  
              &lt;div class="toolbar"&gt;
                  &lt;label id="search"&gt;Search:&lt;/label&gt;&lt;input type="text" id="quickFilter"&gt; &lt;button id="addrow"&gt;Add Row&lt;/button&gt;&lt;br&gt;
              &lt;/div&gt;
              &lt;ag-grid-polymer id="myGrid" style="height: 350px; width: 1000px;" class="ag-fresh ag-basic" row-height="22" on-grid-ready="[[onGridReady]]"&gt;&lt;/ag-grid-polymer&gt;
  
          &lt;/template&gt;
          &lt;script type="text/javascript" src="./ag-grid.js"&gt;
  
          &lt;/script&gt;
      &lt;/dom-module&gt;
  </code></pre>
  
  <p>ag-grid.css
  Style sheet for the custom element simple-grid-example.this will override the basic ag-grid style.</p>
  
  <pre><code> .ag-paging-page-summary-panel {
                      float: left!important;
                  }
  
                  .ag-fresh .ag-header {
                      color: #fff !important;
                      background: #00559b!important;
                  }
  
                  .ag-fresh .ag-menu-option-active {
                      background-color: #e3f6ff!important;
                  }
  
                  .ag-fresh .ag-menu {
                      background-color: #fff!important;
                      font-size: 13px!important;
                      box-shadow: 0px 4px 9px 1px #cecece!important;
                  }
  
                  .ag-fresh .ag-row-odd {
                      background-color: #e3f6ff!important;
                  }
  
                  .ag-fresh {
                      color: #2d2d2d!important;
                  }
  
                  .ag-fresh .ag-paging-button {
                      margin-left: 4px!important;
                      margin-right: 4px!important;
                      cursor: pointer!important;
                      background: #fff!important;
                      border: solid 1px #cecece!important;
                  }
  
                  .ag-fresh .ag-paging-button:hover {
                      background: #0076BE!important;
                      border: solid 1px #cecece!important;
                      color: #fff!important
                  }
  
                  span.ag-paging-page-summary-panel {
                      float: right!important;
                  }
  
                  .ag-fresh .ag-ltr .ag-cell-no-focus {
                      border-right: 0!important;
                  }
  
                  .ag-fresh .ag-header-icon {
                      color: #fff!important;;
                      stroke: none!important;;
                      fill: #fff!important;;
                  }
  
                  .toolbar {
                      background: #00559b;
                      color: white;
                      width: 1000px;
                      height: 30px;
                      padding-top: 10px;
                  }
  
                  #addrow {
                      margin-left: 32px;
                  }
  
                  #search {
                      padding-left: 10px
                  }
  </code></pre>
  
  <p>ag-grid.js</p>
  
  <pre><code>class SimpleGridExample extends Polymer.Element {
      static get is() {
          return "simple-grid-example";
      }
      static get properties() {
          return {
              columnDefs: {
                  type: Object
              },
              rowData: {
                  type: Object
              },
              filter: {
                  type: Boolean,
                  value: true
              },
              order: {
                  type: Array,
                  value: ['desc', 'asc', null]
              },
              gridOptions: {
                  type: Object
              },
              selectedRows: {
                  type: Array
              },
              masterColumnDefs: {
                  type: Array
              },
              detailColumnDefs: {
                  type: Array
              }
          }
      }
  
      constructor() {
          super();
          this.columnDefs = [
              { headerName: "Make", field: "make", width: 238, cellRenderer: 'group', cellRendererParams: { suppressCount: true } },
              { headerName: "Model", field: "model", width: 238 },
              { headerName: "Price", field: "price", width: 237 },
              { headerName: "Edit/Delete", field: "price", width: 187, cellRendererFramework: 'child-cell-renderer' },
              { headerName: "Athlete", field: "athlete", width: 100, checkboxSelection: true, headerCheckboxSelection: true, headerCheckboxSelectionFilteredOnly: true }
          ];
          this.rowData = [
              { make: "Toyota", model: "Celica", price: 35000 },
              { make: "Ford", model: "Mondeo", price: 32000 },
              { make: "Porsche", model: "Boxter", price: 72000 },
              { make: "TrailBlazer", model: "2000 ", price: 235465 },
              { make: "Trans Sport", model: " 2000", price: 235465 },
              { make: "Tredia", model: " 2000", price: 235465 },
              { make: "Tribute", model: " 2000", price: 235465 },
              { make: "Trooper", model: " 2000", price: 235465 },
              { make: "Tundra", model: " 2000", price: 235465 },
              { make: "Turbo", model: " 2000", price: 235465 },
              { make: "Turismo", model: " 2000", price: 235465 },
              { make: "Vanagon", model: " 2000", price: 235465 },
              { make: "Vandura", model: " 2000", price: 235465 },
              { make: "Vanquish", model: " 2000", price: 235465 },
              { make: "Vantage", model: " 2000", price: 235465 },
              { make: "VehiCROSS", model: " 2000", price: 235465 },
              { make: "Venture", model: " 2000", price: 235465 },
  
          ];
          this.gridOptions = {
              columnDefs: this.columnDefs,
              rowData: this.rowData,
              rowSelection: 'multiple',
              enableFilter: 'true',
              accentedSort: this.filter,
              sortingOrder: this.order,
              enableSorting: this.filter,
              groupSelectsChildren: 'true',
              pagination: true,
              paginationPageSize: 10,
              defaultColDef: {
                  editable: true
              },
  
          }
          this.detailColumnDefs = [
              { headerName: 'Call ID', field: 'callId', cellClass: 'call-record-cell' },
              { headerName: 'Direction', field: 'direction', cellClass: 'call-record-cell' },
              { headerName: 'Number', field: 'number', cellClass: 'call-record-cell' },
              { headerName: 'Duration', field: 'duration', cellClass: 'call-record-cell' },
              { headerName: 'Switch', field: 'switchCode', cellClass: 'call-record-cell' }
          ];
      }
      ready() {
          super.ready();
          this.$.myGrid.gridOptions = this.gridOptions;
          // this.addEventListener('click', e =&gt; this.onSelectionChanged(e));
  
          this.$.addrow.addEventListener('click', e =&gt; { this.onAddRow(e) });
          // this.$.myGrid.addEventListener('click', e =&gt; { this.onSelectionChanged(e) });
          this.$.quickFilter.addEventListener('keyup', e =&gt; { this.filtergrid(e) });
  
  
      }
      onAddRow(e) {
  
          let newItem = this.createNewRowData();
          var res = this.gridOptions.api.updateRowData({ add: newItem });
          this.printResult(res);
      }
      printResult(res) {
          console.log('---------------------------------------')
          if (res.add) {
              res.add.forEach(function (rowNode) {
                  console.log('Added Row Node', rowNode);
              });
          }
          if (res.remove) {
              res.remove.forEach(function (rowNode) {
                  console.log('Removed Row Node', rowNode);
              });
          }
          if (res.update) {
              res.update.forEach(function (rowNode) {
                  console.log('Updated Row Node', rowNode);
              });
          }
      }
      createNewRowData() {
  
          var newData = [{
              make: "Toyota " + newCount,
              model: "Celica " + newCount,
              price: 35000 + (newCount * 17),
              zombies: 'Headless',
              style: 'Little',
              clothes: 'Airbag'
          }];
          newCount++;
          return newData;
      }
  
      onGridReady(params) {
          console.log("Grid is now ready");
  
      }
      // onSelectionChanged(params) {
      //     console.log(event);
      //     this.selectedRows = this.gridOptions.api.getSelectedRows();
      //     console.log(this.selectedRows);
      // }
      filtergrid(event) {
          this.gridOptions.api.setQuickFilter(event.target.value);
      }
  
  
  }
  customElements.define(SimpleGridExample.is, SimpleGridExample);
  var newCount = 1;   
  </code></pre>
  
  <p>parent-child-renderer</p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/paper-dialog/paper-dialog.html"&gt;
  &lt;dom-module id="child-cell-renderer"&gt;
      &lt;template&gt;
          &lt;style&gt;
              #dialog{
                  width: 350;
                  height:250px;
              }
               .text {
                      padding-left: 25px;
                      display: inline-block;
                      margin-right: 10px;
                      width: 150px;
  
                  }
                  label {
                      width: 75px;
                      clear: left;
                      padding-right: 10px;
                      float: left
                  }
          &lt;/style&gt;
          &lt;span&gt;&lt;button style="height: 20px" on-click="invokeParentMethod" id="edit"&gt;Edit&lt;/button&gt;&lt;button style="height: 20px" on-click="invokeParentMethod"&gt;Delete&lt;/button&gt;&lt;/span&gt;
          &lt;paper-dialog id="dialog"&gt;
              &lt;label&gt;Make:&lt;/label&gt;&lt;input type="text" class="text" value=[[data.make]]&gt;&lt;br&gt;
              &lt;label&gt;Model:&lt;/label&gt;&lt;input type="text" class="text" value=[[data.model]]&gt;&lt;br&gt;
              &lt;label&gt;Price:&lt;/label&gt;&lt;input type="text" class="text" value=[[data.price]]&gt;&lt;br&gt;
              &lt;br&gt;
              &lt;button&gt;Save&lt;/button&gt;&lt;br&gt;
              &lt;button on-click="updateGrid" dialog-dismiss&gt;Cancel&lt;/button&gt;&lt;br&gt;
          &lt;/paper-dialog&gt;
      &lt;/template&gt;
  
      &lt;script&gt;
          class ParentChildCellRenderer extends Polymer.Element {
              static get is() {
                  return 'child-cell-renderer'
              }
              static get properties(){
                  return{
                      data:{
                      type:Array
                      }
                  }
              }
              agInit(params) {
                  this.params = params;
              }
  
              invokeParentMethod() {
                  this.params.context.componentParent.methodFromParent(`Row: ${this.params.node.rowIndex}, Col: ${this.params.colDef.headerName}`)
                  //  var selectedRows = this.params.gridOptions.api.getSelectedRows();
                  console.log(this.params.data.make);
                  this.data=this.params.data;
  
              }
              toggleDialog(e) {
                  this.$.dialog.toggle();
              }
              updateGrid(){
  
              }
              ready() {
                  super.ready();
                  this.$.edit.addEventListener('click', e =&gt; { this.toggleDialog(e) });
  
              }
          }
  
          customElements.define(ParentChildCellRenderer.is, ParentChildCellRenderer);
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>