ColumnControl - Examples

• Demo page #1 - This simple example demonstrates how can you split text into 3 columns.
• Demo page #2 - This example shows how to use fotmating tags and MinColumnsWidth property.
• Demo page #3 - Here you can see how to use TagConstants and ElementsSizes properties.

• CodeProject Article about this control [^]

Demo page #2

Morbi id tortor

Lorem ipsum

Demo page #2 - Source

• Setting ParagraphTags to "" forces control to divide text into multiple columns only after end of paragraph.
• If width of control is less than MinColumnsWidth text will be displayed only in one-column layout.

<cc:ColumnControl runat="server" ColumnCount="3" 
	EnableFormatTags="true" ParagraphTags="" MinColumnsWidth="600">
  
  <h2>Morbi id tortor</h2>
  
  <!--[cc:section]-->
  
  <p>Proin euismod metus gravida ante. 
    <a href="http://www.lipsum.com/" target="_blank">Lorem ipsum</a> dolor sit 
    amet,consectetuer adipiscing elit. Quisque fringilla. Maecenas ullamcorper 
    faucibus nibh. Maecenas tempor, nulla quis euismod pulvinar, justo nisl 
    nonummy dolor, ac interdum nisl tellus at augue. Suspendisse nec libero sit 
    amet augue pulvinar mattis. Aliquam sed massa sed ligula feugiat malesuada. 
    Nulla posuere aliquet metus. Suspendisse consectetuer condimentum justo. 
    Fusce semper aliquam nunc. </p>
  <p>Vivamus porta commodo urna. Etiam hendrerit vehicula purus. Quisque a 
    neque eu ipsum tempor convallis. Sed eget quam. Vestibulum ante ipsum 
    primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam 
    pharetra molestie metus. Fusce sit amet leo. Integer diam. Sed eleifend 
    mattis tortor. Phasellus quis pede. Suspendisse id tellus at turpis 
    fringilla ultricies. Vivamus molestie ante eget risus. Fusce pharetra 
    aliquet purus.</p>
  <p>In hac habitasse platea dictumst. Phasellus ligula. Cum sociis natoque penatibus 
    et magnis dis parturient montes, nascetur ridiculus mus. In dictum sagittis 
    purus. Morbi lorem mauris, ornare ac, condimentum sed, porta a, risus. Sed 
    posuere lacinia nunc. Ut ipsum enim, luctus quis, pulvinar vel, dapibus eu, 
    diam. Phasellus a purus. Morbi malesuada felis. Sed dictum condimentum erat. 
    Nulla lectus nibh, malesuada rhoncus, varius non, cursus eget, turpis.</p>
  
  <!--[/cc:section]-->
  
  <h2>Lorem ipsum</h2>
  
  <!--[cc:section cols=2]-->
  
  <ul>
    <li>Quisque enim nunc, scelerisque eget, pulvinar at.</li>
    <li>Pellentesque pretium vehicula neque. Praesent id 
        orci vel dui fringilla consectetuer.</li>
    <li>Nulla at pede. Nulla sollicitudin consequat metus. 
        Donec adipiscing viverra ante.</li>
  </ul>
  <h3>Etiam nulla quam</h3>
  <ol>
    <li>Nulla sapien massa, elementum vel, semper sed, elementum congue.</li>
  </ol>
  
  <p>Hendrerit in, iaculis feugiat, placerat in, purus. Duis iaculis commodo 
    nulla. Mauris eget quam. Pellentesque habitant morbi tristique senectus et 
    netus et. Aenean molestie risus vel dolor. Pellentesque habitant morbi 
    tristique senectus et netus et malesuada fames ac turpis egestas. Nam 
    venenatis nisl condimentum urna. Nunc felis. Proin elementum. Morbi lorem 
    mi, feugiat vel</p>
    
  <!--[cc:space size=500]-->
  
  <p>Semper in, mi. Malesuada fames ac turpis egestas. Sed mattis rhoncus arcu. 
    Semper in, mi. Suspendisse neque. Nulla suscipit nibh eget dui sagittis 
    mollis. Proin enim. Fusce mauris. Proin eget orci nec mauris cursus 
    tristique. Sed posuere eros. Vestibulum nonummy tincidunt turpis. Aliquam 
    iaculis. Aliquam erat volutpat. Nam rutrum faucibus enim. Etiam pharetra 
    tellus. Fusce eros tellus, gravida id, pretium eget, cursus sit amet, 
    urna. Integer commodo. Etiam tincidunt arcu sit amet dolor.</p>
  
  <p>Pellentesque neque. Sed luctus. Cras lobortis nunc eget felis. Integer 
    pellentesque pede eget nibh. Phasellus laoreet. Sed laoreet tempus felis. 
    Curabitur semper. Nunc elit. Morbi vestibulum mi vitae quam. Quisque 
    interdum sem sit amet elit. Nullam tincidunt enim ac mi volutpat 
    consectetuer. Pellentesque quis velit. Quisque dapibus, quam sit amet 
    sagittis tristique, pede erat euismod libero, ac congue velit eros vel 
    leo. Duis eget quam. Nunc adipiscing.</p>
    
  <!--[/cc:section]-->
  
  <div class="border">Mauris a quam in euismod elementum. Nam mi nulla, 
    placerat in, velit. Nullam et turpis. Quisque congue. Vestibulum mollis, 
    mauris semper dapibus fermentum, felis tellus rutrum pede, ut vehicula 
    mauris sapien et nunc. Sed est pede, cursus et, auctor non, molestie id, 
    mauris etiam ac sapien et mauris pharetra commodo. Sed nec massa 
    <a href="http://www.lipsum.com/" target="_blank">lorem ipsum</a> phasellus 
    nec libero et metus congue adipiscing. Aliquam sit amet metus.</div>
  
</cc:ColumnControl>