[Solved] Grid tabbing -with incell edit mode

[Janusz]

I have grid with datasource:

$scope.taxRatesDataSource = new kendo.data.DataSource({
                        autoSync: true,
                        data: [{ taxRatesVatRate: null, taxRatesNetAmount: null, taxRatesVatValue: null, taxRatesGrossAmount: null, taxRatesCategory: null}],
                        schema: {
                            model: {
                                fields: {
                                    taxRatesVatRate: {
                                    },
                                    taxRatesNetAmount: {
                                        type: "number"
                                    },
                                    taxRatesVatValue: {
                                        type: "number"
                                    },
                                    taxRatesGrossAmount: {
                                        type: "number"
                                    },taxRatesCategory: {
                                    }
                                }
                            }
                        },
                        change: function(data){
                            if($scope.syncChange == false && data != null && data.items != null && data.items.length > 0){
                                if($scope.lastEditColTaxRates == 0 || $scope.lastEditColTaxRates == 1) {
                                    for (var i = 0; i < data.items.length; i++) {
                                        if (data.items[i].taxRatesVatRate != null && data.items[i].taxRatesVatRate != undefined &&
                                            data.items[i].taxRatesNetAmount != null && data.items[i].taxRatesNetAmount != undefined) {
                                            data.items[i].taxRatesVatValue = data.items[i].taxRatesNetAmount * $scope.vatRateMultiplier(data.items[i].taxRatesVatRate);
                                            data.items[i].taxRatesGrossAmount = data.items[i].taxRatesVatValue + data.items[i].taxRatesNetAmount;
                                        }
                                        if (valueToCategoryTaxRates != null) {
                                            if (data.items[i].uid == valueToCategoryTaxRates.uid) {
                                                data.items[i].taxRatesCategory = valueToCategoryTaxRates;
                                                valueToCategoryTaxRates = null;
                                            }
                                        }
                                    }
                                } else if($scope.lastEditColTaxRates == 2){
                                    for (var i = 0; i < data.items.length; i++) {
                                        if (data.items[i].taxRatesVatValue != null && data.items[i].taxRatesVatValue != undefined &&
                                            data.items[i].taxRatesNetAmount != null &&  data.items[i].taxRatesNetAmount != undefined) {
                                            data.items[i].taxRatesGrossAmount = data.items[i].taxRatesVatValue + data.items[i].taxRatesNetAmount;
                                        }
                                        if (valueToCategoryTaxRates != null) {
                                            if (data.items[i].uid == valueToCategoryTaxRates.uid) {
                                                data.items[i].taxRatesCategory = valueToCategoryTaxRates;
                                                valueToCategoryTaxRates = null;
                                            }
                                        }
                                    }
                                }
                                $scope.syncChange = true;
                                $scope.taxRatesDataSource.sync();
                            } else {
                                $scope.syncChange = false;
                            }
                        },
                        aggregate:[
                            { field:"taxRatesNetAmount", aggregate:"sum" },
                            { field:"taxRatesVatValue", aggregate:"sum" },
                            { field:"taxRatesGrossAmount", aggregate:"sum" }
                        ]
                    });

and options:

