DataFormDataFields layout

10 posts, 0 answers
  1. Mrn
    Mrn avatar
    29 posts
    Member since:
    Apr 2011

    Posted 19 Jul 2011 Link to this post

    Hello,

    I am defining a DataTemplate within a DataForm this way:

    <telerik:RadWindow.Resources>
              
            <DataTemplate x:Key="formTemplate">
                <Grid x:Name="formGrid" ShowGridLines="True" MinWidth="100">
                    <Grid.RowDefinitions>
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                        <RowDefinition />
                    </Grid.RowDefinitions>
                      
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="*" />
                        <ColumnDefinition Width="300" />
                    </Grid.ColumnDefinitions>
      
                    <telerik:Label Grid.Row="0"
                                   Grid.Column="0"
                                   Grid.ColumnSpan="2"
                                   Margin="15,10,15,10"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Content="Fields in bold are required." />
                      
                    <telerik:Label Grid.Row="1"
                                   Grid.Column="0"
                                   Margin="15,0,0,0"
                                   FontWeight="Bold"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Content="First Name" />
                          
                    <telerik:DataFormDataField x:Name="firstNameDataField" 
                                               Grid.Row="1"
                                               Grid.Column="1"
                                               HorizontalAlignment="Stretch"
                                               VerticalAlignment="Center" 
                                               IsRequired="True" />
      
                    <telerik:Label Grid.Row="2"
                                   Grid.Column="0"
                                   Margin="15,0,0,0"
                                   FontWeight="Bold"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Content="Last Name" />
      
                    <telerik:DataFormDataField x:Name="lastNameDataField" 
                                               Grid.Row="2"
                                               Grid.Column="1"
                                               HorizontalAlignment="Stretch"
                                               VerticalAlignment="Center" 
                                               IsRequired="True" />
      
                    <telerik:Label Grid.Row="3"
                                   Grid.Column="0"
                                   Margin="15,0,0,0"
                                   FontWeight="Bold"
                                   HorizontalAlignment="Left"
                                   VerticalAlignment="Center"
                                   Content="Password" />
      
                    <PasswordBox x:Name="passwordBox" 
                                 Grid.Row="3"
                                 Grid.Column="1"
                                 HorizontalAlignment="Left" Margin="10,10,0,0" VerticalAlignment="Center" Width="120" />
      
                </Grid>
            </DataTemplate>
              
        </telerik:RadWindow.Resources>
          
        <Grid x:Name="LayoutRoot">
            <telerik:RadDataForm x:Name="signUpForm"
                                 AutoGenerateFields="False"
                                 EditTemplate="{StaticResource formTemplate}"
                                 Header="Create New Account" 
                                 Mode="Edit" 
                                 CommandButtonsVisibility="Commit" 
                                 AutoEdit="True" CommitButtonContent="Sign Up" />
              
        </Grid>

    I find that both setting HorizontalAligment = "Stretch" or setting it to "Left" and giving a, let's say, Width="200" in DataFormDataField controls, a sort of "margin" appears to their left, I mean, the more I raise the width, the more the boxes are shifted to the right, I only get them aligned to the left when using normal TextBoxes and the PasswordBox, what is this behaviour due to?

    Thanks in advance
  2. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 19 Jul 2011 Link to this post

    In my experience, setting LabelPosition="Below" helps a lot.




  3. DevCraft banner
  4. Mrn
    Mrn avatar
    29 posts
    Member since:
    Apr 2011

    Posted 19 Jul 2011 Link to this post

    Thanks for your reply, I tried what you said and I get the correct position in the design view of the VS, but it remains shifted to the right at runtime :S
  5. HDC
    HDC avatar
    214 posts
    Member since:
    Dec 2010

    Posted 19 Jul 2011 Link to this post

    I'm not sure, but i think that If your first column is "*" and your second column has a fixed width of 300... when you run your code it will then depend on the size defined on your user control how big that first column really becomes?

  6. Mrn
    Mrn avatar
    29 posts
    Member since:
    Apr 2011

    Posted 19 Jul 2011 Link to this post

    Yes, you're right, but it is in the second column where I place the DataFormDataFields, in that with fixed width :S
  7. Brad
    Brad avatar
    7 posts
    Member since:
    Sep 2011

    Posted 09 Apr 2012 Link to this post

    Hey Mrn - Did you ever get this figured out?  I'm having the same issue.
  8. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1127 posts

    Posted 12 Apr 2012 Link to this post

    Hi Brad,

    Would you please send us a runnable project by opening a support ticket, so that we could debug it on our side and give you an appropriate solution?

    Kind regards,
    Ivan Ivanov
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  9. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 20 Apr 2012 Link to this post

    Hi,

    same problem here, but the "margin" of the DataFormDataField is not a margin.
    It's the space for the text of the Label Property.
    It would be nice to have a property to eliminate or to set the width of the label.

    edit:
    It looks like that the DataFormDataField consits of a Grid with some margins around.
    If you play around with the properties HorizontalAlignment and Width of DataFormDataField you
    realize some strange behavior.
    <telerik:DataFormDataField Grid.Row="0"
                                       Width="60"
                                       HorizontalAlignment="Left"
                                       Grid.Column="2"
                                       DataMemberBinding="{Binding Items, Path=Value, StringFormat='#,##0.00;-#,##0.00;', Mode=OneWay}"
                                       >
                <telerik:DataFormDataField.Label>
                    <Label Width="0" HorizontalAlignment="Left"
                           Content="Test Test Test" />
                </telerik:DataFormDataField.Label>
            </telerik:DataFormDataField>


    kind regards
    Hubert
  10. Ivan Ivanov
    Admin
    Ivan Ivanov avatar
    1127 posts

    Posted 25 Apr 2012 Link to this post

    Hello Hubert,

    DataFormDataField's template is hosted in a Grid panel with the following definition:
    <Grid>
       <Grid.ColumnDefinitions>
           <ColumnDefinition Width="*"/>
           <ColumnDefinition Width="2*"/>
           <ColumnDefinition Width="24"/>
       </Grid.ColumnDefinitions>
        . . . 
    </Grid>
    The first column is the "Label column", the second one contains the editor control and the third one displays the "property description icon" if such is needed. Apparently the first two columns do not have hardcoded width values, so that it is utterly expected to stretch when page is resized. In case that you need to customize this, you can easily modify DataFormDataField's template in Expression Blend.

    Kind regards,
    Ivan Ivanov
    the Telerik team
    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
  11. Hubert
    Hubert avatar
    19 posts
    Member since:
    Feb 2012

    Posted 27 Apr 2012 Link to this post

    Hello Ivan,

    thanks for the advice.
    It took me some time to get the template, because i'am not the best friend
    of Expression Blend. I think we should spend some more time together.

    kind regards
    Hubert
Back to Top
DevCraft banner