标签: kendo-ui-angular2

有没有办法捕获网格的dataBound事件,类似于我们在jndo版本的Kendo UI中所拥有的事件.我需要在数据加载到网格后执行操作.

有一个dataStateChange事件,但在初始加载期间不会触发此事件.

目前,我正在使用超时功能来延迟执行,但这不是一个永久可靠的解决方案.

谢谢.

我试图在 Kendo 柱形图上为每个项目获取多个标签所需的布局如下所示

我只能得到这个布局

import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';

export type TrendItem = {
  clientName: string;
  periodName: string;
  income: number;
};

@Component({
  selector: 'my-app',
  template: `
        <kendo-chart>
          <kendo-chart-category-axis>
              <kendo-chart-category-axis-item [categories]="categories">
              </kendo-chart-category-axis-item>
          </kendo-chart-category-axis>

          <kendo-chart-value-axis>
              <kendo-chart-value-axis-item [labels]="valueAxisLabels">
              </kendo-chart-value-axis-item>
          </kendo-chart-value-axis>

          <kendo-chart-series>
            <kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
              <kendo-chart-series-item-labels [content]="labelVisual">
              </kendo-chart-series-item-labels>
           </kendo-chart-series-item>
          </kendo-chart-series>
        </kendo-chart>
    `,
})
export class AppComponent {
  public valueAxisLabels: ValueAxisLabels = {
    font: 'bold 16px …

我正在尝试将excel导出功能添加到Kendo UI angular 2网格,但在角度2应用加载时出错:

Can't bind to 'toolbar' since it isn't a known property of 'kendo-grid'.

这是我正在使用的代码片段:

<kendo-grid [data]="gridView" [height]="700" [pageSize]="pageSize"
                        [toolbar]="['excel']" 
                        [excel]="{fileName: 'Reprocessingdetails.xlsx'}"
                        [skip]="skip"
                          [pageable]="{
                            info: true,
                            type: 'input',
                            pageSizes: false,
                            previousNext: true
                          }"
                          [scrollable]="'none'"
                          (pageChange)="pageChange($event)"
                          [sortable]="{ mode: 'single', allowUnsort: true }"
                          [sort]="sort"
                          (sortChange)="reprocessingResultsSortChange($event)"
                        >
                <kendo-grid-column field="isSelected" title="Select">
                    <template kendoCellTemplate let-dataItem>
                        <input type="checkbox" [(ngModel)]="dataItem.isSelected" />
                    </template>
                </kendo-grid-column>
                <kendo-grid-column field="reprocessingType" title="Reprocessing Type">
                </kendo-grid-column>


            </kendo-grid>

路线图中没有提到Excel导出功能,因此假设它已经存在是公平的吗？如果是这样,我如何使上述代码段工作？任何帮助？

我使用这个http://www.telerik.com/kendo-angular-ui/components/grid/data-binding/教程使用带有Angular 2的Kendo Grid,但我没有在网格中找到过滤.如何使用Angular 2过滤我的Kendo Grid？

如何显示Kendo UI Angular 2网格列名称的工具提示？我尝试过使用html title属性,但它与kendo-grid-column title属性冲突.

我在Silverlight中使用Telerik的RadDocking控件. http://docs.telerik.com/devtools/silverlight/controls/raddocking/overview2

我已经搜索了Angular2的一些对接布局控件但是没有遇到任何类似于我上面提到的东西的东西.

我能遇到的最接近的是angular2-grid. https://www.npmjs.com/package/angular2-grid

我希望剑道能够在Angular2的最新版本中提出这样的控制.它似乎也不在他们的路线图中.

甚至angular/material2也没有开始布局控制. https://github.com/angular/material2

如果有人能指出我一个良好的对接布局控制,那将是非常有帮助的.

谢谢

在Angular 2的Kendo UI(beta)中,如何在选择特定行时触发事件？行本身没有指令或组件; 因此,如果没有行元素,则(click)="triggeredFunction()"无效.

这是我的网格:

<kendo-grid [data]="gridData" [selectable]="true">

  <kendo-grid-column field="ProductName">
    <template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
     {{column.field}}({{columnIndex}})
    </template>
  </kendo-grid-column>     

