在 Angular 5 应用程序中使用 Kendo UI Grid 中的标题模板进行排序

Question

我有一个带有 Kendo UI 库的 Angular 5 应用程序。在这一个中，我有一个带有一些标题单元格的排序和模板的网格。

排序有效，但如果我使用模板（内部有跨度）作为标题单元格，则只需单击跨度旁边的排序即可。

这是我的 html 代码：

<kendo-grid
  #grid
  [kendoGridBinding]="getDataService().listOfSolution"
  [resizable]="false"
  [pageSize]="10"
  [pageable]="true"
  [sortable]="true"
  [filterable]="false"
  [groupable]="false"
  [reorderable]="false"
  [selectable]="false"
  [scrollable]="'none'"
  [rowClass]="rowCallback()"
  (detailCollapse)="onCollapse($event)"
  (detailExpand)="onExpand($event)"
  (sortChange)="onSort($event)"
  style="border: none;">
  <kendo-grid-column field="ThisOneWorks" title="ThisOneWorks"></kendo-grid-column>
  <kendo-grid-column-group title="Group" [locked]="false">
  <kendo-grid-column width="100px" field="pod.date" title="DATE" filter="date" [sortable]="true" [style]="{'min-width':'100px'}">
  <ng-template kendoGridHeaderTemplate>
  <span style="border-left:1px solid #E1E1E2;padding-left: 10px;">
      DATE
    </span>
  </ng-template>
  <ng-template kendoGridCellTemplate let-dataItem>
      <span style="border-left:1px solid #E1E1E2;padding-left: 10px;">
        {{ dataItem.pod.date | date : "MM/dd/yyyy" }}
      </span>
    </ng-template>
</kendo-grid-column>
...
</kendo-grid>

因此，对于日期，排序只有在我们单击跨度旁边时才有效。

如何通过单击单元格中的任意位置以及跨度来对列进行排序？

Answer 1

我不得不求助于重新创建功能以获得所需的结果。我希望他们添加一个内置函数来执行此操作（或者如果他们有一个，我希望他们为它添加文档）。这是我所拥有的：

我有一个保存排序描述符的变量，称为 lineItemSort：

public lineItemSort: SortDescriptor[];

我把它挂在我的网格上：

<kendo-grid [sort]="lineItemSort" ...other params here>

我在点击标题模板时调用我自己的排序函数：

<ng-template kendoGridHeaderTemplate>
    <span (click)="lineItemManualSort('myFieldName')">My Field Name</span>
</ng-template>

最后，我创建了自己的函数：

public lineItemManualSort(fieldName: string) {
    if (!this.lineItemSort) {
        this.lineItemSort = [];
    }

    let currentSortDescriptor;
    for (let sortDesc of this.lineItemSort) {
        if (sortDesc.field.toLowerCase() == fieldName.toLowerCase()) {
            currentSortDescriptor = sortDesc;
        }
    }

    //If sort does not exist, then add sort ascending
    if (currentSortDescriptor == null) {
        currentSortDescriptor = { dir: 'asc', field: fieldName };
        this.lineItemSort.push(currentSortDescriptor);
    } else {
        //If sort exists and asc, change it to desc
        if (currentSortDescriptor.dir == "asc") {
            currentSortDescriptor.dir = "desc";
        } else {
            //If sort exists desc, then remove it
            //Remove the current sort descriptor for the field
            let index = this.lineItemSort.indexOf(currentSortDescriptor);
            this.lineItemSort.splice(index, 1);
        }
    }
}

此函数在排序描述符中查找当前字段并执行以下操作：

• 如果当前字段不存在排序描述符，则会创建一个以升序排列的描述符。
• 如果存在按升序排列的排序描述符，它会将顺序切换为降序。
• 如果存在降序排序描述符，则会删除该排序描述符。

这应该模仿网格的内置功能。我只在排序模式为单一的情况下对此进行了测试，但它应该适用于多个。如果您（或阅读本文的任何人）尝试使用多种排序模式，请发表评论并让我们知道它是否有效。我希望这会有所帮助！

Answer 2

问题

每the Kendo forums:

所描述的行为是由于排序时 启用，并且使用了标题模板，我们不处理点击 自动在作为模板一部分的元素上发生事件， 因为用户可能想要设置自己的处理程序和逻辑（例如 示例 - 在标题模板中包含一个按钮）。

这就是为什么标题模板元素的点击事件必须 由开发商处理。一般来说，启用排序后， 网格标题内容被包裹在一个锚标记 () 中。

那里描述的解决方案（适用于下面的代码）对我来说效果很好，因为我不想手动实现排序。

警告

请注意，尽管该解决方案的作者在论坛中说父锚标记通常包装了标题内容。它对我有用。不确定在哪种情况下不会。

解决方案

鉴于这大致是生成的 HTML 的样子：

<th>
    <a class="k-link"> <!-- presumably generated because sorting is enabled -->
        <span>Your Span</span>
        <span>Sorting Icon</span>
    </a>
</th>

在您的组件类中添加一个特殊的模板单击事件，该事件将向上遍历并单击锚标记。

public onTemplateClick(e) {
    e.target.parentNode.click()
}

在您的kendoGridHeaderTemplate 中调用点击事件如下：

<ng-template kendoGridHeaderTemplate>
    <span (click)="onTemplateClick($event)" style="border-left:1px solid #E1E1E2;padding-left: 10px;">DATE</span>
</ng-template>