LabelMultilineTextBox with validation

[superold]

Hi.

I am creating the following control which has a label, a textbox and another label which can be hidden or shown.

Label1ForTitleBold Label2ForValidationRed
_________________________________
Multiline                       |
textbox                         |	
________________________________|

I've started with this but got stuck on setting the height of the textbox.

    public class LabelMultilineTextBox : RadTextBox
    {
        private TextPrimitive title = new TextPrimitive();
        private TextPrimitive validation = new TextPrimitive();

        public LabelMultilineTextBox()
        {
            this.Size = new Size(425, 60);
            this.MaxLength = 1024;
            this.Multiline = true;
            this.ScrollBars = System.Windows.Forms.ScrollBars.Vertical;
            this.title.Text = "Title";
            this.validation.Text = "* Validation";
        }

        public string TitleText
        {
            get { return this.title.Text; }
            set
            {
                this.title.Text = value.Trim();
                this.Invalidate();
            }
        }

        public string ValidationText
        {
            get { return this.validation.Text; }
            set
            {
                string text = value.Trim();

                if (text.StartsWith("*"))
                {
                    this.validation.Text = text;
                }
                else
                {
                    this.validation.Text = "* " + text;
                }

                this.Invalidate();
            }
        }

        public bool ValidationVisible
        {
            get { return this.validation.Visibility == ElementVisibility.Visible; }
            set
            {
                if (value)
                {
                    this.validation.Visibility = ElementVisibility.Visible;
                }
                else
                {
                    this.validation.Visibility = ElementVisibility.Collapsed;
                }
            }
        }

        protected override void CreateChildItems(RadElement parent)
        {
            base.CreateChildItems(parent);

            RadTextBoxElement element = this.RootElement.Children[0] as RadTextBoxElement;

            element.Size = new Size(425, 46);

            this.RootElement.Children.Clear();

            BoxLayout layoutTexts = new BoxLayout();
            layoutTexts.Orientation = Orientation.Horizontal;

            layoutTexts.Children.Add(title);
            layoutTexts.Children.Add(validation);

            BoxLayout layout = new BoxLayout();
            layout.Orientation = Orientation.Vertical;

            layout.Children.Add(layoutTexts);
            layout.Children.Add(element);

            this.RootElement.Children.Add(layout);
        }
    }

1. Has the coming SP2 Telerik scrollbars? looks kind of weird with standard scrollbars

2. How do I set the default height of the textbox? Size does not work

3. The createchildelements adds the labels UNDER the textbox (to see it set this.Multiline = false)

4. How do I create a theme (in XML please) which can set the styles of the title label (bold) and validation label (red) differently using Themes?

5. How can I bind the size of the TextBox (width) to the size of this control?

Thanks!

- jorge

[Boyko Markov]

Hello Jorge Delgado-Lopez,

I have modified a bit your sample you have sent me and now the two text primitives are shown over the textboxitem.

 public class LabelMultilineTextBox : RadControl
    {
        private TextPrimitive title;
        private TextPrimitive validation;

        public LabelMultilineTextBox()
        {
            this.Size = new Size(425, 60);
            this.UseNewLayoutSystem = true;
        }

        public string TitleText
        {
            get {
                EnsureChildItems();
                return this.title.Text;
            }
            set
            {
                EnsureChildItems();
                this.title.Text = value.Trim();
                this.Invalidate();
            }
        }

        public string ValidationText
        {
            get { EnsureChildItems();
                return this.validation.Text; }
            set
            {
                EnsureChildItems();
                string text = value.Trim();

                if (text.StartsWith("*"))
                {
                    this.validation.Text = text;
                }
                else
                {
                    this.validation.Text = "* " + text;
                }

                this.Invalidate();
            }
        }

        public bool ValidationVisible
        {
            get { EnsureChildItems();
                return this.validation.Visibility == ElementVisibility.Visible; }
            set
            {
                EnsureChildItems();
                if (value)
                {

                    this.validation.Visibility = ElementVisibility.Visible;
                }
                else
                {
                    this.validation.Visibility = ElementVisibility.Collapsed;
                }
            }
        }

        protected override void CreateChildItems(RadElement parent)
        {
            base.CreateChildItems(parent);

            LabelMultilineTextBoxElement label = new LabelMultilineTextBoxElement();
            this.validation = label.Validation;
            this.title = label.Title;

            this.RootElement.Children.Add(label);
        }
    }

    public class LabelMultilineTextBoxElement : RadItem
    {
        private TextPrimitive title = new TextPrimitive();
        private TextPrimitive validation = new TextPrimitive();

        public LabelMultilineTextBoxElement()
        {
            this.title.Text = "Title";
            this.validation.Text = "* Validation";
        }

        public TextPrimitive Title
        {
            get
            {
                return this.title;
            }
        }

        public TextPrimitive Validation
        {
            get
            {
                return this.validation;
            }
        }

        protected override void CreateChildElements()
        {
            base.CreateChildElements();

            BoxLayout layoutTexts = new BoxLayout();
            layoutTexts.Orientation = Orientation.Horizontal;
            layoutTexts.StretchVertically = false;

            layoutTexts.Children.Add(title);
            layoutTexts.Children.Add(validation);

            BoxLayout layout = new BoxLayout();
            layout.Orientation = Orientation.Vertical;

            layout.Children.Add(layoutTexts);
            layout.Children.Add(new RadTextBoxItem());

            this.Children.Add(layout);
        }
    }

