This is a migrated thread and some comments may be shown as answers.

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

1 Answer 124 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 07 Oct 2016, 06:25 PM

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

1 Answer, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 11 Oct 2016, 08:01 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Grid
Asked by
Ryan
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Share this question
or