item change event in edit mode RRS feed

  • Question

  • I have a list with calculated field subtotal. I placed a textbox which will populate total of the subtotal. As i understand you cannot sum for calculated fields. i used javascript to loop through the list items and get the total  and placed it in the text box. But the problem there is the sum is based on Quantity and the list is in edit mode so that users can easily change it. 

    I was thinking to add a item change event in the javascript and make necessary changes so that the text box will get updated with the total each time when the qty is changed.  

    even if i get a post back upon the qty is changed that will do.

    can some one suggest a way or the event handler of when an item is changed in edit mode of the list 

    • Edited by roma_victa Monday, January 22, 2018 10:29 AM
    Thursday, January 18, 2018 6:58 AM

All replies

  • the calculated field should change when item updates.

    Justin Liu Office Servers and Services MVP, MCSE
    Senior Software Engineer
    Please Vote and Mark as Answer if it helps you.

    Thursday, January 18, 2018 9:12 AM
  • The calculated field changes. But  textbox placed via code need to update the total of all the calculated fields to that text box.

    • Edited by roma_victa Thursday, January 18, 2018 11:18 AM
    Thursday, January 18, 2018 11:17 AM
  • it is a bad performance solution. how many items does your list have?

    I remember the view has a total calculated function, go to the view setting and see it.

    Justin Liu Office Servers and Services MVP, MCSE
    Senior Software Engineer
    Please Vote and Mark as Answer if it helps you.

    Friday, January 19, 2018 12:44 AM
  • my list item just have 2 to 5 items at a time. I am using datasheet view. If i remember correctly datasheet view does not allow to total the calculated column.

    Here is a sample of what i am trying to do. if i change the qty i need that to update the total below which is calculated by looping through the list and multiply qty with price.

    even if i get a post back upon the qty is changed that will do.

    Monday, January 22, 2018 5:21 AM
  • Hi,

    You could try the solution which custom quick edit control and monitor edit/update events like onEndEdit shared by Anatoly Mironov.


    Here is my test code did a little update based on his code for your reference.

    <script type="text/javascript">
            (function () {
                var editWrapper = '<input type="text" id="{0}" value"{1}"/>';
                var createVerySimpleColumnGridEditControl = function (gridContext, gridTextInputElement) {
                    var cellContext, inEdit, html, container, input, id;
                    id = "tolle-" + new Date().getTime();
                    html = String.format(editWrapper, id, "");
                    container = document.createElement("div");
                    container.innerHTML = html;
                    input = container.getElementsByTagName("input")[0];
                    container.style.cssText = 'background:#ffffff;';
                    var bindToCell = function (ctx) {
                        cellContext = ctx;
                        //An input is put as an overlay. We have to set the width and height so that it takes the whole cell place
                        container.style.minWidth = cellContext.cellWidth + 'px';
                        container.style.width = cellContext.cellWidth + 'px';
                        container.style.height = cellContext.cellHeight + 'px';
                        console.log("tolle BindToCell");
                        //input STYLE
                        input.style.minWidth = cellContext.cellWidth - 11 + 'px';
                        input.style.width = cellContext.cellWidth - 11 + 'px';
                        input.style.height = cellContext.cellHeight - 5 + 'px';
                    var onCellMove = function () { console.log("tolle OnCellMove"); };
                    var focus = function (eventInfo) {
                        console.log("tolle Focus", eventInfo);
                    var onBeginEdit = function (eventInfo) {
                        inEdit = true;
                        var currentValue = cellContext.originalValue.localized;
                        if (currentValue) {
                            input.value = currentValue;
                        console.log("tolle OnBeginEdit");
                    var onEndEdit = function () {
                        inEdit = false;
                        var value = input.value;
                            localized: value
                        /*cellContext.record.fieldRawDataMap.csrInfo.Qty is old value,
                        you may do calculation based oninput.value*/
                        console.log("tolle OnEndEdit");
                    var unbind = function () { console.log("tolle Unbind"); };
                    var dispose = function () { console.log("tolle Dispose"); }
                    return {
                        SupportedWriteMode: window.SP.JsGrid.EditActorWriteType.LocalizedOnly,
                        SupportedReadMode: window.SP.JsGrid.EditActorReadType.LocalizedOnly,
                        BindToCell: bindToCell,
                        OnCellMove: onCellMove,
                        Focus: focus,
                        OnBeginEdit: onBeginEdit,
                        OnEndEdit: onEndEdit,
                        Unbind: unbind,
                        Dispose: dispose
                function handleGridMode(ctx, field) {
                    window.SP.SOD.executeOrDelayUntilScriptLoaded(function () {
                        window.SP.GanttControl.WaitForGanttCreation(function (ganttChart) {
                            var verySimpleColumn = null;
                            var editId = "EDIT_TOLLE_VERYSIMPLEFIELD";
                            var columns = ganttChart.get_Columns();
                            for (var i = 0; i < columns.length; i++) {
                                if (columns[i].columnKey == "Qty") {
                                    verySimpleColumn = columns[i];
                            if (verySimpleColumn) {
                                verySimpleColumn.fnGetEditControlName = function (record, fieldKey) {
                                    return editId;
                                window.SP.JsGrid.PropertyType.Utils.RegisterEditControl(editId, function (gridContext, cellControl) {
                                    return createVerySimpleColumnGridEditControl(gridContext, cellControl);
                                }, []);
                    }, "spgantt.js");
                function verySimpleView(ctx, field) {
                    var wrapper = '<span>{0}</span>';
                    var value = ctx.CurrentItem[ctx.CurrentFieldSchema.Name] || "";
                    if (ctx.inGridMode) {
                        handleGridMode(ctx, field);
                    return String.format(wrapper, value);
                var overrideContext = {};
                overrideContext.Templates = overrideContext.Templates || {};
                overrideContext.Templates.Fields = {
                    'Qty': {
                        'View': verySimpleView

    Tip: the value we got in onEndEdit has not submitted/saved yet, so you may you may do calculation based on input.value.

    Best Regards,


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnsf@microsoft.com.

    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    Tuesday, January 23, 2018 6:14 AM
  • Hi,
    i am fresher in my organisation, i have doubt in QuickEdit in sharepoint 2013 using CSR.
    1. I have changed three single line text into three drop down choice field in New Form, Edit form using CSR (Cascading functionality).
    2. i have changed even in quick edit from single line to drop down, but when i clicked in the field to edit. it shows the original value of single line text.
    3.kindly let me know how to deal with it.
    kamalesh Paul
    Saturday, April 7, 2018 3:04 PM