[Solved] Incell editing mode saves when "tab" out of cell but not blur/click away from cell

[Ryan]

I've researched some similar questions about this problem but without any success. The demo examples of the grid don't seem to have this problem but they use odata if that matters. Here's my grid and datasource configs:

01.var ds = new kendo.data.DataSource({
02.    autoSync: true,
03.    transport: {
04.        create: function(options) => {
05.            console.warn('kendo: data: transport: create');
06.            options.success(that.getEmptyRow());
07.        },
08.        read: function(options) {
09.            console.warn('kendo: data: transport: read');
10.            // Save for resolution via setState
11.            that.gridDataUpdateHandler = options;
12.        },
13.        update: function(options) {
14.            console.warn('kendo: data: transport: update');
15.            if (utils.isGuid(options.data.id)) {
16.                // create, get new ID from server
17.                options.data.id = moment().unix();
18.                ServerActionCreators.addCode(window['encounterId'], options.data);
19.                // optimistic
20.                options.success();
21.            } else {
22.                // update
23.                ServerActionCreators.updateCode(window['encounterId'], options.data);
24.                // optimistic
25.                options.success();
26.            }
27.        },
28.        destroy: function(options: kendo.data.DataSourceTransportOptions) {
29.            console.warn('kendo: data: transport: destroy');
30.            ServerActionCreators.destroyCode(window['encounterId'], options.data);
31.            // optimistic
32.            options.success();
33.        }
34.    },
35.    schema: {
36.        model: {
37.            id: 'id',
38.            fields: {
39.                {
40.                    "rowNum": {
41.                        "type": "number",
42.                        "editable": false
43.                    },
44.                    "gf": {
45.                        "type": "string",
46.                        "editable": false
47.                    },
48.                    "gfd": {
49.                        "type": "boolean",
50.                        "editable": false,
51.                        "defaultValue": null
52.                    },
53.                    "code": {
54.                        "type": "string",
55.                        "validation": {}
56.                    },
57.                    "codeType": {
58.                        "type": "string",
59.                        "editable": true,
60.                        "defaultValue": "typeX"
61.                    },
62.                    "pa": {
63.                        "type": "string",
64.                        "editable": true
65.                    },
66.                    "description": {
67.                        "type": "string",
68.                        "editable": true
69.                    }
70.                }
71.            }
72.        }
73.    },
74.    change: function(e) {
75.        console.warn('kendo: data: change: ' + e.action);
76.        // this is never called, even when user tabs out of cell
77.        if (e.action === 'itemchange') this.sync();
78.    },
79.    sync: function(e) {
80.        console.warn('kendo: data: sync');
81.    },
82.    requestStart: function(e) {
83.        if (this.grid && e.type === 'update') {
84.            this.lastCellPosition = this.getCurrentCellPositionInfo();
85.            this.isUpdating = true;
86.        } else {
87.            this.isUpdating = false;
88.        }
89.        console.warn('kendo: data: request start');
90.    },
91.    requestEnd: function(e) {
92.        console.warn('kendo: data: request end');
93.    },
94.});

and

