Custom formatting in GridNumericColumn

1 Answer 36 Views
Grid
Olga
Top achievements
Rank 1
Olga asked on 14 Jul 2022, 02:22 PM | edited on 14 Jul 2022, 05:46 PM

Hello,

I have a RadGrid with GridNumericColumn and EditMode="Batch"

Here is column definition

<telerik:GridNumericColumn DataField="CheckAmount"  UniqueName="CheckAmount" HeaderText="Check Amount ($)" DataFormatString="{0:C2}" DecimalDigits="2" NumericType="Number" ColumnEditorID="NumericEditor" ItemStyle-HorizontalAlign="Right"></telerik:GridNumericColumn> 

Here is column editor definition

<telerik:GridNumericColumnEditor runat="server" ID="NumericEditor"> 
<NumericTextBox runat="server" NumberFormat-DecimalDigits="2" DataFormatString="{0:C2}" NumberFormat-GroupSeparator="" MinValue="0.00" MaxValue="99999999.99" IncrementSettings-InterceptArrowKeys="false" IncrementSettings-InterceptMouseWheel="false"></NumericTextBox>
</telerik:GridNumericColumnEditor>

Currently, when I edit a number two zeroes are automatically added after a decimal point, for example,  1234 gets converted to 1234.00.  I would like to implement functionality when user can type in "cents" and amount gets converted to "dollars.cents", for example 1234 should be converted to 12.34.  Could you please suggest how to implement it?

And to expand my original question, I also need to deny entering of empty and negative amounts preferably with validation messages instead of out of range auto correct.  Is it possible to achieve with GridNumericColumn/GridNumericColumnEditor or do I need to use GridTempateColumn with EditItemTemplate? 

Thanks,

Olga

1 Answer, 1 is accepted

Sort by
0
Doncho
Telerik team
answered on 19 Jul 2022, 08:23 AM

Hi Olga,

One approach you can use to implement the desired editing in cents while the value is persisted as dollars could be to use the OnFocus and OnBlur client-side events of the NumericTextBox to manipulate the value.

For instance:

<telerik:GridNumericColumnEditor runat="server" ID="NumericEditor">
    <NumericTextBox runat="server" NumberFormat-DecimalDigits="2"
        DataFormatString="{0:C2}"
        NumberFormat-GroupSeparator=""
        MinValue="0.00" MaxValue="99999999.99"             
        IncrementSettings-InterceptArrowKeys="false"
        IncrementSettings-InterceptMouseWheel="false">
        <ClientEvents OnBlur="ntbBlur" OnFocus="ntbFocus" />
    </NumericTextBox>
</telerik:GridNumericColumnEditor>
<script>
    function ntbFocus(sender, args) {
        var ntb = sender;
        ntb.set_value(ntb.get_value() * 100);
    }

    function ntbBlur(sender, args) {
        var ntb = sender;
        ntb.set_value(ntb.get_value() / 100.0);
    }
</script>
As to displaying a custom error message with the built-in validation of the NumericTextBox, I would suggest you review and test the approach demonstrated in our OnError article.

I hope you will find this information useful.

Kind regards,
Doncho
Progress Telerik

The Premier Dev Conference is back! 

Coming to you live from Progress360 in-person or on your own time, DevReach for all. Register Today.


Olga
Top achievements
Rank 1
commented on 19 Jul 2022, 04:06 PM | edited

Hi Doncho,

Thank you for the suggestion, however OnBlur only works if I use mouse navigation between cells. In this case OnBlur is triggered first and OnBatchEditCellValueChanged is triggered after. I use OnBatchEditCellValueChanged  to execute some logic after cell is edited.   

If I use keyboard navigation (arroup, arrowdown) to navigate between cells OnBlur behaves differently for FireFox and Chrome.

Firefox: OnBlur IS NOT triggered when I use ArrowUp or ArrowDown for navigation between cells

Chrome: OnBlur is triggered when I use ArrowUp or ArrowDown for navigation between rows but its triggered AFTER OnBatchEditCellValueChanged.

Is there any way to implement the desired functionality to be working for mouse and keyboard navigation consistently across all browsers ?

Thanks,

Olga

 

Doncho
Telerik team
commented on 22 Jul 2022, 10:51 AM

Thank you for the clarification, Olga!

I have just sent a reply to the formal support ticket you have opened for this issue.

I would suggest we keep the discussion in the formal ticket only. Once we reach a resolution I will share it here in the forum as well.

Tags
Grid
Asked by
Olga
Top achievements
Rank 1
Answers by
Doncho
Telerik team
Share this question
or