title: KendoGrid inside bootstrap
body: <p>I'm new to <code>bootstrap</code> and all our UI is mostly with <code>KendoGrid's</code>. </p>
  
  <p>We wanted to embed KendoGrid inside <code>Modal Window</code> of bootstrap and tried below code which is posted in <a href="https://stackoverflow.com/questions/21714419/kendo-grid-in-bootstrap-2-or-3-modal-ie-filters-do-not-work">Kendo Grid in Bootstrap 2 or 3 Modal - IE Filters do not work</a>. But here, the <code>close</code> button and <code>header</code> is out of the Modal window and looks weird. I think it is because of bootstrap css version. When tried with <strong>bootstrap_2.3.2.min.css</strong>, this issue solved. But we are supposed to use <strong>v3.2.0</strong> . Please let me know if there is any solution to this. </p>
  
  <p><a href="http://jsbin.com/yiyon" rel="nofollow noreferrer">http://jsbin.com/yiyon</a></p>
  
  <pre><code>&lt;div class='modal fade' id='myModal'&gt;
      &lt;div class='modal-header'&gt;
          &lt;button type='button' class='close' data-dismiss='modal' aria-hidden='true'&gt;&amp;times;&lt;/button&gt;
          &lt;h3&gt;&lt;strong&gt;$heading&lt;/strong&gt;&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class='modal-body'&gt;
          &lt;div id="grid"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      var products = [{
          ProductID: 1,
          ProductName: "Chai",
          SupplierID: 1,
          CategoryID: 1,
          QuantityPerUnit: "10 boxes x 20 bags",
          UnitPrice: 18.0000,
          UnitsInStock: 39,
          UnitsOnOrder: 0,
          ReorderLevel: 10,
          Discontinued: false,
          Category: {
              CategoryID: 1,
              CategoryName: "Beverages",
              Description: "Soft drinks, coffees, teas, beers, and ales"
          },
          popupPermission: true,
          somethingElsePermission: false
      }, {
          ProductID: 2,
          ProductName: "Chang",
          SupplierID: 1,
          CategoryID: 1,
          QuantityPerUnit: "24 - 12 oz bottles",
          UnitPrice: 19.0000,
          UnitsInStock: 17,
          UnitsOnOrder: 40,
          ReorderLevel: 25,
          Discontinued: false,
          Category: {
              CategoryID: 1,
              CategoryName: "Beverages",
              Description: "Soft drinks, coffees, teas, beers, and ales"
          },
          popupPermission: true,
          somethingElsePermission: true
      }
      ];
  
      columnsettings = [
              "ProductName",
              {
                  field: "UnitPrice",
                  title: "Unit Price",
                  format: "{0:c}",
                  width: "130px"
              },
              {
                  field: "UnitsInStock",
                  title: "Units In Stock",
                  width: "130px"
              },
              {
                  field: "Discontinued",
                  width: "130px"
              }
      ];
  
      var gridDataSource = new kendo.data.DataSource({
          data: products,
          schema: {
              model: {
                  id: "uid",
                  fields: {
                      ProductName: { type: "string" },
                      UnitPrice: { type: "number" },
                      UnitsInStock: { type: "number" },
                      Discontinued: { type: "boolean" }
                  }
              }
          },
          sort: {
              field: "",
              dir: "desc"
          },
          pageSize: 50
      });
  
  
  
      $(document).on('click', '#openModal', function () {
          $('#myModal').modal('show');
          if (!$('#grid').data('kendoGrid')) {
              createGrid();
          }
      });
  
      function createGrid() {
          $('#grid').kendoGrid({
              dataSource: gridDataSource,
              scrollable: true,
              reorderable: true,
              resizable: true,
              pageable: {
                  refresh: true,
                  pageSizes: [50, 100, 200]
              },
  
              filterable: {
                  extra: false,
                  operators: {
                      string: {
                          contains: "Contains",
                          startswith: "Starts with"
                      },
                      number: {
                          lt: "Is less than",
                          eq: "Is equal to",
                          gt: "Is greater than"
                      },
                      date: {
                          lt: "Is less than",
                          eq: "Is equal to",
                          gt: "Is greater than"
                      }
                  }
              },
              sortable: {
                  mode: "single",
                  allowUnsort: false
              }
          });
      }
  
  &lt;/script&gt;
  </code></pre>