{
                            columns: [
                                {
                                    field: "taxRatesVatRate",
                                    title: translations["ALL.CORRECT.TAX_RATE_VAT_RATE"],
                                    width: 40,
                                    footerTemplate: "<div style=\"text-align:right;  font-size: 0.8em; font-weight:normal !important;\"></div>",
                                    values: $scope.vatRates,
                                    template: function(dataItem){
                                        if(dataItem != null && dataItem != undefined && dataItem.taxRatesVatRate != null && dataItem.taxRatesVatRate != undefined){
                                            if(dataItem.taxRatesVatRate.text != undefined){
                                                return dataItem.taxRatesVatRate.text
                                            } else {
                                                for(var i =0; i < $scope.vatRates.length; i++){
                                                    if($scope.vatRates[i].value == dataItem.taxRatesVatRate){
                                                        return $scope.vatRates[i].text;
                                                    }
                                                }
                                                return ""
                                            }
                                        } else {
                                            return ""
                                        }
                                    }
                                }, {
                                    field: "taxRatesNetAmount",
                                    title: translations["ALL.CORRECT.TAX_RATE_NET_AMMOUNT"],
                                    width: $scope.amountWidth,
                                    editor: editNumber,
                                    "attributes": {
                                        "class": "currencyCell"
                                    },
                                    aggregates: ["sum"],
                                    footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\">#=sum != null ? kendo.toString(sum,'0.00') : 0#</div>",//"<div style=\"text-align:right;\">#=sum != null ? kendo.toString(sum,'0.00') : 0# {{cultureCurrency}}</div>",
                                    template: function(dataItem){
                                        if(dataItem != null && dataItem != undefined && dataItem.taxRatesNetAmount != null && dataItem.taxRatesNetAmount != undefined){
                                            return kendo.toString(dataItem.taxRatesNetAmount,'#,##.00');
                                        } else {
                                            return kendo.toString(0.0,'#,##.00');
                                        }
                                    }
                                }, {
                                    field: "taxRatesVatValue",
                                    title: translations["ALL.CORRECT.TAX_RATE_VAT_VALUE"],
                                    width: $scope.amountWidth,
                                    editor: editNumber,
                                    "attributes": {
                                        "class": "currencyCell"
                                    },
                                    aggregates: ["sum"],
                                    footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\">#=sum != null ? kendo.toString(sum,'0.00') : 0#</div>", //"<div style=\"text-align:right;\">#=sum != null ? kendo.toString(sum,'0.00') : 0# {{cultureCurrency}}</div>",
                                    template: function(dataItem){
                                        if(dataItem != null && dataItem != undefined && dataItem.taxRatesVatValue != null && dataItem.taxRatesVatValue != undefined){
                                            return kendo.toString(dataItem.taxRatesVatValue,'#,##.00');
                                        } else {
                                            return kendo.toString(0.0,'#,##.00');
                                        }
                                    }
                                }, {
                                    field: "taxRatesGrossAmount",
                                    title: translations["ALL.CORRECT.TAX_RATE_GROSS_AMOUNT"],
                                    width: $scope.amountWidth,
                                    editor: editNumber,
                                    "attributes": {
                                        "class": "currencyCell"
                                    },
                                    aggregates: ["sum"],
                                    footerTemplate: "<div style=\"text-align:right; font-size: 0.8em; font-weight:normal !important;\">#=sum != null ? kendo.toString(sum,'0.00') : 0#</div>", //"<div style=\"text-align:right;\">#=sum != null ? kendo.toString(sum,'0.00') : 0# {{cultureCurrency}}</div>",
                                    template: function(dataItem){
                                        var value = "";
                                        if(dataItem != null && dataItem != undefined && dataItem.taxRatesGrossAmount != null && dataItem.taxRatesGrossAmount != undefined){
                                            return kendo.toString(dataItem.taxRatesGrossAmount,'#,##.00');
                                        } else {
                                            return kendo.toString(0.0,'#,##.00');
                                        }
                                    }
                                }, {
                                    field: "taxRatesCategory",
                                    title: translations["ALL.CORRECT.TAX_RATE_CATEGORY"],
                                    footerTemplate: "<div style=\"text-align:right; font-size: 0.9em;\"></div>",
                                    editor: function(container, options){
                                        $scope.categoryOptions.dataBound = function(event) {
                                            event.sender.list.width(300);
                                        };

                                        $('<input id="' + options.model.uid + '" data-bind="value:' + options.field + '"/>')
                                            .appendTo(container)
                                            .kendoComboBox($scope.categoryOptions).bind("change", function(e){
                                                var ko = $("#" + this.id).data("kendoComboBox");
                                                var selectedItem = ko.dataItem(ko.select());
                                                valueToCategoryTaxRates = {
                                                    uid: this.id,
                                                    id: selectedItem.id,
                                                    accountNumber: selectedItem.accountNumber,
                                                    accountNumberCosts: selectedItem.accountNumberCosts,
                                                    displayName: selectedItem.displayName,
                                                    company: selectedItem.company,
                                                    isActive: selectedItem.isActive,
                                                    isDeleted: selectedItem.isDeleted,
                                                    name: selectedItem.name
                                                };
                                            });
                                        $('<span class="k-invalid-msg" data-for="' + options.field + '"></span>').appendTo(container);
                                    },
                                    template: function(dataItem){
                                        if(dataItem != null && dataItem != undefined && dataItem.taxRatesCategory != null && dataItem.taxRatesCategory != undefined){
                                            return dataItem.taxRatesCategory.displayName;
                                        } else {
                                            return "";
                                        }
                                    }
                                }
                            ],
                            navigatable: true,
                            edit: function(e){
                                var vatComponent = $("[name='taxRatesVatRate']");
                                if(vatComponent.length > 0) {
                                    vatComponent.data("kendoDropDownList").list.width(70);
                                }
                                var ddl = e.container.find(".k-widget").focus();
                                if(ddl != null && ddl != undefined && ddl.length > 0) {
                                    var colIdx = e.container[0].cellIndex;
                                    $scope.lastEditColTaxRates = colIdx;
                                    var rowIdx = -1;
                                    for(var i = 0; i < e.sender._data.length; i++){
                                        if(e.sender._data[i].uid == e.model.uid){
                                            rowIdx = i;
                                            break;
                                        }
                                    }
                                    $scope.$broadcast('corr:showGridBox', {grid: 'taxRates', 'row': rowIdx, 'col': colIdx });
                                }
                            }
                        }

I want to edit cell and go with tab to next cell, edited value should be saved. Problem is that my datasource calculate grid row (on change value) and sync it. Probably it causes focuslost and when I pres tab on edited cell, foscus moved to first cell and start tabbing from begining. 

How can I fix it ?

[Vladimir Iliev]

Hello Janusz,

When the grid have "autoSync" option it will sync the applied changes immediately which will cause the grid to rebind. Currently however the grid doesn't support preserving the navigation position after rebinding and custom solution would be needed. For your convenience I created small example which you can use as baseline:

• Grid preserve navigation position after rebind ("autoSync" enabled)

Regards,
Vladimir Iliev
Telerik

 

 

[Thomas]

Hi Vladimir,

I tried out your example, but whenever I change the product name and press "tab", it will go to the next cell (which will be in edit mode), shortly after, the cell will however change to "normal mode" (but still be selected), making me unable to edit it.

How can I make the cell stay in "edit mode", so the user easily can edit the next cell?

[Vladimir Iliev]

Hello Thomas,

As I mention the desired behavior is not supported out of the box and you should manually extend the previously provided demo to meet your needs. For example you can force the cell in edit mode using the "editCell" method of the grid:

• http://dojo.telerik.com/AGuBu/5

 

Regards,
Vladimir Iliev
Telerik

 

 

[Thomas]

Hi again,

Thanks! that seems to do the job :)