Calculating two fields

[Michael]

Hi there. I'm looking to do some on-the-fly calculations.I want to multiply the values in a Quantity field and times it by a Unit Price field and update the input field that's within the Ext Price field.

I was going to try and do it, in the save event, and I've done that in the past, so when a user would tab off the field, it would do the calculation. But now my editable property is "inline" and not "true" so it appears I can't do that now, the editable mode like this effects the timing of such events.

I want the user to see the updated value as they are tabbing around the row, not when they simply save.

The input fields seem to be kendo numerictextboxes when I'm in edit mode.

Here's my grid part.

01.$("#gridLineItems").kendoGrid({
02.                                        dataSource: dataSource,
03.                                        navigatable: true,
04.                                        pageable: true,
05.                                        editable: {
06.                                            mode: "inline"
07.                                        },
08.                                        //editable: true,
09.                                        toolbar: [{ name: "create", text: "Insert Line" }, { name: "cancel" }, { name: "save" }],
10.                                        columns: [
11.                                            { field: "LineItemPK", title: "LineItemPK", hidden: true },
12.                                            { field: "Quantity", title: "Qty", validation: { min: 0 }, editor: editorNumberQty, width:50 },
13.                                            { field: "UnitPrice", title: "Unit Price", editor: editorNumber, width: 75 },
14.                                            { field: "ExtPrice", title: "Ext. Price", editable: false, attributes: { "class": "ExtPrice" }, width: 75 },
15.                                            { field: "ProductFK", title: "ProductFK", attributes: { "class": "ProductFK" }, hidden: true },
16.                                            { field: "Description", title: "Product", editor: productDropDownEditor, width: 200 },
17.                                            { field: "ProductID", title: "Product ID" },
18.                                            { field: "UoM", title: "UoM" },
19.                                            { field: "InvoiceNum", title: "Invoice #" },
20.                                            { field: "DepFunction", title: "Dep. Funct." },
21.                                            { field: "CostCenterFK", title: "CostCenterFK", hidden: true },
22.                                            { field: "CostCenterDescription", title: "Cost Center", editor: csDropDownEditor },
23.                                            { field: "AccountFK", title: "G/L", hidden: true },
24.                                            { field: "GLAccount", title: "G/L", editor: glDropDownEditor },
25.                                            { field: "OrderFK", title: "OrderFK", editable: false, hidden: true },
26.                                            { command: ["edit", "destroy"], title: " ", width: 140 }
27.                                        ],
28.                                        selectable: true,
29.                                        edit: function (e) {
30.
41.                                            setTimeout(function () {
42.                                                var input = e.container.find("input");
43.                                                input.select();
44.                                            });
45.
46.                                        },
47.                                        change: function (e)
48.                                        {
49.
50.                                        },
51.                                        save: function (e) {
52.
53.                                        },
54.                                        saveChanges: function (e)
55.                                        {
56.
57.                                        }
58.                                    });
59.
60.                                });

 

Also, I tried the if (e.field == "UnitPrice") business, but that doesn't fire at all, unless I have editalble be inline (which doesn't make sense to me anyways, true or inline both seem to present an inline way of editing, but I digress.). I tried this because I only wanted it to fire it a user was tabbing off of UnitPrice or Quantity. I also tried e.values.Quantity, this doesn't help either, because it only seems to know the value if you are on the field in question. So, if I tab off of Quantity and I'm looking for e.values.Quantity, it gets that, but not the value of UnitPrice. 

Thanks in advance.

 

PS - also, if you look at my line 41, the code that's supposed to focus on a field when I tab into it, it's not firing at all. Again, I think because I'm not in editable mode - true. This whole editablemode seems to be screwing a lot up for me. But I needed to do it because delete wasn't working without it.

[Dimiter Topalov]

Hi Michael,

One of the differences between the incell and inline edit modes, is the value of e.container in the edit event handler. In the former case it is the currently edited grid cell, while in the latter it is the currently edited row.

The desired functionality can be achieved with some custom logic, involving the model.set() method, applied in the edit event handler:

edit: function(e) {
var row = e.container;
e.model.UnitsInStock = e.model.ProductID * e.model.UnitPrice;
e.model.bind("change", function(j) {
row.find("td.result").html(e.model.ProductID * e.model.UnitPrice);
e.model.set("UnitsInStock", e.model.ProductID * e.model.UnitPrice);
});
},

Here is a simple example:

http://dojo.telerik.com/Uwete/8

I hope this helps.

Regards,
Dimiter Topalov
Telerik