Kendo-grid-Zelle Bearbeiten

Möchte ich manuell eine Zelle Bearbeiten und, und, basierend auf den eingegebenen Daten, werden automatisch Inhalte anzeigen, die auf eine andere Zelle.

ZB:
Wenn die Menge geändert wird, Insgesamt berechnet werden soll (Preis * Menge) und zeigt das Ergebnis auf Insgesamt Spalte

Kendo-grid-Zelle Bearbeiten

Ist es möglich, mit Kendo-raster? Jede Hilfe zu schätzen.

InformationsquelleAutor Jobi | 2014-03-22
  1. 7

    Ja, es ist möglich. Hier finden Sie einige Informationen über das internet, wenn Sie suchen, für "KendoUI Grid-berechnetes Feld".

    Die Lösung hängt von der Art der Ausgabe-Modus, die Sie gewählt haben ("inline", "incell" oder "popup"). Da bin ich nicht zu sehen, eine Spalte in Ihrer Tabelle mit einer Schaltfläche zum auslösen der Ausgabe, ich werde verstehen, die Sie Bearbeiten incell. Dann ist die Lösung abzufangen save Ereignis und berechnen das Feld an.

    Lassen, haben Ihre DataSource definiert als:

    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 }
            }
        }
    }
};

    Dann ist dein Netz sollte so etwas wie:

    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");

    Was Sie brauchen, um hinzuzufügen, zu Grid definition ist die save event-handler, überprüfen Sie, welches Feld sich geändert hat mit e.values (wo e ist die Ereignis-information, die von save) und Berechnung der neuen Total und legen Sie es mithilfe der set Methode auf das Modell.

        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);
        }
    }

    Beispiel hier : http://jsfiddle.net/qA8QX/

    InformationsquelleAutor OnaBai
  2. 0

    wenn Sie mit kendo MVC Art der gleichen Art und Weise fo, es zu tun:

     @(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"))
                 )
            )

    und in Ihrem controller, so etwas wie dieses:

    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);
    }
}

    hoffe, das hilft

    InformationsquelleAutor ProblemAnswerQue
Schreibe einen Kommentar