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

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    38 posts
    Member since:
    Mar 2014

    Posted 07 Oct Link to this post

    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

  2. Nikolay Rusev
    Admin
    Nikolay Rusev avatar
    2284 posts

    Posted 11 Oct Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
Back to Top