标签: kendo-grid

尝试将数据表绑定到Telerik Kendo Grid时,我收到以下错误:

指数超出范围.必须是非负数且小于集合的大小.

我已经关注了Telerik的示例项目,但在我的代码中,它似乎没有在'DataSource'的'Read'函数上失败:

.Read(read => read.Action("Read","Events"))

我有ActionResult Read()当前返回null,只是因为我想看看它是否甚至使它成为该函数.此外,我已经介入,数据表返回正确的列和列名称.

任何帮助表示赞赏.

Events.cshtml

@model System.Data.DataTable

@{
    ViewBag.Title = "Events";
    Layout = "~/Views/_mainLayout.cshtml";
}

<p>Events</p>

@(Html.Kendo().Grid(Model)
    .Name("GridStatic")
    .Columns(columns =>
    {
        columns.Bound("ID");
        columns.Bound("EntryType");
        columns.Bound("EventDate");
        columns.Bound("EventData");
        columns.Bound("Source");
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()       
        .Model(model =>
            {
                model.Field("ID", typeof(int));
                model.Field("EntryType", typeof(DateTime));
                model.Field("EventDate", typeof(string));
                model.Field("EventData", typeof(string));
                model.Field("Source", typeof(string));
            })
        .Read(read => read.Action("Read", "Events"))
    )
)

EventsController.cs

public class EventsController : Controller
{
    //
    // GET: /Events/

    public ActionResult Events(string sName)
    {
        EventReader ereader …

我想获取行项目值(名称,电子邮件,年龄),但我只使用下面的代码获得第一项.如何通过更改tr:eq(1)代码获取其他行文本或是否有任何其他方式来获取两个项值.

            $("#grid_").kendoDropTarget({
                drop: function (e) {                             

                  var data = grid.dataItem("tr:eq(1)");
                  // I only get first row but I need to dynamically get any row items.
                  alert(data.name);

                }
            });

我在ASP.Net MVC应用程序中使用Kendo网格.如果我有以下网格定义,

@(Html.Kendo().Grid(Model) //Bind the grid to ViewBag.Products
  .Name("grid")
  .Columns(columns =>
  {
      columns.Bound(p => p.FullName);
      columns.Bound(p => p.MyEnum)
  })
  .Groupable()
  .Pageable()
  .Sortable()
  .Scrollable(scr => scr.Height(600))
  .Filterable()
  )

其中一列是Enum.我的枚举定义是:

public enum MyEnum
{
    [Display(AutoGenerateField = false, Name = "My enum 1", Description = "My Enum 1")]
    EnumOne,
    [Display(Name = "My Enum 2")]
    EnumTwo
}

如何让每行显示"My Enum 1"或"My Enum 2"？

提前致谢!

我想在kendo网格上的过滤器中设置用户定义的搜索值.用户打开过滤器后,该值将被放入搜索框中.任何建议将不胜感激.

这是类似于设置Kendo UI Grid的默认过滤器的问题,除了我正在使用角度js并且我想要一个用户定义的字符串过滤器值:

这就是我构建网格的方式.我正在使用角度js来创建具有自定义属性的div.最值得注意的属性是sg-grid(剑道网格本身),sg-filterable(设置为true表示此网格应该是可过滤的)和sg-predefine-filter(也设置为true表示此网格的过滤器在打开时应该在搜索框中输入一个字符串) :

1. 标记

   <div sg-grid sg-data="api/grid/accounts"
    sg-columns="accountId,name,pricingFrequency,shortName,status"
    sg-filterable="true"
    sg-predefine-filter-value="true"                     
   </div>
   

   Run Code Online (Sandbox Code Playgroud)

2. 脚本(简化为演示)

   angular.module('sgComponents').directive('sgGrid', [         
      return {
         restrict: 'AE',
         scope: { filterable: @sgFilterable, predefineFilterValue: @sgPredefineFilterValue},
         template: '<div class="sg-grid">\
                       <div class="pager-bar">\
                          <div></div>\ // THE KENDO GRID
                       </div>\                                
                    </div>',
         link: function(scope, element, attrs) {
            buildGrid();
            function buildGrid() {
               var grid = element.find(':nth-child(2)'); // 2nd DIV IN THE TEMPLATE
               var gridOptions = buildGridOptions(scope, attrs, grid);
               grid.kendoGrid(gridOptions); // build the grid
             };
             /**
              Builds …

   Run Code Online (Sandbox Code Playgroud)

好吧,我真的没有更好的头衔,但这就是事情.我只需要改变我的剑道网格.这是它的图片.

这是代码.

@(Html.Kendo().Grid<TekstenViewModel.Tekst>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Template(@<text></text>).ClientTemplate("<input type='checkbox'/>").Width(10).Hidden(!Model.Administrator);

        columns.Bound(product => product.RESOURCE_SET_NAAM).ClientTemplate("#= RESOURCE_SET_NAAM#");

        columns.Bound(product => product.Naam).ClientTemplate("#= Naam#");

        columns.Bound(product => product.Waarde).ClientTemplate("<div id='editorDiv'><div class='input'>#=Waarde#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.Edit, htmlAttributes: new { onclick = "openPopupDemo('#: Waarde #', '#: ID #', 'Waarde')" }));

        columns.Bound(product => product.Opmerking).ClientTemplate("<div id='editorDiv'><div class='input'>#=Opmerking#</div><div class='editor'>" +
            Html.WebCore().LinkButton(type: ButtonType.Edit, htmlAttributes: new { onclick = "openPopupDemo('#: Opmerking #', '#: ID #', 'Opmerking')" }));

        columns.Template(@<text></text>).ClientTemplate("<div id='deleteDiv'><div class='delete'><a class=\"delete iconBtn\" onclick=\"deleteResourceItem(#: ID #, '#: Naam #')\"></a></div></div>").Width(10).Hidden(!Model.Administrator);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Events(events => events.Edit("onCellEdit").DataBinding("onDataBinding"))
    .Groupable() …

我正在尝试使用Kendo UI Grid的columns.headerTemplate功能来自定义列标题.您可以使用此功能,如下所示,并由我创建的此示例演示.通常在使用Kendo UI模板时,窗口小部件会将实体传递给模板函数,因此您可以使用各种属性来自定义要呈现的html.

调试Kendo UI网格代码我可以看到,在_headerCellText方法中,即使列对象在范围内,对模板函数的调用也会传入一个空对象而不是列.

text = kendo.template(template, settings)({});

在为每个列使用自定义列标题模板之前是否还有其他方法可以采用 - 或者更糟糕的是jQuery操作窗口小部件呈现DOM？

是否有充分理由偏离此用例框架中的通用模板模式？

// Example kendoGrid use of column.headerTemplate
var templateFunction = function(shouldBeColumn) {
    // shouldBeColumn is an empty object rather than the column object
    return "Useless object:" + kendo.stringify(shouldBeColumn);
  };

$("#grid").kendoGrid({
    dataSource: {
        data: products,
        pageSize: 20
    },
    height: 550,
    scrollable: true,
    columns: [
      { field: "ProductName", title: "Product Name" },
      { field: "UnitPrice", title: "Unit …

我在这里有一些代码,我试图根据数据项的值设置单元格的背景颜色:http://dojo.telerik.com/@solidus-flux/eHaMu

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.common.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.dataviz.default.min.css">
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1411/styles/kendo.mobile.all.min.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2014.3.1411/js/kendo.all.min.js"></script>
</head>
<body>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    attributes: function(e) {
      return {
        "class": "table-cell",
        style: e.name == "Jane Doe" ? "background-color: red" : "background-color: green"
      };
    }
    //attributes: {
      //"class": "table-cell",
      //style: "text-align: right; font-size: 14px"
    //}
  } ], …

我有关于Angular 4 + TypeScript + Kendo UI的应用程序.我还有一个包含用户表的页面.编辑用户后,我想按照我编辑的ID突出显示用户.

users: Observable<Array<User>>;
selectedId: number;    
gridView: GridDataResult;

ngOnInit() {
    this.users = this.route.params
        .switchMap((params: Params) => {
            this.selectedId = +params['id'];
            return this.adminService.getUsers();
        });
    });
}

我还在Kendo文档事件中找到了" index "和" selected "字段:

selectionChange(event: SelectionEvent): void {
    //?
}

我尝试以selectionChange编程ngOnInit方式调用方法:

this.selectionChange({ index: 1, selected: true });

但我不知道如何设置方法gridView体中的选定行selectionChange.

那么,我应该怎么做gridView才能选择行？或者可能有一种更简单的方法来按ID选择行.

我有需要,比如我需要找到父网格行复选框,如果检查父网格行复选框,那么我需要将所有子网格复选框设置为为该父网格行复选框为真,我已经这样做了... .

 <script type="text/javascript">
    $(document).ready(function () {
        $('#btnMove').click(function () {                                        
        var parentgrid = $('#GridParent').data('kendoGrid');  
        var childGrid = $('#GridParent').closest(".k-grid").data("kendoGrid");               
        var Count = $('#Gridparent').data("kendoGrid").dataSource.total();
        alert(Count);
      for (i = 0; i < Count; i++) 
     {
          var isChecked = parentgrid.tbody.find('tr:eq(' + i + ')').find('td').find('.chkbxq').is(':checked');
          alert(isChecked); // here i need to get the property of parent grid row checkbox and I am not getting this alert....                  
          if (isChecked == true)
          {
             var allchildgridchkboxes = childGrid.tbody.find('td').find('chkbx');
             alert(allchildgridchkboxes); // i am not getting this alert     
             // here …

我有一个Kendo UI Grid,如下所示.有记录时出现水平滚动条.但是当没有记录时它就不会出现.即使没有记录,如何使用滚动条.

格

     <div class="GridSearch">

     @(Html.Kendo().Grid<Topco.TopMapp.MVC.Models.TransactionHistoryModel>()
    .Name("TransactionHistroyGrid")
     .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.UserId);
            model.Field(p => p.Comment).Editable(true);
        })

        .PageSize(25)
        .ServerOperation(true)
        .Read(read => read
            .Action("TransactionHistorySearch_Read", "Home")
            .Data("additionalData")
            )
     )
    .Columns(columns =>
    {

        columns.Command(c => c.Custom("Edit").Click("editDetails")).HeaderTemplate("Action").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Command(c => { c.Custom("Save").Click("saveDetails"); c.Custom("Cancel").Click("cancelDetails"); }).Hidden();
        columns.Bound(p => p.UserId).Filterable(false).Title("UserID").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(90);
        columns.Bound(p => p.Status).Filterable(false).Title("Status").HeaderHtmlAttributes(new { style = "text-align: center;" }).Width(70);
        columns.Bound(p => p.Reviewed).HeaderHtmlAttributes(new { style = "text-align: center;" }).Template(@<text></text>).ClientTemplate("<input id='checkbox'  class='chkbx' type='checkbox' …