Multiple columns in one row.

4 posts, 0 answers
  1. Ole Oscar
    Ole Oscar avatar
    10 posts
    Member since:
    Jan 2015

    Posted 26 Aug 2015 Link to this post

    Hi,

    At the moment it seems like the DataForm can handle only Label, Value pairs.

    I want to have the possibility the create this structure.

    row start

    Label, ​Value <fixed gap>   Label, Value

    row start
    Label, ​Value <fixed gap>   Label, Value

    I was hoping not to use a Table to solve it.

    When I use the CssClass="rdfLabel rdfBlock" and CssClass="rdfFieldValue" on these pairs, then the structure will be Label, Label, Value, Value. Does it exist a css class that will handle this scenario ? I have tried to search for it, but with no luck. Does it exist any documentation on ​the predefined css classes and the use.

     

    Regards

    Ole Oscar Johnsen

  2. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Aug 2015 Link to this post

    Hello Ole,

    Note that the contents of the RadDataForm is placed in a template. You can define the look and feel of the controls in that template depending on your requirements. Please check the online example below. You can use it as a starting point to implement the appearance you describe.

    If you would like more information on the HTML and CSS generated by the RadDataForm control you would find the following article interesting.



    Regards,
    Viktor Tachev
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ole Oscar
    Ole Oscar avatar
    10 posts
    Member since:
    Jan 2015

    Posted 31 Aug 2015 in reply to Viktor Tachev Link to this post

    Hi,

    I know that, but is it possible to do this within the template with your out of the box css classes. If I use the code below, the labels are displayed to the left and then the input filelds to the right.

      <div class="rdfRow">

    <span id="Span1" class="rdfLabel rdfBlock">First name:</span>

    <span id="Span2" class="rdfFieldValue">Firstname</span>

    <span id="Span​3" class="rdfLabel rdfBlock">Last ​name:</span>

    <span id="Span​4" class="rdfFieldValue">​Last name</span>

    </div>

    If I do it with table like this it works, but I don't want to use tabel.

    <td> 

    <div class="rdfRow">
    <span id="Span1" class="rdfLabel rdfBlock">First name:</span>
    <span id="Span2" class="rdfFieldValue">Firstname</span>
    </div>

    </td>

    <td>

    <div class="rdfRow">
    <span id="Span​3" class="rdfLabel rdfBlock">Last ​name:</span>
    <span id="Span​4" class="rdfFieldValue">​Last name</span>
    </div>

    </td>

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 02 Sep 2015 Link to this post

    Hello Ole,

    Note that the rdfBlock class will add display: block to the element it is applied to. Thus, the next element will be displayed on a new line in the browser.

    In order to implement the look described in your initial post you will need to add some custom code. However, you can use the default CSS classes for the most part.

    Check out the attached sample that outlines the approach. Note the Insert and Edit templates.

    Regards,
    Viktor Tachev
    Telerik
Back to Top