KendoGrid内部引导

Question

我是bootstrap的新手，我们所有的用户界面大部分都是KendoGrid's。

我们想将KendoGrid嵌入引导程序的Modal Window之内，并试着在Kendo Grid in Bootstrap 2 or 3 Modal - IE Filters do not work中发布的代码下面。但在这里，close按钮和header不在Modal窗口中，看起来很奇怪。我认为这是因为bootstrap css版本。当试用bootstrap_2.3.2.min.css时，解决了这个问题。但我们应该使用v3.2.0。请让我知道是否有任何解决方案。

http://jsbin.com/yiyon

<div class='modal fade' id='myModal'> 
    <div class='modal-header'> 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
     <h3><strong>$heading</strong></h3> 
    </div> 
    <div class='modal-body'> 
     <div id="grid"></div> 
    </div> 
</div> 

<script> 
    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 
      } 
     }); 
    } 

</script> 

Answer 1

事实上，你已经忘记了嵌入有两个divs内容：

<div class='modal fade' id='myModal'> 
    <div class='modal-dialog'> <!-- First div for setting the dialog --> 
    <div class='modal-content'> <!-- Second div for setting the content --> 
     <div class='modal-header'> 
     <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>&times;</button> 
     <h3><strong>$heading</strong></h3> 
     </div> 
     <div class='modal-body'> 
     <div id="grid"></div> 
     </div> 
    </div> 
    </div> 
</div> 

我已经更新您的jsbin：http://jsbin.com/hujomaxituqo/1/