Input format with trainling zeros

[Scott Waye]

Hi,

The behaviour I want when changing 1000 to 2000 is to be able to put the cursor to the left of the 1, press delete and then press 2.  I can do this with RadMaskedNumericInput by changing UpdateValueEvent="LostFocus".  How do I get the same value when the value is in a RadGridView?

I can't attach zips here but the xaml is :

<StackPanel>

    <telerik:RadMaskedNumericInput IsClearButtonVisible="False" FormatString="#,#.00" AutoFillZeros="False" Mask="" UpdateValueEvent="LostFocus" HorizontalAlignment="Right"

                                   Value="{Binding SingleValue}"></telerik:RadMaskedNumericInput>

    <telerik:RadGridView AutoGenerateColumns="False" ItemsSource="{Binding Items}">

        <telerik:RadGridView.Columns>

            <telerik:GridViewMaskedInputColumn Header="Value" DataMemberBinding="{Binding Value, Mode=TwoWay}" TextAlignment="Right" DataFormatString="#,#.00" EditTriggers="CellClick"/>

        </telerik:RadGridView.Columns>

    </telerik:RadGridView>

</StackPanel>

Code behind is:

public partial class MainPage
{
    public MainPage()
    {
        InitializeComponent();
        SingleValue = 10000m;
        Items = new List<Item>
        {
            new Item { Value= 10000m},
        };
        DataContext = this;
    }
    public decimal SingleValue { get; set; }
    public List<Item> Items { get; set; }
}

public class Item
{
    public decimal Value { get; set; }
}

Thanks

[Stefan]

Hi Scott,

You could achieve this behavior by using a RadMaskedNumericInput within a CellEditTemplate. Please check the code snippet below:

<telerik:GridViewDataColumn
                            Header="Value"
                            DataMemberBinding="{Binding Value,
                            Mode=TwoWay}"
                            EditTriggers="CellClick">
    <telerik:GridViewDataColumn.CellTemplate>
        <DataTemplate>
            <telerik:RadMaskedNumericInput
                             IsClearButtonVisible="False"
                             FormatString="#,#.00"
                             AutoFillZeros="False"
                             UpdateValueEvent="LostFocus"
                             HorizontalAlignment="Right"
                   Value="{Binding Value, Mode=TwoWay}">
            </telerik:RadMaskedNumericInput>
        </DataTemplate>
    </telerik:GridViewDataColumn.CellTemplate>
</telerik:GridViewDataColumn>

Let me know how this works for you.

Kind Regards,
Stefan
Telerik

 

 

[Scott Waye]

Hi,

While that works, I'm sure you realise that it is far from usable.  Retemplating the data column like this effectively puts the cell in edit mode always.  You loose all ability to make certain rows readonly.  Also it looks strange as it has an extra box and the highlighting is different.  Is there a solution that makes numeric value editing like Excel, i.e. as I described?

[Stefan]

Hello Scott,

The way to redefine the default behavior of a GridViewColumn/GridViewMaskedInputColumn is by using a CellTemplate for the cell in view mode and CellEditTemplate for the cell in edit mode. As I get from your post you should be using a CellEditTemplate. Please refer the to the documentation article from my previous post for further reference.

As for the readonly functionality you could set the IsReadOnly property of a particular GridViewMaskedInputColumn to true. Please check the modified example below:

<telerik:GridViewMaskedInputColumn
                    MaskType="Numeric"
                    IsReadOnly="False"
                    DataMemberBinding="{Binding Value}"
                    Header="VALUE">
    <telerik:GridViewMaskedInputColumn.CellEditTemplate>
        <DataTemplate>
            <telerik:RadMaskedNumericInput
                           IsClearButtonVisible="False"
                           FormatString="#,#.00"
                           AutoFillZeros="False"
                           UpdateValueEvent="LostFocus"
                           HorizontalAlignment="Right"
                           BorderThickness="0"
                           Value="{Binding Value,Mode=TwoWay}"/>
        </DataTemplate>
    </telerik:GridViewMaskedInputColumn.CellEditTemplate>
</telerik:GridViewMaskedInputColumn>

I hope this helps

Best Regards,
Stefan
Telerik

 

 

[Scott Waye]

Thanks,  I thought I had tried that, but obviously not as it works fine.