剑道网格单元编辑答案

【问题标题】：Kendo grid cell editing剑道网格单元编辑
【发布时间】：2014-04-29 17:04:44
【问题描述】：

我想手动编辑一个单元格，并根据输入的数据自动在另一个单元格上显示内容。

例如：如果数量发生变化，则应计算总计（价格 * 数量）并将结果显示在总计列上

是否可以使用剑道网格？任何帮助表示赞赏。

【问题讨论】：

标签： c# asp.net-mvc kendo-ui telerik

【解决方案1】：

是的，这是可能的。如果您搜索“KendoUI Grid 计算字段”，您可以在互联网上找到一些信息。

解决方案取决于您选择的编辑模式类型（“inline”、“incell”或“popup”）。由于我在您的网格中没有看到任何带有用于触发版本的按钮的列，因此我知道您正在编辑 incell。然后解决方案是拦截save事件并计算字段。

让您的DataSource 定义为：

var ds = {
    data    : [
        { Id: 1, ItemName: "Galaxy", Price: "25000", Qty: 2, Total: 50000 },
        { Id: 1, ItemName: "Lumia", Price: "18000", Qty: 1, Total: 18000 },
        { Id: 1, ItemName: "Experia", Price: "10000", Qty: 3, Total: 30000 } 
    ],
    schema  : {
        model: {
            id : "Id",
            fields: {
                Id       : { type: 'number' },
                ItemName : { type: 'string' },
                Price    : { type: 'number' },
                Qty      : { type: 'number' },
                Total    : { type: 'number', editable: false }
            }
        }
    }
};

那么你的 Grid 应该是这样的：

var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable  : "incell",
    pageable  : false,
    columns   :
    [
        { field: "ItemName", title: "Item Name" },
        { field: "Price", title: "Price" },
        { field: "Qty", title: "Qty" },
        { field: "Total", title: "Total" }
    ]
}).data("kendoGrid");

您需要添加到Grid 定义的是save 事件处理程序，它使用e.values 检查哪个字段已更改（其中e 是save 接收到的事件信息）并计算新的@ 987654332@ 并在模型上使用set 方法设置。

    save : function (e) {
        if (e.values && (e.values.Qty || e.values.Price)) {
            var qty = e.values.Qty || e.model.Qty;
            var price = e.values.Price || e.model.Price;
            e.model.set("Total", price * qty);
        }
    }

此处示例：http://jsfiddle.net/qA8QX/

【讨论】：

【解决方案2】：

如果您使用 kendo MVC 的方式与此方式相同：

 @(Html.Kendo().Grid<Model>()
                  .Columns(columns =>
                  {
                      columns.Bound(p => p.ItemName);
                      columns.Bound(p => p.Qty);
                      columns.Bound(p => p.Price);
                      columns.Bound(p => p.Total);

                      columns.Command(command =>
                      {
                          command.Edit();
                      })

                  })
                  .Editable(editable => editable.Mode(GridEditMode.InLine))

                  .DataSource(dataSource => dataSource 
                      .Ajax()
                      .Model(model =>
                      {
                          model.Id(x => x.ExchangeRateId);
                          model.Field(x => x.Total).Editable(false);

                      })
                      .Read(read => read.Action("Read", "Products"))
                      .Update(update => update.Action("Update", "Products"))
                 )
            )

在你的控制器中是这样的：

public class Productscontroller {
public ActionResult Read([DataSourceRequest]DataSourceRequest request)
        {
        var products = proxy.GetProducts();

        DataSourceResult result = products.ToDataSourceResult(request, ProductsModel => new ProductsModel()
        {
            id = products.id,
            ItemName= products.ItemName,
            Qty= products.Qty,
            Price = products.Price,
            total = products.Qty * products.Price
        });
        return Json(result, JsonRequestBehavior.AllowGet);
    }
public ActionResult Update([DataSourceRequest]DataSourceRequest request, ProductsModel product)
        {
        var products = proxy.GetProductById(product.Id);

        Proxy<Products>.Update(products);
    }
}

希望对你有帮助

【讨论】：