  <kendo-grid-column field="ProductName">
    <template kendoCellTemplate let-dataItem>
      <kendo-dropdownlist [data]="listItems"></kendo-dropdownlist>
    </template>
  </kendo-grid-column>

</kendo-grid>

这是我的组件:

@Component({
 selector: "ultron",
 styleUrls: [String("./ultron.component.less")],
 templateUrl: "./ultron.component.html",
 })
 export class UltronComponent {

   private gridData: any[] = [{
      "ProductID": 1,
      "ProductName": "Chai",
      "UnitPrice": 18.0000,
      "Discontinued": true,
    }, {
      "ProductID": 2,
      "ProductName": "Chang",
      "UnitPrice": 19.0000,
      "Discontinued": false,
    }
  }];

  private listItems: Array<string> = ["@", "$", "#", "%"];

  public triggeredFunction(){ ... }

}

我正在尝试在我的 Kendo Angular 2 网格中实现一列复选框。

我正在遵循文档中的示例（不带复选框）：http : //www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/#toc-custom-remote-directives

我已更改示例以添加列：http : //plnkr.co/edit/hNkj1ZFZJopDyFxn59B3?p=preview

这是我的组件：

@Component({
selector: 'my-app',
template: `
    <kendo-grid 
        productsBinding
        [pageSize]="10"
        [pageable]="true"
        [sortable]="true"
        [height]="270">
      <kendo-grid-column field="checked" title="" width="50" [headerStyle]="{'text-align': 'center'}" [style]="{'text-align': 'center'}">
        <ng-template kendoGridHeaderTemplate let-dataItem>
          <md-checkbox
              class="check-column"
              [checked]="allItemsChecked"
              color="primary"
              (change)="checkAllClicked($event)">
          </md-checkbox>
        </ng-template>
        <ng-template kendoGridCellTemplate let-dataItem>
          <md-checkbox
              class="check-column"
              [checked]="dataItem.checked"
              color="primary">
          </md-checkbox>
        </ng-template>
    </kendo-grid-column>
    <kendo-grid-column field="ProductID" width="80"></kendo-grid-column>
    <kendo-grid-column field="ProductName"></kendo-grid-column>
    <kendo-grid-column field="UnitPrice" width="80" format="{0:c}"></kendo-grid-column>
    <kendo-grid-column field="UnitsInStock" width="80"></kendo-grid-column>
   </kendo-grid>
`
})
export class AppComponent {

  public allItemsChecked: boolean = false;

  checkAllClicked($event){
    console.log("checkAllClicked",$event);
    //TODO: …

使用 Kendo ComboBox，我为来自 Web 服务的一些数据创建了一个选择器。HTML 代码如下所示：

<kendo-combobox #myPicker 
    [data]="myData" 
    [valueField]="'ID'"
    [textField]="'Number'" 
    [filterable]="true"
    [allowCustom]="false"
    (valueChange)="onChange($event)">
    <ng-template kendoComboBoxItemTemplate let-dataItem>
        {{dataItem.Number}} - {{dataItem.Subject}}
    </ng-template>
</kendo-combobox>

项目模板工作完美，它完全按照需要显示。我现在想做的是格式化所选值（文本字段本身中显示的值）。现在，它只选择 中提供的字段[textField]，在本例中为Number。

有什么方法可以格式化选定的值吗？我查了文档，好像没有这个模板。我还尝试使用该[value]属性并在那里设置自定义字符串，但这会破坏组合框，因为它需要一个对象。

我试图将单击事件绑定到kendo工具栏中的按钮。我正在使用模板创建按钮。我正在使用带有角的Kendo Jquery。任何帮助将不胜感激。

到目前为止，我已经使用Kendo Jquery文档尝试过此操作：

<!DOCTYPE html>
<html>

<head>
    <base href="https://demos.telerik.com/kendo-ui/toolbar/index">
    <style>
        html {
            font-size: 14px;
            font-family: Arial, Helvetica, sans-serif;
        }
    </style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" />

    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>

</head>

<body>
    <div id="example">
        <div class="demo-section k-content wide">
            <div id="toolbar"></div>
        </div>
        <script>
            $(document).ready(function () {
                $("#toolbar").kendoToolBar({
                    items: [
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-save'></span>Save</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon  k-i-arrows-swap'></span>Top/Bottom</a>"
                        },
                        {
                            template: "<a href='' class='k-icon-text-button k-button k-button-icontext k-toolbar-first-visible'><span class='k-icon k-i-pencil'></span>Edit</a>" …