Input format with trainling zeros

5 posts, 1 answers
  1. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 31 Jan 2015 Link to this post

    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
  2. Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 02 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. DevCraft banner
  4. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 02 Feb 2015 in reply to Stefan X1 Link to this post

    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?
  5. Answer
    Stefan X1
    Admin
    Stefan X1 avatar
    523 posts

    Posted 03 Feb 2015 Link to this post

    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
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Scott Waye
    Scott Waye avatar
    111 posts
    Member since:
    Nov 2009

    Posted 03 Feb 2015 in reply to Stefan X1 Link to this post

    Thanks,  I thought I had tried that, but obviously not as it works fine.
Back to Top
DevCraft banner