Multiple columns in one row.

[Ole Oscar]

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

[Viktor Tachev]

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.

• http://demos.telerik.com/aspnet-ajax/dataform/data-editing/manual-crud-operations/defaultcs.aspx

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

• http://docs.telerik.com/devtools/aspnet-ajax/controls/dataform/appearance-and-styling/html-output-and-css-styling

Regards,
Viktor Tachev
Telerik

[Ole Oscar]

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>

[Viktor Tachev]

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