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

[minseok]

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;
    }
}

 

[Vladimir Stoyanov]

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

[minseok]

I'm very thank you.

[minseok]

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.

[minseok]

The source code for #1 and #2 above has been changed.

[Vladimir Stoyanov]

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