标签: kendo-grid

如何虚拟地加载剑道网格？

假设我有 10,000 条记录，并且我只想在页面加载时显示 30 条记录，那么当用户向下滚动时如何延迟加载额外的 30 条记录块？就像 Facebook 墙一样。

我已经在我的 WebApp 中实现了 KendoUI，有什么方法可以使网格响应吗？就像，在较小的分辨率上显示更少的列！

我正在尝试为网格上的列实现自定义编辑器。该编辑器使用 DropdownList 控件。

我能够在添加/编辑时显示下拉列表，但是在做出选择并发布发送的 json 后，包含默认值，而不是所选值。

我的实现如下，它是 Razor 页面的摘录。

你能帮我弄清楚我在这里做错了什么吗？

<div id="divGrid"></div>

<script>
    $(document).ready(function () {
        var dsGroupForm = new kendo.data.DataSource({
            transport: {
                read: {
                    url: '@Url.Action("GroupForm_Read", "Settings")',
                    dataType: "json"
                },
                update: {
                    url: '@Url.Action("GroupForm_Update", "Settings")',
                    dataType: "json"
                },
                destroy: {
                    url: '@Url.Action("GroupForm_Destroy", "Settings")',
                    dataType: "json"
                },
                create: {
                    url: '@Url.Action("GroupForm_Create", "Settings")',
                                    dataType: "json"
                }
             },
            batch: false,
            pageSize: 5,
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "GroupFormId",
                    fields: {
                        GroupFormId: { editable: false, nullable: false …

我正在使用 kendo UI MVC4 助手。我已经为每列设置了固定宽度，但是加载数据时数据和标题未对齐。然后，当调整任何列的大小时，所有列都将正确对齐（没有问题）。请让我知道加载内容时要签署的任何解决方案。我也使用分组。

请检查屏幕截图。

加载数据后

调整任何列的大小后

请检查我的 html 帮助器部分。

.....
.Columns(columns =>
                 {
                     columns.Bound(p => p.EvaluationDT_ID).Hidden(true);
                     columns.Bound(p => p.ItemID).Hidden(true);
                     columns.Bound(p => p.ItemName).Width("160px").HtmlAttributes(new { title = "#= ItemName #" }).Sortable(true);
                     columns.Bound(p => p.Itemcode).Width("80px");
                     columns.Bound(p => p.Brand).Width("90px").HtmlAttributes(new { title = "#= Brand #" });
                     columns.Bound(p => p.Weight).Width("50px").HtmlAttributes(new { style = "text-align: right" }).HeaderHtmlAttributes(new { style = "text-align:left;" });
                     columns.Bound(p => p.UOMCode).Width("50px");
                     columns.Bound(p => p.PackagingName).Width("50px");
......

我有一个用 Angular 2 制作的 Kendo UI 网格。它是 crud 应用程序的一部分，我有一个删除按钮。删除后我希望网格自动刷新。

这是显示事件通知的网格：

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

        <kendo-grid-command-column title="" width="200">
            <template >
                <button (click)="EditModal.open()" kendoGridEditCommand  kendoButton  [icon]="'pencil'">Edit</button>
                <button (click) = deleteEventNotification(dataItem.id) kendoGridRemoveCommand kendoButton [primary]="true"  [icon]="'trash'">Remove</button>


            </template>
        </kendo-grid-command-column>

        </kendo-grid>

这是我从字面上删除记录的删除代码：

this._http.delete(this.link + notificationId,

            {
                headers: new Headers({
                    'Content-Type': 'application/json'
                })
            })
            .map(res => res.json()).subscribe();

在此之后，我再次创建了一个 http.get 来获取事件通知，但它不会自动更新网格，我必须刷新页面。

你知道我怎样才能刷新网格吗？

谢谢！

我一直在尝试将语言动态合并到 Kendo 控件中，但遇到了中文翻译的问题，这些翻译在 Sql Server 数据库中存储为 Unicode 列表。

存储在数据库中的翻译

通过使用 columntemplate属性，很快就启动并运行 Kendo Grid 以显示这些 Unicode 中文：

template: '#= Translation #'

剑道网格显示翻译

我遇到的问题是 Excel/PDF 导出。它们不呈现 Unicode 值，与 Kendo Grid 通过使用template. 相反，它们显示默认字体字符：

PDF 导出

CSV 导出

在对该问题进行研究后，我尝试了以下解决方案，但无济于事：

• 按照此建议设置网格控件的字体系列；（为了与网站的其余部分保持一致，我并不特别想这样做，也不明白为什么这会起作用，因为实际的 Kendo Grid 本身可以完美地显示汉字）：

  .k-widget {
      font-family: 'Arial Unicode MS';
  }
  

  Run Code Online (Sandbox Code Playgroud)

• 将列encoded属性设置为 true：

  { field: "AnalyteName", title: "Analyte", attributes: { "class": "customKendoGridCell"}, width: "25%", encoded: true, template: '#= TranslationField #' },
  

  Run Code Online (Sandbox Code Playgroud)

• 使用kendo.template：

  如果要在模板中呈现编码的 HTML 值，Kendo …

我有一个 KendoGrid，它有一列像：

{
      title: "Column1",
      template: <a href="javascript:customJsFunction(#= data #)">click here</a>',
},

..首先这个代码不起作用。我试图将整个“数据”（当前行的数据）传递给一个 javascript 函数。提前致谢。

当我单击剑道网格编辑弹出表单的更新按钮时，我需要要求确认（确认对话框）。问题是使用 ODATA，我指定kendoGridConfiguration.dataSource.transport.options.update.url，并且我不能引入任何异步逻辑作为确认消息。你能帮助我吗？

如果我想使用 odata 确认从网格中删除元素，也会发生同样的情况。

谢谢！

我将多重过滤器应用于剑道网格，我的应用程序是在 angular 5 中开发的，这里的问题是，当从输入框中删除最后一个字符时，时间事件没有触发。如何解决这个问题。

例如，如果我在输入框 'alen' 中输入一些东西，dataStateChange 函数每次都会，同样的事情在删除 'alen' 最后三个之后删除那个时间函数将但第一个字符删除或删除它不会调用（dataStateChangefunction）。请帮助我任何一个。

html

<kendo-grid
          [data]="gridData"
          [sortable]="{ mode: 'multiple' }"
          [sort]="sort"
          [filterable]="true"
          (dataStateChange)="dataStateChange($event)"
          [height]="500" 
        >
        <kendo-grid-column field="ProductID" title="Product ID" width="120">
        </kendo-grid-column>
        <kendo-grid-column field="ProductName" title="Product Name">
        </kendo-grid-column>
        <kendo-grid-column field="UnitPrice" title="Unit Price" width="230">
        </kendo-grid-column>
      </kendo-grid>
</kendo-grid>
  `
})
export class AppComponent {
    private filter: string;
    private sort: SortDescriptor[] = [];
    private gridView: GridDataResult;
    private products: any[] = [
      {
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000,
        "Discontinued": false
    },
       {
        "ProductID": 3,
        "ProductName": "Chai",
        "UnitPrice": 122.0000, …

我有一个带有自定义弹出编辑器的 mvc 网格，我想在其中显示日期时间。使用这种类型的绑定时如何格式化日期？

<span type="date" data-format="MM/dd/yyyy" data-bind="text: CreatedOn"></span>

但仍然显示为： Thu Jun 18 2020 12:43:48 GMT-0500 (Central Daylight Time)