Question

我是angular 2和kendo UI的新手。
我正在尝试在弹出窗口中添加网格。
我能够显示弹出窗口。
但是当我添加网格时它没有显示。
你能告诉我如何解决它吗？
在控制台中，我也没有看到任何错误。
我正在尝试使用kendo ui显示弹出窗口。 http://demos.telerik.com/kendo-ui/grid/index
示例工作代码http://jsfiddle.net/XY7HT/53/
在下方提供相关代码，并在小提琴中填写完整代码，因为此处无法将其粘贴https://jsfiddle.net/9bwdk6xk/4/

    <div class="waterPaperDocInfo">                 
            <span class="fa fa-file-text-o"></span>
            <span class="cat" (click)="cloud();">&nbsp;{{hat.paper}} paper</span> | Last Modified: {{hat.finger}} &nbsp;&nbsp;<span class="fa fa-clock-o">9:00 am</span>
    </div>

    <div id="win1" style="display:none">
        <p>First Window</p>
        <button type="button" id="open2">Open second Window</button>
            <input type="file" name="batchFile" id="batchFile" title="Select file" />
        <div id="grid"></div>

    </div>


$("#grid").kendoGrid({
        selectable: "multiple cell",
        allowCopy: true,
        columns: [
            { field: "productName" },
            { field: "category" }
        ],
        dataSource: [
            { productName: "Tea", category: "Beverages" },
            { productName: "Coffee", category: "Beverages" },
            { productName: "Ham", category: "Food" },
            { productName: "Bread", category: "Food" }
        ]
    });

}

Answer 1

如果你使用带有angular2的kendo ui。检查kendo ui for angular 2 web以获取组件here
至于角度2你想要如何添加组件基本步骤（如果不可用，请检查system.cofig.js上的依赖性，先用npm下载它＆gt;在app / ng.module.ts中添加模块 - ＆gt;使用它在app.component.ts）
这是你在mvvm way-ish（angular2）check this中的方法，你使用的是jquery-ish方式。我不确定他们（剑道）是否希望你这样使用它，因为我不会在文档中看到他们这样使用它。
只是我的意见，不要发布你的所有代码（非常适合ppl阅读至少我很懒，不能阅读所有这些）

基本上在ng.module.ts上检查这一行我导入网格，按钮和对话框，将其添加到@NgModule

import { GridModule } from '@progress/kendo-angular-grid';
import { DialogModule } from '@progress/kendo-angular-dialog'
import { ButtonsModule } from '@progress/kendo-angular-buttons';

@NgModule({
  imports:      [ BrowserModule, BrowserAnimationsModule, GridModule, DialogModule, ButtonsModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

然后你可以像使用它一样：

<kendo-dialog title="Kendo Dialog">
     <kendo-grid [data]="gridData">
         //your code goes here
     </kendo-grid>
</kendo-dialog>

kendo网格没有显示在弹出窗口内

1 个答案: