KendoGrid in bootstrap

Question

저는 처음으로 bootstrap입니다. 우리 UI는 모두 KendoGrid's입니다.

켄드 그리드를 부트 스트랩의 Modal Window 내에 넣고 싶습니다. Kendo Grid in Bootstrap 2 or 3 Modal - IE Filters do not work에 게시 된 코드를 사용해 보았습니다. 그러나 여기에서 close 버튼과 header은 모달 창을 벗어나 이상하게 보입니다. 나는 그것이 부트 스트랩 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와 내용을 포함 잊어 버린는 :