The label and data entry fields are different from the template alignment of the sample.

6 posts, 0 answers
  1. minseok
    minseok avatar
    6 posts
    Member since:
    Mar 2017

    Posted 21 Feb Link to this post

    I want DataForm to have a default alignment. However, the default alignment does not appear as sample as shown below. It is not known that the item can also be set from the attribute. I want to know how to change the settings.

     

    attached file : MyUI.jpg  /  SampleUI.jpg

     

    XAML

    <StackPanel>
        <telerik:RadGridView x:Name="gvGridView" ItemsSource="{Binding EtcRegistrationViewModel}" CanUserGroupColumns="False" ShowGroupPanel="False" GroupRenderMode="Flat" RowIndicatorVisibility="Collapsed" />
        <telerik:RadDataPager Source="{Binding Items, ElementName=gvGridView}" DisplayMode="FirstLastPreviousNextNumeric" PageSize="22"/>
    </StackPanel>
     
    <Grid Margin="16,0,0,0" Grid.Column="1">
        <telerik:RadDataForm x:Name="myRadDataForm" ItemsSource="{Binding EtcRegistrationViewModel}" Width="400"/>
    </Grid>

     

    ViewModel

    public class EtcServiceRegistrationViewModel
    {
        private ICollectionView etcRegistrationViewModel = null;
        public ICollectionView EtcRegistrationViewModel
        {
            get
            {
                if (this.etcRegistrationViewModel == null)
                {
                    ObservableCollection<EtcServiceRegistrationModel> etcRegistrationModel = new ObservableCollection<EtcServiceRegistrationModel>();
                    etcRegistrationModel.Add(new EtcServiceRegistrationModel("123-12-12354", new DateTime(0001, 01, 01), new DateTime(0001, 01, 01), false, new DateTime(2018, 12, 15), new DateTime(9999, 12, 31), true));
                    etcRegistrationModel.Add(new EtcServiceRegistrationModel("123-12-12123", new DateTime(2018, 12, 15), new DateTime(9999, 12, 31), true, new DateTime(0001, 01, 01), new DateTime(0001, 01, 01), false));
     
                    this.etcRegistrationViewModel = new QueryableCollectionView(etcRegistrationModel);
                     
                }
                return this.etcRegistrationViewModel;
            }
        }
    }

     

    Model

    public class EtcServiceRegistrationModel : ObservableObject, IEditableObject
    {
        EtcServiceRegistrationData backupEtcServiceRegistrationData;
        private string consumerNumber;
        private DateTime silverCareStartingDate;
        private DateTime silverCareEndingDate;
        private bool silverCareActive;
        private DateTime homeLeakageStartingDate;
        private DateTime homeLeakageEndingDate;
        private bool homeLeakageActive;
     
        public EtcServiceRegistrationModel()
        {
     
        }
     
        public EtcServiceRegistrationModel(string _consumerNumber, DateTime _silverCareStartingDate, DateTime _silverCareEndingDate, bool _silverCareActive, DateTime _homeLeakageStartingDate, DateTime _homeLeakageEndingDate, bool _homeLeakageActive)
        {
            this.backupEtcServiceRegistrationData = new EtcServiceRegistrationData();
            this.backupEtcServiceRegistrationData.consumerNumber = _consumerNumber;
            this.consumerNumber = _consumerNumber;
            this.backupEtcServiceRegistrationData.silverCareStartingDate = _silverCareStartingDate;
            this.silverCareStartingDate = _silverCareStartingDate;
            this.backupEtcServiceRegistrationData.silverCareEndingDate = _silverCareEndingDate;
            this.silverCareEndingDate = _silverCareEndingDate;
            this.backupEtcServiceRegistrationData.silverCareActive = _silverCareActive;
            this.silverCareActive = _silverCareActive;
            this.backupEtcServiceRegistrationData.homeLeakageStartingDate = _homeLeakageStartingDate;
            this.homeLeakageStartingDate = _homeLeakageStartingDate;
            this.backupEtcServiceRegistrationData.homeLeakageEndingDate = _homeLeakageEndingDate;
            this.homeLeakageEndingDate = _homeLeakageEndingDate;
            this.backupEtcServiceRegistrationData.homeLeakageActive = _homeLeakageActive;
            this.homeLeakageActive = _homeLeakageActive;
        }
     
        public struct EtcServiceRegistrationData
        {
            internal string consumerNumber;
            internal DateTime silverCareStartingDate;
            internal DateTime silverCareEndingDate;
            internal bool silverCareActive;
            internal DateTime homeLeakageStartingDate;
            internal DateTime homeLeakageEndingDate;
            internal bool homeLeakageActive;
        }
     
        public string ConsumerNumber
        {
            get
            {
                return consumerNumber;
            }
            set
            {
                consumerNumber = value;
                RaisePropertyChanged(() => this.ConsumerNumber);
            }
        }
     
        public DateTime SilverCareStartingDate
        {
            get
            {
                return silverCareStartingDate;
            }
            set
            {
                silverCareStartingDate = value;
                RaisePropertyChanged(() => this.SilverCareStartingDate);
            }
        }
     
        public DateTime SilverCareEndingDate
        {
            get
            {
                return silverCareEndingDate;
            }
            set
            {
                silverCareEndingDate = value;
                RaisePropertyChanged(() => this.SilverCareEndingDate);
            }
        }
     
        public bool SilverCareActive
        {
            get
            {
                return silverCareActive;
            }
            set
            {
                silverCareActive = value;
                RaisePropertyChanged(() => this.SilverCareActive);
            }
        }
     
        public DateTime HomeLeakageStartingDate
        {
            get
            {
                return homeLeakageStartingDate;
            }
            set
            {
                homeLeakageStartingDate = value;
                RaisePropertyChanged(() => this.HomeLeakageStartingDate);
            }
        }
     
        public DateTime HomeLeakageEndingDate
        {
            get
            {
                return homeLeakageEndingDate;
            }
            set
            {
                homeLeakageEndingDate = value;
                RaisePropertyChanged(() => this.HomeLeakageEndingDate);
            }
        }
     
        public bool HomeLeakageActive
        {
            get
            {
                return homeLeakageActive;
            }
            set
            {
                homeLeakageActive = value;
                RaisePropertyChanged(() => this.HomeLeakageActive);
            }
        }
     
     
        public void BeginEdit()
        {
     
        }
     
        public void CancelEdit()
        {
            ConsumerNumber = this.backupEtcServiceRegistrationData.consumerNumber;
        }
     
        public void EndEdit()
        {
            this.backupEtcServiceRegistrationData.consumerNumber = ConsumerNumber;
        }
    }

     

  2. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    480 posts

    Posted 26 Feb Link to this post

    Hello,

    Thank you for the attached pictures and sample code. 

    I tested the described behavior on my end and I was only able to able to reproduce the scenario if the RadDataForm is placed in a container that measures it with infinity(such as a Grid with Row Height/Column Width set to Auto).

    In the case of the provided sample code, you can check for the following grid:
    <Grid Margin="16,0,0,0" Grid.Column="1">
        <telerik:RadDataForm x:Name="myRadDataForm" ItemsSource="{Binding EtcRegistrationViewModel}" Width="400"/>
    </Grid>

    whether the ColumnDefinition that it is placed in has its Width set to Auto. If that is the case, you can set the ColumnDefinition's Width to "*" or to a fixed value. Can you give this a try and let me know how it goes? 

    I am looking forward to your reply.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. minseok
    minseok avatar
    6 posts
    Member since:
    Mar 2017

    Posted 12 Mar in reply to Vladimir Stoyanov Link to this post

    I'm very thank you.
  4. minseok
    minseok avatar
    6 posts
    Member since:
    Mar 2017

    Posted 12 Mar Link to this post

    Through your refly, I did the following test. Different screens were identified from the same source code.

     

    You will find out if you check the attached picture. I applied your suggestion, and there is no difference between the two codes. However, the screen is displayed differently.

     

    Modified Code #1

    <Border BorderThickness="1,0,1,1" BorderBrush="{telerik:FluentResource ResourceKey=BasicBrush}">
        <Grid Margin="16">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="16"/>
                <ColumnDefinition Width="400"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="16"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
     
            <telerik:RadButton Content="그룹 정보 갱신" HorizontalAlignment="Left" VerticalAlignment="Top" Width="100"/>
             
            <StackPanel Grid.Row="2">
                <telerik:RadGridView x:Name="gvGridView" ItemsSource="{Binding GroupViewModel}" CanUserGroupColumns="False" ShowGroupPanel="False"/>
                <telerik:RadDataPager Source="{Binding Items, ElementName=gvGridView}" DisplayMode="FirstLastPreviousNextNumeric" PageSize="22"/>
            </StackPanel>
     
            <telerik:RadDataForm x:Name="myRadDataForm" Grid.Row="2" Grid.Column="2" ItemsSource="{Binding GroupViewModel}"/>
        </Grid>
    </Border>

     

     

    Different Code #2

    <Border BorderThickness="1,0,1,1" BorderBrush="{telerik:FluentResource ResourceKey=BasicBrush}">
        <Grid Margin="16">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="16"/>
                <ColumnDefinition Width="400"/>
            </Grid.ColumnDefinitions>
            <Grid.RowDefinitions>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
                <RowDefinition Height="Auto"/>
            </Grid.RowDefinitions>
     
            <StackPanel>
                <telerik:RadGridView x:Name="gvGridView" ItemsSource="{Binding EtcRegistrationViewModel}" CanUserGroupColumns="False" ShowGroupPanel="False"/>
                <telerik:RadDataPager Source="{Binding Items, ElementName=gvGridView}" DisplayMode="FirstLastPreviousNextNumeric" PageSize="22"/>
            </StackPanel>
     
            <telerik:RadDataForm x:Name="myRadDataForm" Grid.Column="2" ItemsSource="{Binding EtcRegistrationViewModel}"/>
             
            <Path Data="M130.9,40 L986.01317,40" Height="1" Margin="8" Stretch="Fill" VerticalAlignment="Top" Opacity="0.3" Stroke="{telerik:FluentResource ResourceKey=BasicBrush}" Grid.Row="1" Grid.ColumnSpan="3"/>
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Grid.Row="2" Grid.ColumnSpan="3" Margin="0,8,0,0">
                <telerik:RadButton Content="저장" Width="100"/>
                <telerik:RadButton Content="취소" Margin="8,0,0,0" Width="100"/>
            </StackPanel>
        </Grid>
    </Border>

     

    Thanks.

  5. minseok
    minseok avatar
    6 posts
    Member since:
    Mar 2017

    Posted 12 Mar in reply to minseok Link to this post

    The source code for #1 and #2 above has been changed.
  6. Vladimir Stoyanov
    Admin
    Vladimir Stoyanov avatar
    480 posts

    Posted 15 Mar Link to this post

    Hello,

    Thank you for the update. 

    My current understanding is that with the first code snippet the labels are misaligned. I tested this on my end, however I was not able to reproduce the same behavior. Feel free to correct me, if I am wrong and provide more information about the scenario. 

    I am attaching the sample project which I used for testing purposes. Please, check it out and see how it differs from the setup on your end. Should you need any further assistance, may I kindly ask you to let me know how I can reproduce the observed on your end behavior? You can open a new support ticket and attach a sample project demonstrating the scenario. This will hopefully allow me to investigate the scenario and further assist you.

    I am looking forward to your reply.

    Regards,
    Vladimir Stoyanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top