Three times a column

March 26, 2008 17:09 by Rob

For a client i needed a ASP.Net control that showed its contents in multiple columns. The CSS requirements forced me to develop a custom repeater for it, since the normal ASP.Net controls didn't suit me. I decided to share it with you, so here it is:

This templated databound control will collect items in multiple css div's when rendering. Provide a collection of css classes to indicate the columns (in this example, 3 divs). Rendering will be done from left to right, top to bottom while iterating over the div's.

+------++-------++-------+
| one  || two   || three |
| four || five  ||       |
+------++-------++-------+

[code] public class MultiColumnRepeater : Repeater
    {
        private string _columnClasses;

        /// <summary>
        /// Specifies the amount of columns and their css classes
        /// </summary>
        /// <example>
        /// To create 2 columns, specify "column_left,column_right".
        /// </example>
        public string ColumnClasses
        {
            get { return _columnClasses;  }
            set { _columnClasses = value;  }
        }

        protected override void RenderChildren(HtmlTextWriter writer)
        {
            //iterate over the different items.
            string[] classes = _columnClasses.Split(',');
            for (int column = 0; column < classes.Length; column++)
            {
                writer.AddAttribute(HtmlTextWriterAttribute.Class, classes[column]);
                writer.RenderBeginTag(HtmlTextWriterTag.Div);
               
                //iterate over all children, and only write the ones for the current columns.
                int index = 0;
                foreach (Control control in this.Controls)
                {
                    if (index % classes.Length == column)
                    {
                        control.RenderControl(writer);
                    }
                    index++;
                }

                writer.RenderEndTag();
                writer.Write(writer.NewLine);
            }
        }
    } [/code]


Be the first to rate this post

  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:
Categories: ASP.Net | C#
Actions: E-mail | Permalink | Comments (0) | Comment RSSRSS comment feed
Comments are closed