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

Numeric Text Editors when value is 0

2 Answers 806 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jeff
Top achievements
Rank 1
Jeff asked on 07 Mar 2017, 08:59 PM

Hi,

 

Is there a way to instantiate a blank NumericTextBox when editting a "Number" field who's value is 0?

In other words, if I have numeric fields in my grid and their value is 0, I want to show the 0 on the grid. And when the user edits the field, I'd like to a NumericTextBox to show with no value. If the user does not give a new value, and 'blurs' the text box, the underlying value in the text box does not change.

Currently, when I edit a number who's value is 0 or null, the 0 shows in the text box. I just think it would be a better user experience if the 0 disappeared when editing the value.

Here is my attempt at such an editor. This is not working since this code will change the datasource value to null if textbox is left blank, which triggers the grid save event, and a whole host of other things.

 

$('<input  class="text-right" name="' + options.field + '"/>')
.appendTo(container)
.kendoNumericTextBox({
decimals: 0,
format: 'n0',
step: 1,
spinners: false
}).off("keydown").on({
'focus': function () {
if (!$(this).val() == 0) {
$(this).val('');
console.log('huh?', this.value, $(this).val(), arguments);
}
},
'blur': function () {
if ($(this).val() == "") {
console.log('wha?', this.value);
$(this).val("0");
}
}
});

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Topalov
Telerik team
answered on 09 Mar 2017, 07:19 AM
Hello Jeff,

You can achieve the desired behavior by using a custom editor for the respective field (like you have already done), but perform the required custom logic in the Grid edit event handler, instead of in the function, creating the NumericTextBox.

You can get a reference to the NumericTextBox in the edit event handler, and if the value is null or 0, set its value to null programmatically via the value() method.

When the value of the widget is set this way, the change event is not triggered, and the underlying model is not changed, so if the value of the field was 0 before editing the cell, the NumericTextBox will be empty, but upon leaving it, the Grid cell will display 0 again.

I have prepared an example, demonstrating the described approach:

http://dojo.telerik.com/ENaRO/2

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jeff
Top achievements
Rank 1
answered on 09 Mar 2017, 08:04 PM
This is great! Thank you so much!
Tags
Grid
Asked by
Jeff
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Jeff
Top achievements
Rank 1
Share this question
or