001.var gridConfig = {
002.    dataSource: ds,
003.    sortable: false,
004.    editable: {
005.        createAt: 'bottom'
006.    },
007.    columns: [{
008.        "field": "rowNum",
009.        "headerAttributes": {
010.            "class": "col-row-num"
011.        },
012.        "attributes": {
013.            "class": "col-row-num"
014.        },
015.        "title": "#"
016.    }, {
017.        "field": "code",
018.        "title": "Code",
019.        "headerAttributes": {
020.            "class": "col-code"
021.        },
022.        "attributes": {
023.            "class": "col-code"
024.        }
025.    }, {
026.        "field": "codeType",
027.        "title": "Code Type",
028.        "headerAttributes": {
029.            "class": "col-code-type"
030.        },
031.        "attributes": {
032.            "class": "col-code-type"
033.        },
034.        "hidden": true
035.    }, {
036.        "field": "description",
037.        "title": "Description",
038.        "headerAttributes": {
039.            "class": "col-description cpt4-col-description"
040.        },
041.        "attributes": {
042.            "class": "col-description"
043.        }
044.    }, {
045.        "field": "modifiers",
046.        "title": "Modifiers",
047.        "headerAttributes": {
048.            "class": "col-modifiers"
049.        },
050.        "attributes": {
051.            "class": "col-modifiers"
052.        }
053.    }, {
054.        "field": "units",
055.        "title": "Units",
056.        "headerAttributes": {
057.            "class": "col-units"
058.        },
059.        "attributes": {
060.            "class": "col-units"
061.        }
062.    }, {
063.        "field": "revenueCode",
064.        "title": "RC",
065.        "headerAttributes": {
066.            "class": "col-revenue-code"
067.        },
068.        "attributes": {
069.            "class": "col-revenue-code"
070.        }
071.    }, {
072.        "field": "episode",
073.        "title": "Episode",
074.        "headerAttributes": {
075.            "class": "col-episode"
076.        },
077.        "attributes": {
078.            "class": "col-episode"
079.        }
080.    }, {
081.        "field": "provider",
082.        "title": "Provider",
083.        "headerAttributes": {
084.            "class": "col-provider col-ddl"
085.        },
086.        "attributes": {
087.            "class": "col-provider col-ddl",
088.            "data-item-key": "provider",
089.            "data-value-key": "id"
090.        }
091.    }, {
092.        "field": "date",
093.        "title": "Date",
094.        "headerAttributes": {
095.            "class": "col-date"
096.        },
097.        "attributes": {
098.            "class": "col-date"
099.        },
100.        "format": "{0:d}"
101.    }, {
102.        "field": "charges",
103.        "title": "Charges",
104.        "headerAttributes": {
105.            "class": "col-charges"
106.        },
107.        "attributes": {
108.            "class": "col-charges"
109.        },
110.        "format": "{0:c}"
111.    }, {
112.        "title": "APC",
113.        "headerAttributes": {
114.            "class": "col-apc"
115.        },
116.        "attributes": {
117.            "class": "col-apc"
118.        }
119.    }, {
120.        "title": "APC Wt",
121.        "headerAttributes": {
122.            "class": "col-apc-weight"
123.        },
124.        "attributes": {
125.            "class": "col-apc-weight"
126.        }
127.    }, {
128.        "title": "SI",
129.        "headerAttributes": {
130.            "class": "col-si"
131.        },
132.        "attributes": {
133.            "class": "col-si"
134.        }
135.    }, {
136.        "title": "CA Flag",
137.        "headerAttributes": {
138.            "class": "col-ca-flag"
139.        },
140.        "attributes": {
141.            "class": "col-ca-flag"
142.        }
143.    }, {
144.        "title": "Percent",
145.        "headerAttributes": {
146.            "class": "col-percent"
147.        },
148.        "attributes": {
149.            "class": "col-percent"
150.        }
151.    }, {
152.        "title": "MCare Amt",
153.        "headerAttributes": {
154.            "class": "col-medicare-amount"
155.        },
156.        "attributes": {
157.            "class": "col-medicare-amount"
158.        },
159.        "format": "{0:c}"
160.    }, {
161.        "title": "Adj Coin",
162.        "headerAttributes": {
163.            "class": "col-adjusted-coin"
164.        },
165.        "attributes": {
166.            "class": "col-adjusted-coin"
167.        }
168.    }, {
169.        "title": "Out Amount",
170.        "headerAttributes": {
171.            "class": "col-out-amount"
172.        },
173.        "attributes": {
174.            "class": "col-out-amount"
175.        }
176.    }, {
177.        "title": "APC Pymt",
178.        "headerAttributes": {
179.            "class": "col-apc-payment"
180.        },
181.        "attributes": {
182.            "class": "col-apc-payment"
183.        }
184.    }],
185.    resizable: true,
186.    scrollable: true,
187.    navigatable: false,
188.    //selectable: 'cell',
189.    // events
190.    cancel: function() {
191.        console.warn('kendo: grid: cancel');
192.    },
193.    change: function(e) {
194.        console.warn('kendo: grid: change');
195.        var cellPos = _this.getCurrentCellPositionInfo();
196.    },
197.    columnHide: function() {
198.        console.warn('kendo: grid: columnHide');
199.    },
200.    columnMenuInit: function() {
201.        console.warn('kendo: grid: columnMenuInit');
202.    },
203.    columnReorder: function() {
204.        console.warn('kendo: grid: columnReorder');
205.    },
206.    columnResize: function() {
207.        console.warn('kendo: grid: columnResize');
208.    },
209.    columnShow: function() {
210.        console.warn('kendo: grid: columnShow');
211.    },
212.    edit: function(e) {
213.        console.warn('kendo: grid: edit');
214.        e.container.find('.k-dropdown-wrap').removeClass('k-state-disabled').addClass('k-state-default');
215.    },
216.    excelExport: function() {
217.        console.warn('kendo: grid: excelExport');
218.    },
219.    pdfExport: function() {
220.        console.warn('kendo: grid: pdfExport');
221.    },
222.    filterMenuInit: function() {
223.        console.warn('kendo: grid: filterMenuInit');
224.    },
225.    remove: function() {
226.        console.warn('kendo: grid: remove');
227.    },
228.    save: function(e) {
229.        console.warn('kendo: grid: save');
230.    },
231.    saveChanges: function() {
232.        console.warn('kendo: grid: saveChanges');
233.    },
234.    columnLock: function() {
235.        console.warn('kendo: grid: columnLock');
236.    },
237.    columnUnlock: function() {
238.        console.warn('kendo: grid: columnUnlock');
239.    },
240.    dataBinding: function(e) {
241.        console.warn('kendo: grid: dataBinding');
242.        var start = 0;
243.        if (e.sender.dataSource.page() !== undefined && e.sender.dataSource.pageSize() !== undefined) {
244.            start = (e.sender.dataSource.page() - 1) * e.sender.dataSource.pageSize();
245.        }
246.        _.each(e.items, function(item) {
247.            item['rowNum'] = ++start;
248.        });
249.    },
250.    dataBound: function(e) {
251.        console.warn('kendo: grid: dataBound');
252.        _this.setupKeyListeners();
253.    }
254.};
255.this.grid = $('#grid').attr('id', this.id).kendoGrid(gridConfig).data('kendoGrid');
256.window['grid' + this.id] = this.grid;
257.};

Help is appreciated

[Nikolay Rusev]

Hello Ryan,

This behavior can only happens if there is mousedown handler to Grid element for example and the event is prevented, i.e e.preventDefault();. In case blur will not happen and respectively change of the edited input will not trigger.

I assume this is the case in your application.

Regards,
Nikolay Rusev
Telerik by Progress