剑道树列表行隐藏在窗口模态中

Question

我试图在引导程序窗口模式中使用kendo ui树列表，因此，我只得到显示的标题，但是body是hiden。当我在主页面中制作树列表时，evry的工作正常。 这是我的代码： 树列表选项：

_this.variablesTreeListOptions = {
                dataSource: {
                    transport: {
                        read: function (e) {
                            _this.$service.read("api/Variable/GetAll")
                                .then((result: any) => {
                                    dataArray = result.data;
                                    gridData = new kendo.data.ObservableArray([]);
                                    gridData.push.apply(gridData, dataArray);
                                    e.success(gridData);
                                }, (error: any): any => {
                                    alert("Error");
                                    e.error();
                                });
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        },
                        schema: {
                            model: {
                                id: "VariableId",
                                fields: {
                                    VariableId: { type: "number", editable: false, nullable: false },
                                    Code: { type: "string", editable: false, nullable: false },
                                    Libelle: { type: "string", editable: false, nullable: false },
                                    Valeur: { type: "number", editable: false, nullable: false },
                                    Expression: { type: "string", editable: false, nullable: false },
                                }
                            }, expanded: true
                        }
                    }
                },
                sortable: true,
                editable: true,
                columns: [
                    { field: "Code", title: "Code", width: "150px" },
                    { field: "Libelle", title: "Libelle", width: "150px" },
                ]
            }

这是我的html模式：

<!-- Modal -->
<div class="modal fade" id="myModal"  aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Générateur de formule</h4>
            </div>
            <div class="modal-body">
                   <div class="col-lg-6 col-md-6 col-sm-6">
                 <div class="x_panel custom-modal">
                     <div  kendo-tab-strip k-content-urls="[ null, null]">
                         <ul>
                             <li class="k-state-active"><h6>Variables</h6></li>
                             <li><h6>Rubriques</h6></li>
                             <li><h6>Formules</h6></li>
                         </ul>
                                <kendo-tree-list k-options="vm.variablesTreeListOptions">

                                </kendo-tree-list>
                         <div>
                             <div class="x_panel">

                             </div>
                         </div>
                         <div>
                             <div class="x_panel">

                             </div>
                         </div>
                     </div>
                 </div>
             </div>
                <div class="col-lg-6 col-md-6 col-sm-6">
                    <div class="x_panel">
                        <form>
                            <div class="form-group">
                                <label for="formule">Formule:</label>
                                <textarea id="formule" class="form-control"></textarea>
                            </div>
                        </form>
              </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fermer</button>
                <button type="button" class="btn btn-primary">Enregister</button>
            </div>
        </div>
    </div>
</div>