As in MS TextBox you cannot set a default height. The height of a text box depends on the height of its Font. The scrollbars in the text box cannot be changed. We use the standard MS TextBox hosted in RadTextBox so the behavior you see comes from the standard text box, i.e we cannot change the themes of the textBox's scrollbars. You do not have to bind the textbox size to the control's one. The textbox is added as a child of the vertical box layout whose horizontal stretch is true hence the textBox's horizontal stretch is true, I mean the StretchHorizontally property.

To design a control in Visual Style Builder you will need to create a special class and appy it as an attribute.
Example of such class is:

 public class RadCheckBoxStyleBuilderData : RadControlDesignTimeData
    {
        public RadCheckBoxStyleBuilderData()
        { }

        public RadCheckBoxStyleBuilderData(string name)
            : base(name)
        { }

        public override ThemeDesignedControlList GetThemeDesignedControls(System.Windows.Forms.Control previewSurface)
        {
            RadCheckBox button = new RadCheckBox();

            button.Size = new Size(80, 20);
            button.AutoSize = true;
            button.IsChecked = true;

            button.Text = "RadCheckBox";

            RadCheckBox buttonStructure = new RadCheckBox();
            button.AutoSize = true;

            buttonStructure.Text = "RadCheckBox";

            ThemeDesignedControl designed = new ThemeDesignedControl(button, buttonStructure.RootElement);
            designed.MainElementClassName = typeof(RadCheckBoxElement).FullName;
            ThemeDesignedControlList res = new ThemeDesignedControlList();

            res.Add(designed);

            return res;
        }
    }

How to apply it to your control's class:

      [RadThemeDesignerData(typeof(RadCheckBoxStyleBuilderData))]
    public class RadCheckBox : RadToggleButton
    [ToolboxItem(true)]
    [Description("Enables the user to select or clear the associated option")]

I hope this helps.

Please write me back if you need more instructions.


All the best,
Boyko Markov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[superold]

i am stunned by your support service. this is great. thanks!

[superold]

Hi,  

A couple of questions:

1. The RadTextBoxItem does not have borders. I have changed it to a RadTextBoxElement which does, but it does not play well with me. 

layout.Children.Add(new RadTextBoxElement()); 

Raises an Stack Overflow exception.

Do I need to create the complete RadTextBoxElement myself? more or less a copy of the complete radtextboxelement class?

2. The two labels, title and validation have different styles (validation is red, title is bold) but i can only set them by path right? that is the style will be applied to both labels. Do I then have to put the validation label on another container to get to it?

Thanks,

- jorge

[Boyko Markov]

Hi Jorge Delgado-Lopez,

Thank you for contacting me.

You can add a BorderPrimitive if you need borders. I've suggested you to use the RadTextBoxItem because  RadTextBoxElement is much more complicated. If you want to create a special style for some element you have to set its Class property, which is used by the Visual Style Builder to uniquely identify an element. This would help you to create different skins for the two labels.

If you need more instructions, write me back.

Sincerely yours,
Boyko Markov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[superold]

OK.. so I must recreate the CreateChildItems function found on RadTextBoxElement.

Sounds easy enough. You see, Since we are several developers I need to make them be consistant on their UI parts, which they are not, believe me I tried. So I decided to create a set of controls based on telerik which can be used without having to be able to read and remember specifications : )

Thanks for the help,

- jorge 

[Boyko Markov]

Hello Jorge Delgado-Lopez,

Well it is indeed really simple to add a border - just write the following in the CreateChildElements method of LabelMultilineTextBoxElement:

            BorderPrimitive border = new BorderPrimitive();
      this.Children.Add(border);

You can take a look at the following code which is adding a border to the down area of the control where is the textBox:

   public class LabelMultilineTextBoxElement : RadItem
    {
        private TextPrimitive title = new TextPrimitive();
        private TextPrimitive validation = new TextPrimitive();
        private RadTextBoxItem item = new RadTextBoxItem();

        public LabelMultilineTextBoxElement()
        {
            this.title.Text = "Title";
            this.validation.Text = "* Validation";
        }

        public TextPrimitive Title
        {
            get
            {
                return this.title;
            }
        }

        public TextPrimitive Validation
        {
            get
            {
                return this.validation;
            }
        }

        protected override void CreateChildElements()
        {
            base.CreateChildElements();

            BoxLayout layoutTexts = new BoxLayout();
            layoutTexts.Orientation = Orientation.Horizontal;
            layoutTexts.StretchVertically = false;

            layoutTexts.Children.Add(title);
            layoutTexts.Children.Add(validation);

            BoxLayout layout = new BoxLayout();
            layout.Orientation = Orientation.Vertical;

            layout.Children.Add(layoutTexts);

            BorderPrimitive border = new BorderPrimitive();
            border.GradientStyle = GradientStyles.Solid;

            layout.Children.Add(border);
            border.Children.Add(item);

            item.Multiline = true;
            this.RadPropertyChanged += new RadPropertyChangedEventHandler(LabelMultilineTextBoxElement_RadPropertyChanged);
            item.Margin = new Padding(2, 2, 1, 1);
            this.Children.Add(layout);
        }

        void LabelMultilineTextBoxElement_RadPropertyChanged(object sender, RadPropertyChangedEventArgs e)
        {
            if (e.Property == BoundsProperty)
            {
                Rectangle rect = item.Parent.Bounds;

                item.MaxSize = new Size(rect.Width - 4, rect.Height - 3);
                item.HostedControl.MaximumSize = new Size(rect.Width - 4, rect.Height - 3);

            }
        }
    }

As you see I've touched a bit the items hierarchy, which we use here and I set explicitly the size of the internal textbox.

I hope this helps. If you need more instructions I'll be glad to help you.

Greetings,
Boyko Markov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.