标签: kendo-grid

我正在使用带有弹出编辑功能的Kendo UI Grid.默认情况下,当用户在弹出编辑器中编辑某个字段并按下回车键时,数据将呈现给网格(在弹出编辑器后面)但弹出窗口仍然可见,并且在您单击"更新"之前不会触发保存事件'按钮.

我正在尝试更改该功能,以便当用户在编辑字段时命中输入时,它将触发"更新"按钮单击 - 这意味着它将数据呈现到网格,触发保存事件并关闭弹出编辑器.

我当前的尝试只是关闭弹出编辑器,但不会触发save事件并撤消对所选行的任何字段所做的更改.几乎像取消按钮被触发了.

options.edit = function (e) {
    $('.k-edit-field .k-input').on('keypress', function (e) {
        utils.onEnter(e, function () {
            $('.k-grid-update').trigger('click');
        });
    });
};

如何触发"更新"按钮单击,或至少模拟它的作用？

在我的项目中,网格和图表具有相同的数据源,但需要在页面加载中显示图表上的所有数据,并在按钮单击中显示网格数据.

但之前我们使用过共享数据源,因此可以轻松应用图表中的网格更改.现在对网格和图表使用单独的变量并应用"AutoBind=true"for图表,"AutoBind=false"两者都不起作用,并且网格更改必须应用于图表.

如何给出网格和图表的关系？

这是小提琴:

var sharedDataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
        model: {
            fields: {
            OrderDate: { type: "date" }
            }
        }
    } 
});
var DataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema   : {
        model: {
            fields: {
                OrderDate: { type: "date" }
            }
        }
    }   
});

我有一个两层分层网格,我从服务器端绑定到使用ajax.两个数据层的ajax读取工作正常但是我很难使用ClientTemplate基于条件逻辑来呈现我的列.

下面是服务器端绑定版本.我知道我必须使用ClientTemplate和表达式#=#才能产生相同的效果,但我遇到两个问题:

1. 如何增加每行的变量'i',以便我可以使用CheckBoxFor和html帮助方法？
2. 如何转换@以使用ClientTemplate表达式.请注意,条件逻辑使用视图模型的属性以及绑定元素(MyViewModel)的属性以及条件逻辑使用模型中的混合属性

将其转换为表达式将是最有帮助的.

var i = -1;

