Kendo-grid-column Angular 内的 kendoTextBox

Question

我正在尝试在 KendoGrid 中显示 kendoTextBox/kendoTextArea。下面是标记 -

 <kendo-grid [data]="data">

    <kendo-grid-column field="test" title="test" width="150">
      <textarea kendoTextArea></textarea>

        </kendo-grid-column>

  </kendo-grid>

但是文本框不可见。有什么建议吗？

Answer 1

在kendo-grid-column中使用ng-template。在 ng-template 里面，可以声明 textbox

<kendo-grid [data]="data">
    <kendo-grid-column title="Input Box" [width]="150">
        <ng-template kendoGridCellTemplate let-dataItem>
            <textarea kendoTextArea></textarea>
        </ng-template>
    </kendo-grid-column>
</kendo-grid>

Answer 2

我想如果您想动态添加 kendo textarea，请参考：http://www.aisoftwarellc.com/blog/post/how-to-display-text-area-editor-in-kendo-grid/2042

让生活更轻松：

    function textAreaEditor(container, options) {
       $('<textarea class="k-textbox" name="' + options.field + '" 
       style="width:100%;height:100%;" />').appendTo(container);
      }

     //use above function in grid configuration
     columns: [
      { field: "description", width: "300px", editor: textAreaEditor }
      ]

Kendo-grid-column Angular 内的 kendoTextBox

kendoTextBox inside Kendo-grid-column Angular

grid

kendo-ui

angular