Grid cell edit of type number value not showing in input, works if type changed to text

[Hardip]

I have a grid with editable cell inside bootstrap modal pop up, all text and dropdown cell works fine except for the number field.

When clicked on the number cell the input opens but value is showing inside, value is updated and reflects back on the grid, applies all the validation but just value is not showing the input field.

I checked everything but could not figure this one out.

var _dataSource = new kendo.data.DataSource({
                    data: localityGridDataSource,
                    sort: { field: 'nodeLocalitySequence', dir: 'asc' },
                    autoSync: true,
                    schema: {
                        model: {
                            id: 'localityCode',
                            fields: {
                                localityCode: { editable: false },
                                localityTitle: { editable: false },
                                nodeLocalitySequence: { type: 'number', validation: { required: true, min: 1, max: 999999 } },
                                nodeLocalityType: { defaultValue: { nodeLocalityTypeValue: 'I', nodeLocalityTypeName: app.localize('InsideGrid') } },
                                nodeLocalityExternalNote: { type: 'text' }
                            }
                        }
                    }
                });

                _LocalitiesGrid.kendoGrid({
                    dataSource: _dataSource,
                    editable: true,
                    noRecords: true,
                    edit: onGridEditing,
                    remove: clearLocalitiesAudioMessage,
                    columns: [
                        { field: 'localityTitle', title: app.localize('Locality') },
                        { field: 'nodeLocalitySequence', title: app.localize('Order') },
                        { field: 'nodeLocalityType', title: app.localize('IncludeType'), editor: nodeLocalityTypeDropDownEditor, template: '#=nodeLocalityType.nodeLocalityTypeName#', width: '250px' },
                        { field: 'nodeLocalityExternalNote', title: app.localize('Notes') },
                        { command: ["destroy"], width: '125px' }
                    ]
                });

 

 

 

[Nikolay]

Hi Hardip,

This behavior is quite unusual. I examined the code snippet and I can say it looks good.

Is it possible to replicate the problem on the following Dojo demo? This will allow me to investigate further.

• https://dojo.telerik.com/aSUgIguF

Regards,

Nikolay

[jhonson]

Set the nodeLocalitySequence column's template attribute to include an input element:

{ field: 'nodeLocalitySequence', title: app.localize('Order'), template: '<input type="number" class="k-input k-textbox" name="nodeLocalitySequence" data-bind="value:nodeLocalitySequence">', editor: nodeLocalitySequenceNumberEditor }

The default column template will be replaced with a custom template that contains an input element. The data-bind property is used to connect the input element to the nodeLocalitySequence field. When the user clicks on the cell to modify it, the input value should be shown.

[Nikolay]

Hi Jhonson,

When the column template is set as an input it is a good practice to disable the editing for the column so the user uses the template input for editing. Otherwise, the user will enter editing mode when a cell is focused.

{ field: 'nodeLocalitySequence', title: app.localize('Order'), template: '<input type="number" class="k-input k-textbox" name="nodeLocalitySequence" data-bind="value:nodeLocalitySequence">', editable: function (dataItem) { return false }}

Here is a forum thread discussing this topic: https://www.telerik.com/forums/kendo-incell-editable-grid-column-template-issues-on-tab-navigation#4705840

Regards,

Nikolay

 

[Hardip]

Thank you for the responses, resolved this issue by converting the field to text and adding custom validation. 

nodeLocalitySequence: {
                                    type: 'text',
                                    validation: {
                                        required: true,
                                        nodeLocalitySequencevalidation: function (input) {
                                            if (input.is("[name='nodeLocalitySequence']") && input.val() != "") {
                                                input.attr("data-nodeLocalitySequencevalidation-msg", "Order can only be between 1 to 999999");
                                                return /^(?!0)\d{1,6}$/.test(input.val());
                                            }
                                            return true;
                                        }
                                    }
                                },

 

Regards,

Hardip