@(Html.Kendo().Grid<MyViewModel>()
  .Name("grid")
  .Columns(columns =>
  {
    columns.Bound(c => c.Selected).Title("")
      .Template(
        @<text>
          @{i++;}
          @if (Model.Permissions.HasInsertAccess && item.Status == Status.Created)
          {
            <input type="hidden" name="MyViewModels.Index" value="@i" />
            @Html.CheckBoxFor(m => m.MyViewModels[i].Selected)
          }
          </text>);

          columns.Bound(c => c.Id)
            .Template(@<text>@Html.HiddenFor(m => m.MyViewModels[i].Id)@item.Id</text>)

我有一个Kendo网格,我需要根据被删除的行中的数据自定义删除确认消息框.我有一个自定义的常规消息作为网格配置的一部分,如下所示.

 editable: {
     confirmation: "Are you sure that you want to delete this record?",
     mode: "popup",
     template: kendo.template($("#popup-editor").html())
}

我看过使用remove事件处理程序,但是在删除行之后会触发.

我有一个请求让我的KendoUI Grid开始排序一列,并从那里只允许列有排序的asc和排序的desc选项...意味着没有未排序的选项.我的意思是当第一次查看页面时,有一个图标显示其排序的asc ...如果单击列标题然后它进入排序的desc然后再次单击它将转到排序的asc.目前,默认的Kendo行为是第三次单击将网格置于未排序模式,没有排序图标.如果有帮助,我的代码如下:

$("#grid").kendoGrid({
    dataSource: {
      data: carList,
      schema: {
         model: {
            fields: {
               "Car": { type: "number" },
               "Miles": { type: "number" }
            }
         }
      },
      sort: { field: "Miles", dir: "asc" }
    },
    height: 338,
    scrollable: true,
    sortable: true,
    filterable: false,
    pageable: false,
    columns: [
      {
         field: "Car",
         width: 40,
         sortable: true,
         hidden: false
      },
      {
         field: "Miles",
         width: 60,
         sortable: true,
         hidden: false
      }
    ]
    });
};

有没有人知道是否有一种内置的方式来实现这种切换效果？如果没有,有关如何实现这一点的任何想法,而不必完全编写我自己的排序函数？任何想法都很棒,非常感谢!

我正在尝试访问行索引,如下所示:

var grid = $("#grid").data("kendoGrid");
alert(grid.select().index());

我在这个jsfiddle链接中添加了我的代码.这个代码在我的系统中工作,我不知道为什么 deleteRecord()没有在jsfiddle中调用方法,但这不是实际的问题.

在这里点击最后一行的取消按钮提醒消息时会将索引显示为8,但实际索引为4.每个按钮只给我错误的索引.

所以这是我的网格,我需要的是在呈现页面时隐藏它并在我单击搜索按钮时显示它.有任何想法吗？？

    @Html.WebCore().LinkButton(ButtonType.Zoeken, cssClass: "myZoekenButton") 


    @(Html.Kendo().Grid<AanvragenZoekenViewModel.ZoekResultaat>()
        .Name("Grid")
        .Columns(columns =>
        {
...
            columns.Bound(zoekResultaat => zoekResultaat.Opmerkingomschrijving).ClientTemplate("#= Opmerkingomschrijving#").Hidden(Model.DossierLijst);
        })
...
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Events(e => e.Error("onErrorhandling"))
            .Model(model =>
            {
            })
            .Read(read => read.Action(MVC.Dashboard.ActionNames.ReadItems, MVC.Dashboard.Name).Data("onReadAdditionalData"))
            .PageSize(500)
        )    
    )

解决方案在底部

我一直在努力通过Kendo.UI网格查看我的数据几天,猜测我无法理解如何做到这一点的基本概念,因为我是aspnet的新手以及所有这些东西.

Index.cshtml:

 @using Kendo.Mvc.UI
 @using System.Linq;


    @(Html.Kendo().Grid<CardsDemo.Models.CardsViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
    columns.Bound(p => p.Name).Title("Card ID").Width(130);
    columns.Bound(p => p.State).Title("State").Width(130);
    columns.Bound(p => p.ExpirationDate).Title("Expiration Date").Width(130);
})
.Pageable()
.Sortable()
.Scrollable(scr => scr.Height(430))
.Filterable()
.DataSource(dataSource => dataSource
    .Ajax()
    .PageSize(20)
    .ServerOperation(false)  
    .Read(read => read.Action("GetCards", "Home"))   
 ).Render()
)

HomeController.cs:

...
    [HttpGet]
        public ActionResult Index()
        {
            return View();
        }

    [HttpPost]
        public JsonResult GetCards([DataSourceRequest] DataSourceRequest request)
        {
            var cards = repository.GetAll();
            var cardsvm = new CardsViewModel(cards);
            return Json(cardsvm.GetCards.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
        }
...

项目构建没有错误,但网页说:

Server Error in '/' Application.

    Compilation …

我想auto increment在我的剑道网格中有一个专栏.此字段不是服务器端自动增量,因为我希望用户查看该值并能够更改它.

我目前的解决方案是向按钮添加一个click属性Create并循环遍历行以找到最高值并递增它.

但是如何在新创建的行中插入此值？Click事件发生在创建新行之前.

所以有两种可能的解决方案:

1. 将变量作为默认值并在我的JS代码中更新它.
2. 以某种方式访问​​新创建的行,并更新该值.

这是我的JS代码:

function createClick(id) {
    var grid = $("#" + id).data('kendoGrid');
    var highestRadif = 0;
    grid.tbody.find('>tr').each(function () {
        var dataItem = grid.dataItem(this);
        var radif = dataItem.SRadifReqR;
        highestRadif = highestRadif < radif ? radif : highestRadif;
    })
    alert(++highestRadif);
}

现在我有一个2行6列的剑道网格.我需要一些逻辑来突出特定的细胞,但我不知道如何引用细胞.我使用了这个例子,但我不知道要传递什么作为id.

myHub.client.highlightRow = function (id) {
    var data = $("#MyGrid").data("kendoGrid").dataSource.data();
    for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        if (dataItem.id == id) {
            //alert(dataItem.uid);
            $("#MyGrid").data("kendoGrid").tbody.find("tr[data-uid=" + dataItem.uid + "]").effect("highlight", { color: "#f35800" }, 3000);
        }
    }
};

这是我的网格示例.

function loadGaugeTable(siteId, dashboardId, endDate, planType) {
    var today = new Date();
    var metricTitle = "Metric, as of " + monthNames[today.getMonth()] + " " + today.getDate();
    var containerSize = $("#gaugeMetricTableContainer").width();
    var apiPath = "/" + getAppPath() + …