标签: kendo-grid

Kendo UI Grid Ajax 破坏成功

我对 KENDO UI 真的很陌生,我也有点困惑,因为我正在使用 VB.Net 和 Kendo,翻译有点奇怪,所以说了这么多,让我们来回答这个问题。

我在 ASP.Net MVC 页面中使用 Kendo Grid,如下所示:

    @(Html.Kendo().Grid(Of Portal.ProductList).Name("Grid2") _
    .DataSource(Function(ds) ds.Ajax() _
    .Model(Sub(model) model.Id(Function(p) p.ItemID)) _
    .Read(Function(read) read.Action("GetAjaxItems", "ShoppingCartItems").Data("gridParms")) _
    .Destroy(Function(destroy) destroy.Action("DeleteAjaxItems", "ShoppingCartItems", New With {.ShoppingCartID = ViewData("ShoppingCartID")})) _
                                                ) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.ItemCodeOrdering).Title("Item")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Description)) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Quantity).Title("Quantity").ClientTemplate("<input type='text' style='width:40px;' id='QTY#= ItemID #' value='#= Quantity #' /> &nbsp;<input type='button' id='UPD#= ItemID#' value='Update' onclick='updateItemQty(this)' /> ")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Price).Title("Unit Price").ClientTemplate("<div id='price#=ItemID#'>$#=Price.toFixed(2)#</div>")) _
    .Columns(Function(modelItem) modelItem.Bound(Function(p) p.Quantity).Title("Total Price").ClientTemplate("<div id='total#=ItemID#'>$#= (Price * …
Run Code Online (Sandbox Code Playgroud)

asp.net-mvc kendo-ui kendo-grid

2
推荐指数
1
解决办法
3035
查看次数

Kendo grid editRow方法:抑制弹出窗口

我要为Kendo Grid创建一个自定义的"更新"按钮.

基本上,它以编程方式将适当的行放入编辑模式(使用editRow),将某些字段更新为特定值(使用model.set),然后保存行(使用saveRow).

它正在工作,但是一旦editRow调用该方法就会显示弹出编辑窗口,这会减慢进程并且看起来不太好.

有没有办法在以编程方式修改数据时抑制弹出窗口?这就是我正在做的事情(可能有另一种/更好的方法来做到这一点):

    columns: [
        ....
        { command: [{name: 'edit' }, {name: 'approval'}, {name: 'delrow'}] }
    ],
    dataBound: function() {

        grid.find('.k-grid-approval').click(function() {
            var row = $(this).parents('tr:first');
            var g = requisitions.data('kendoGrid');
            var data = g.dataItem(row[0]);
            var model = g.dataSource.getByUid(data.uid);
            g.editRow(row[0]);
            model.set('status', 'Pending');
            model.set('date_submitted', moment().toDate());
            g.saveRow();
        });
Run Code Online (Sandbox Code Playgroud)

我怀疑有更好的方法可以做到这一点,但我不知道它是什么.任何建议都非常感谢.

kendo-ui kendo-grid

2
推荐指数
1
解决办法
2036
查看次数

Kendo MVC 在 Update 调用上触发 Create 方法

我正在将 Kendo UI Grid 与 MVC 4 一起使用,它运行良好,只有一个例外。

如果我在网格中添加一行,然后更新一行,它最终会添加一行而不是更新它。

我能说的是,如果我按添加,程序会在我的 MVC 控制器中输入Create方法,如果我在添加的一行上按更新,我将再次进入Create方法。

但是,如果我在启动后直接按下网格中的更新按钮,情况似乎并非如此。我正在使用 Ajax 调用完成所有这些操作,因此它与在调用之间不更新的页面有关。如果我只执行一个命令然后刷新页面,一切都会很好。我也使用实体框架作为 ORM。

这是我的剃刀观点:

@model IEnumerable<Internal.License.Management.Web.UI.Models.PriceListViewModel>

@{
   ViewBag.Title = "Price List";
}

@(Html.Kendo().Grid<Internal.License.Management.Web.UI.Models.PriceListViewModel>()
.Name("grid")
.Columns(columns =>
    {
        columns.Bound(p => p.Name).Width(120);
        columns.Bound(p => p.Code).Width(180);
        columns.Bound(p => p.Interval).Width(180);
        columns.Bound(p => p.PricePerUnit).Width(200);
        columns.Bound(p => p.Currency).Width(120);
        columns.Command(commands =>
            {
                commands.Edit();
                commands.Destroy();
            }).Width(172);
    })
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource =>
    dataSource.Ajax()
    .PageSize(20)
    .Events(events => events.Error("error_handler")) …
Run Code Online (Sandbox Code Playgroud)

c# kendo-grid kendo-asp.net-mvc

2
推荐指数
1
解决办法
4451
查看次数

在 Kendo UI Grid 中对模板列进行排序

我很难找出如何对使用 Template 属性设置的网格中的列进行排序,如下所示:

    @(Html.Kendo().Grid(Model.UnitDetails)
      .Name("unitGrid")
      .DataSource(ds => ds
          .Ajax()
                  .Read(read => read.Action("Units_Read", "Fleet"))
          .AutoSync(true)
          .ServerOperation(true)
      )
      .Columns(columns =>
      {
          columns.Bound(p => p.ViewUnitContract.CurrentRun.Operation.WellContract.Location).Title("Well Site").Sortable(true);
          columns.Bound(p => p.ViewUnitContract.Name).Title("Unit Name").Width(200);
          columns.Template(p => { }).ClientTemplate(" ").Title("Well");
          columns.Template(p => { }).ClientTemplate(" ").Title("Run").Width(75);
          columns.Template(p => { }).ClientTemplate(" ").Title("Task").Width(365);
          columns.Template(p => { }).ClientTemplate(" ").Title("Activity").Width(200); ;
          columns.Template(p => { }).ClientTemplate(" ").Title("Depth (m)").Width(115);
          columns.Template(p => { }).ClientTemplate(" ").Title("Speed (m/min)").Width(90);
          columns.Template(p => { }).ClientTemplate(" ").Title("Weight (kg)").Width(90);
      })
      .ClientRowTemplate(Html.Partial("_ClientRowTemplate", Model).ToHtmlString())
      .Sortable())
Run Code Online (Sandbox Code Playgroud)

对前两列进行排序工作得很好,但是是否可以对与 ClientTemplates 绑定的那些进行排序?

kendo-ui kendo-grid kendo-asp.net-mvc

2
推荐指数
1
解决办法
5307
查看次数

Kendo Grid:如何添加颜色选择器

我有一个带编辑内联的剑道网格。现在,在一列中,我想添加一个剑道颜色选择器。当行未处于编辑模式时,如何添加它并显示所选颜色?

任何人都可以给我举个剑道网格中颜色选择器的例子吗?

谢谢

html javascript kendo-ui kendo-grid kendo-colorpicker

2
推荐指数
1
解决办法
3103
查看次数

Kendo Grid:使用选中的单选按钮从行中获取所有数据

我一直在寻找这方面的帮助,这应该是非常容易的,但我找不到我需要的东西.这是我的jsFiddle,它包含一个超级基本的Kendo网格.我只想在单击按钮时获取当前所选行的所有数据(使用一列单选按钮).

http://jsfiddle.net/HTXua/412/

我知道当选择一行时,它正在改变css类中的属性.因此,我试图检索的行将具有以下属性:

.detailGridRowSelector:checked
Run Code Online (Sandbox Code Playgroud)

我已经设法使用复选框(而不是单选按钮)实现第一行并计算检查了多少,但由于某种原因我无法访问数据!

var dataSource = {
data: [
    {
    "first": "Adam",
    "last": "Paul"},
    {
    "first": "Shannon",
    "last": "Harris"},
    {
    "first": "Frank",
    "last": "Rolinson"},
    ]
};

var columns = [
    {
        template:'<input type="radio" class="detailGridRowSelector" title="Select Lines" name="radioLineSelector" />', width: 20
        },
    {
field: "first",
title: "First Name",
width: "90px"},
{
field: "last",
title: "Last Name",
width: "90px"},
];

    $("#grid1").kendoGrid({
    dataSource: dataSource,
    columns: columns,
});

$("#getInfoButton").bind("click", function () {

    var lineData ="line data would be set here";
    //I know …
Run Code Online (Sandbox Code Playgroud)

radio kendo-ui kendo-grid

2
推荐指数
1
解决办法
7806
查看次数

Web API 2.2 OData V4 - Kendo Grid - 自定义创建的IHttpActionResult

我有一个Kendo UI Grid连接到odata CRUD服务(Web API 2.2 OData V4).dataSource配置如下所示 - baseUrl对所有人来说都是相同的,只是HTTP动词更改.

var dataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: {
            beforeSend: prepareRequest,
            url: baseUrl,
            type: "GET",
            dataType: "json"
        },
        update: {
            beforeSend: prepareRequest,
            url: function (data) {
                return baseUrl + "(" + data.CategoryId + ")";
            },
            type: "PUT",
            dataType: "json"
        },
        create: {
            beforeSend: prepareRequest,
            url: baseUrl,
            type: "POST",
            dataType: "json"
        },
        destroy: {
            beforeSend: prepareRequest,
            url: function (data) {
                return baseUrl + "(" + data.CategoryId + ")";
            }, …
Run Code Online (Sandbox Code Playgroud)

c# odata asp.net-web-api kendo-grid

2
推荐指数
1
解决办法
4410
查看次数

如何获得Kendo网格行选择

如何启用kendo ui网格行选择.我通过使用html帮助函数创建了一个kendo网格,通过javascript访问它并启用了行选择,但下面没有显示运气代码

@(Html.Kendo().Grid((IEnumerable<Gridkendo.Models.Model>)Model)
  .Name("grid")
  .Columns(columns =>
  {
      // Create a column bound to the ProductID property
      columns.Bound(product => product.Name);
      // Create a column bound to the ProductName property
      columns.Bound(product => product.Description);
Run Code Online (Sandbox Code Playgroud)

并在JavaScript中访问它

<script>
    $(function () {
        // Notice that the Name() of the grid is used to get its client-side instance
        var grid = $("#grid").data("kendoGrid");
        var selectedItem = grid.dataItem(grid.select());
        alert(selectedItem.ShipName);
    });
</script>
Run Code Online (Sandbox Code Playgroud)

asp.net-mvc jquery kendo-ui kendo-grid

2
推荐指数
1
解决办法
2万
查看次数

在jQuery.js文件中,Kendo Grid导出为ex​​cel"无法读取未定义的属性'长度"时出错

我正在尝试将kendo网格导出为ex​​cel,然后我在控制台中出错.如果有人知道,请帮帮我.谢谢你提前.

angular.js:13920 TypeError: Cannot read property 'length' of undefined
    at Function.map (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:461:18)
    at init.toDataURL (http://lm.stage.cargoclix.net/bower_components/kendo-ui/js/kendo.all.min.js:30:19702)
    at init.<anonymous> (http://lm.stage.cargoclix.net/bower_components/kendo-ui/js/kendo.all.min.js:30:27764)
    at Object.proxy (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:513:14)
    at Object.<anonymous> (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:3230:33)
    at fire (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:3073:30)
    at Object.fireWith [as resolveWith] (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:3185:7)
    at Object.deferred.(anonymous function) [as resolve] (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:3275:34)
    at init.<anonymous> (http://lm.stage.cargoclix.net/bower_components/kendo-ui/js/kendo.all.min.js:30:22489)
    at Object.proxy (http://lm.stage.cargoclix.net/bower_components/jquery/dist/jquery.js:513:14)
Run Code Online (Sandbox Code Playgroud)

这是我的Bower.json文件代码:

"dependencies": {
    "font-awesome": "4.6.3",
    "angular": "1.5.8",
    "json-formatter": "0.6.0",
    "angular-route": "1.5.8",
    "angular-local-storage": "0.5.2",
    "angular-cookies": "1.5.8",
    "angular-sanitize": "1.5.8",
    "angular-animate": "1.5.8",
    "bootstrap": "3.3.7",
    "angular-bootstrap": "2.2.0",
    "toastr": "2.1.3",
    "moment": "2.15.1",
    "angular-translate": "2.11.0",
    "angular-gridster": "0.13.15",
    "angular-loading-bar": "0.9.0",
    "angular-i18n": "1.5.8",
    "angular-translate-loader-static-files": …
Run Code Online (Sandbox Code Playgroud)

jquery kendo-ui kendo-grid

2
推荐指数
1
解决办法
1305
查看次数

在Angular 2中清除Kendo Grid的选择

我有一个允许用户在Kendo Angular 2网格中选择一行并单击删除该行的按钮的应用程序。但是,在删除该行之后,网格选择将保留在刚删除的行的索引上。我想在单击按钮并删除该行后清除网格的选择。对于我的一生,我找不到办法。有任何想法吗?

kendo-grid kendo-ui-angular2

2
推荐指数
1
解决办法
1370
查看次数