This is a migrated thread and some comments may be shown as answers.

Multiple columns in one row.

3 Answers 65 Views
DataForm
This is a migrated thread and some comments may be shown as answers.
Ole Oscar
Top achievements
Rank 1
Ole Oscar asked on 26 Aug 2015, 02:35 PM

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

3 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 28 Aug 2015, 12:36 PM
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
0
Ole Oscar
Top achievements
Rank 1
answered on 31 Aug 2015, 07:49 AM

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>

0
Viktor Tachev
Telerik team
answered on 02 Sep 2015, 01:44 PM
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
Tags
DataForm
Asked by
Ole Oscar
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Ole Oscar
Top achievements
Rank 1
Share this question
or