标签: kendo-ui-grid

我试图在此链接后在KendoUI网格中创建一个自定义工具栏:http://demos.telerik.com/kendo-ui/grid/toolbar-template 但遇到错误.

这就是我在我的代码中尝试做的事情:

<div id="example">
    <script type="text/x-kendo-template" id="template">
        <div class="toolbar">
            <label class="category-label" for="category">Show products by category:</label>
            <input type="search" id="category" style="width: 150px" />
        </div>
    </script>
    <div id="grid"></div>
    <script>
        $(document).ready(function () {
            var grid = $("#grid").kendoGrid({
                dataSource: {

                    transport: {
                        read: {
                            url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
                            type: "post",
                            dataType: "json"
                        }
                    },
                    schema: {
                        data: "Data",
                        total: function (response) {
                            return $(response.Data).length;
                        }
                    },
                    pageSize: 10
                },
                toolbar: kendo.template($("#template").html()),
                groupable: true,
                sortable: true,
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5
                }, …

这是我的功能 userNameEditor

function userNameEditor(container, options) {
  $('<input required data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoComboBox({
      dataTextField: "UserName",
      dataValueField: "UserId",
      filter: "contains",
      minLength: 3,
      //_readMethod: '../Warehouse/SearchUser',
      dataSource: new kendo.data.DataSource({
        transport: {
          contentType: "application/json; charset=utf-8",
          serverFiltering: true,
          read: {
            url: "../Warehouse/SearchUser",
            //data: { //?????????//
            //    q: function () {
            //        return $("#autoComplete").data("kendoAutoComplete").value();
            //    },
            //    maxRows: 10,
            //    username: "demo"
            //}
          },
        },
      }),
    })
}

我想捕获kendoComboBox 值 go 控制器并返回用户名包含值只是给我取值的方式请！！！！

这是我的网格列区域

grid._columns.push(grid.GridColumn('Id', null, '200px', null, null, null, null, null, null, null, …

我能够使用以下方法kendo-ui-recat-wrapper来获取分组的 Grid ：

let dataSource = {   
  data: data,   
  schema: {
    model: {
      id: 'id',
      expanded: true
    }   
  },   
  group: [
    {
      field: 'title', // GroupBy goes on this field
      dir: 'asc'
    }   ] }

然后我就可以把它传递给dataSource的道具Grid。

我更新为kendo-react-grid在ReactJs项目中使用似乎比jquery包装器更连贯。

但我没有找到如何获得相同的结果？没有提到组选项。即使在这里DataState（链接在这里）我也不知道如何使用它？！

编辑：该选项尚未准备好（Kendo ui React路线图）

我有kendo网格,里面有4列 [mac,level,timestamp,message].我需要将所有值存储timestamp在一个数组中的列下.我试过但是找不到任何方法在特定列中遍历.知道如何使用java脚本执行此操作吗？

我正在使用剑道角度网格来显示我的数据。但我需要RowNumber每一行都有一个。我进行了搜索，但没有找到任何解决方案。可以设置行数吗？

Kendo Angular Grid（文档）

这是我的代码：

@Component({
    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData" [height]="410">
            <kendo-grid-column field="ProductID" title="ID" width="40">
            </kendo-grid-column>
            <kendo-grid-column field="ProductName" title="Name" width="250">
            </kendo-grid-column>
            <kendo-grid-column field="Category.CategoryName" title="Category">
            </kendo-grid-column>
            <kendo-grid-column field="UnitPrice" title="Price" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="UnitsInStock" title="In stock" width="80">
            </kendo-grid-column>
            <kendo-grid-column field="Discontinued" title="Discontinued" width="120">
                <ng-template kendoGridCellTemplate let-dataItem>
                    <input type="checkbox" [checked]="dataItem.Discontinued" disabled/>
                </ng-template>
            </kendo-grid-column>
        </kendo-grid>
    `
})
export class AppComponent {
    public gridData: any[] = products;
}

如何将文本向右对齐

<kendo-grid-column> </kendo-grid-column>

因为两者

<kendo-grid-column field="margin" title="Margin" style="text-align: right;"> </kendo-grid-column>

和

<kendo-grid-column field="margin" title="Margin" text-align="right"> </kendo-grid-column>

不工作。请问有人可以帮忙吗？

我正在使用带有Kendo控件的Angular 5.2。在网格内部，我有一个带有click属性的按钮。我想将PID值作为参数传递给showwindow函数。

这是代码示例：-

 <kendo-grid [data]="gridView"
                (pageChange)="pageChange($event)"
                [selectable]="true"
                [kendoGridSelectBy]="mySelectionKey"
                [selectedKeys]="mySelection"
                style="width:1100px;">
        <kendo-grid-checkbox-column showSelectAll="true" width="50" media="(min-width: 10px)">
            <ng-template kendoGridHeaderTemplate let-dataItem>
                <input type="checkbox"
                       name="selectAll"
                       (change)="selectAllRows($event)"
                       [checked]="allRowsSelected" />
            </ng-template>
        </kendo-grid-checkbox-column>
        <kendo-grid-column field="PID" title="User ID" width="150" media="(min-width: 10px)">
        </kendo-grid-column>

        <kendo-grid-command-column title="View file" width="200" media="(min-width: 10px)">
            <ng-template kendoGridCellTemplate let-isNew="isNew">
                <button (click)="showwindow(pass the PID value here)">
                    <img src="../../../../../Images/view.png" />
                </button>
            </ng-template>
        </kendo-grid-command-column>
    </kendo-grid>

这是我要更改的按钮单击处理程序：

 <button (click)="showwindow(pass the PID value here)">
     <img src="../../../../../Images/view.png" />
  </button>

请提出解决方案。

我有一个KendoUI for JQuery网格，并且如下面的屏幕快照所示，所有分页图标都没有显示。

我添加了必要的样式表引用。

并且我确保样式表本身以及其中引用的.PNG文件在我的解决方案中。

运行解决方案时，我使用的是Google Chrome。

在这一点上，我对我做错了事感到茫然。如果有人知道，请帮助。

我正在使用带有 Razor Pages Web 应用程序的 ASP.NET Core MVC 套件的 Kendo UI，因此我尝试将处理程序技术用于网格的服务器操作。

@(Html.Kendo().Grid<CustomerViewModel>()
        .Name("CustomersGrid")
        .Columns(columns =>
        {
            columns.Bound(x => x.CustomerId).Title("Student ID");
            columns.Bound(x => x.CustomerName).Title("Name");
        })
        .Pageable()
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(true)
            .Read(read => read.Url("/Customers?handler=Read")))
         )

我查看了网络选项卡，它正在向http://localhost:5000/Customers?handler=Read发出正确的 POST但是我没有在断点处结束，我得到了一个状态代码 400。

在剃刀页面的 Action 方法后面的代码中，它被命名为 OnPostReadAsync

知道为什么这不起作用吗？除了 .Url 之外，还尝试在 DataSource 的 .Read 属性中使用 read.Action 和 read.Route。

这是带有 action 方法的类：

public class IndexModel : PageModel
{
    private readonly ICustomerRepository _customerRepository;
    private readonly IMapper _mapper;

    public IndexModel(ICustomerRepository customerRepository, IMapper mapper)
    {
        _customerRepository = …