Grid inline editing client side save

@{
    var gid = "GridClientSave";
}
<div class="bar">
    @Html.InlineCreateButtonForGrid(gid)
</div>
@(Html.Awe().Grid(gid)
    .DataFunc("getData")
    .Height(370)
    .InlEdit(new InlEditOpt{
        ClientOpt = "clientOpt",
        RowClickEdit = true
    })
    .Validation()
    .Columns(
        new Column{ Bind = "Id", Width = 100}
            .InlId(),

        new Column{ Bind = "Name"}
            .InlString(),

        new Column { Bind = "BonusMealName", Prop = "BonusMeal", Header = "Bonus Meal" }
            .InlDropdownList(new DropdownListOpt { Name = "BonusMealId", Url = Url.Action("GetMealsImg", "Data") }),

        new Column{ Bind = "Organic", Width = 120, Prop = "OrganicDisplay"}
            .Inl(Html.Awe().Toggle(new ToggleOpt{ Name = "Organic"})),

        new Column
        {
            // o-glh - hidden when editing, o-gl - hidden when not editing
            ClientFormat = "<button type='button' class='awe-btn o-glbtn o-glh' onclick='openDelPopup(\".(Id)\")'>delete</button>" + Html.InlineCancelBtn(),
            CssClass = "o-glnon", // clicking the cell won't go to edit
            Width = 100
        },

        new Column { Prop = "State", Header = "State", Width = 100 }
    ))

<script>
    var dinners;
    var meals;
    var cid = 1;
    var clientOpt = {
        save: function(values) {
            var input = aweUtils.serializeObj(values);
            var din;
            if (input.Id) {
                din = awef.where(dinners, function(o) { return o.Id.toString() === input.Id })[0];
                din.Changed = true; // changed on the client
            } else {
                // new
                din = { New: true, Id: 't' + cid++ };
                dinners.push(din);
            }

            din.Name = input.Name;
            din.Organic = input.Organic === 'true';
            din.BonusMealId = input.BonusMealId;
            var mealName = awef.where(meals, function(m) { return m.k === input.BonusMealId })[0].c;
            din.BonusMealName = mealName;

            return { Item: mapDinner(din) };
        }
    };

    function getData(sgp) {
        if (dinners) return getGridData(sgp, dinners);

        var dinnersUrl = '@Url.Action("GetDinners", "Data")';
        var mealsUrl = '@Url.Action("GetMealsImg", "Data")';

        return Promise.all([
            fetch(dinnersUrl).then(function (resp) {
                if (!resp.ok) throw new Error('Failed to fetch dinners: ' + resp.status);
                return resp.json();
            }),
            cstorg.get(mealsUrl)
        ]).then(function (results) {
            dinners = results[0];
            meals = results[1];
            return getGridData(sgp, dinners);
        });
    }

    function getGridData(sgp, items) {
        var gp = aweUtils.getGridParams(sgp);
        var list = awef.where(items, function(d) { return !d.IsDeleted; });

        var model = aweUtils.gridModelBuilder(
            {
                key:"Id",
                gp: gp,
                items: list,
                map: mapDinner,
                // replace default group header value for Date
                getHeaderVal:{ Date: function(o){ return o.DateStr; } }
            });
        return model;
    }

    function mapDinner(o) {
        return {
            Id: o.Id,
            Name: o.Name,
            Organic: o.Organic,
            OrganicDisplay: o.Organic ? 'Yes' : 'No',
            BonusMealId: o.BonusMealId,
            BonusMeal: o.BonusMealName,
            State: o.New ? 'new' : o.Changed ? 'changed' : ''
        };
    };

    function openDelPopup(id) {
        var din = awef.where(dinners, function (d) { return d.Id.toString() === id })[0];
        awe.open("confirmDelCs",
            {
                modal: true,
                height: 200,
                width: 700,
                title: 'please confirm',
                init: function({cont}) {
                    var content = $('<div style="padding: 0 3em;">Are you sure you want to delete dinner: ' + din.Name + '? </div>');
                    cont.html(content);
                },
                btns: [{
                        text: 'Yes',
                        ok:1, // add okbtn class
                        action: function() {
                            din.IsDeleted = true;
                            $(this).data('api').close();
                            aweUtils.itemDeleted('@gid')({ Id: id });
                        } },
                        {
                        text: 'No',
                        action: function() {
                            $(this).data('api').close();
                        } }
                ]
            });
    }
</script>