Add Rad Controls to rad item collections

10 posts, 0 answers
  1. Steve Batten
    Steve Batten avatar
    8 posts
    Member since:
    Jan 2010

    Posted 19 Jun 2018 Link to this post

    Hello ,

    how to add new controls in Rad item collection editor,I have list of controls but i need to add RadCheckedDropdownList in collection and use it in RadRibbonTab of RadRibbonForm.

    Thanks in Advance.

  2. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3217 posts

    Posted 19 Jun 2018 Link to this post

    Hello, Steve,  

    RadCheckedDropDownList uses the RadCheckedDropDownListCollectionEditor for its Items collection. By default, only the RadCheckedListDataItem and DescriptionTextCheckedListDataItem are available because they are both typeof(RadCheckedListDataItem) which is the accepted type by the Items collection. if you need to display some of your custom RadCheckedListDataItems for example, it is necessary to implement a custom RadCheckedDropDownListCollectionEditor as follows:
        public RadForm1()
        {
            InitializeComponent();
        }
     
        public class CustomRadCheckedDropDownList : RadCheckedDropDownList
        {
            [DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
            Editor(typeof(CustomRadCheckedDropDownListCollectionEditor), typeof(UITypeEditor)),
            Category(Telerik.WinControls.RadDesignCategory.DataCategory)]
            [Description("Gets a collection representing the items contained in this RadCheckedDropDownList.")]
            public new RadCheckedListDataItemCollection Items
            {
                get
                {
                    return (RadCheckedListDataItemCollection)this.DropDownListElement.Items;
                }
            }
        }
     
        public class CustomRadCheckedDropDownListCollectionEditor : Telerik.WinControls.Design.RadCheckedDropDownListCollectionEditor
        {
            public CustomRadCheckedDropDownListCollectionEditor(Type itemType) : base(itemType)
            {
            }
     
            protected override Type[] CreateNewItemTypes()
            {
                return new Type[] { typeof(RadCheckedListDataItem), typeof(DescriptionTextCheckedListDataItem), typeof(MyRadCheckedListDataItem) };
            }
        }
     
        public class MyRadCheckedListDataItem : RadCheckedListDataItem
        {
        }
    }



    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Steve Batten
    Steve Batten avatar
    8 posts
    Member since:
    Jan 2010

    Posted 19 Jun 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    I also need to add DateTimePicker to Item Collection can you please help?

     

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3217 posts

    Posted 20 Jun 2018 Link to this post

    Hello, Steve,  

    RadDateTimePicker is not a derivative of RadCheckedListDataItem which is the expected item's type in the Items collection. If I understand your requirement correctly you need to display a date time picker in the popup items. Since the RadCheckedDropDownList is a derivative of the RadDropDownList, you can easily create custom items which contain the desired inner elements, e.g. RadDateTimePickerElement. Here is a sample code snippet which result is illustrated in the attached screenshot:

    public RadForm1()
    {
        InitializeComponent();
     
        this.radCheckedDropDownList1.CreatingVisualListItem += radCheckedDropDownList1_CreatingVisualListItem;
    }
     
    private void radCheckedDropDownList1_CreatingVisualListItem(object sender, CreatingVisualListItemEventArgs args)
    {
        args.VisualItem = new MyRadCheckedListVisualItem();
    }
     
    public class CustomRadCheckedDropDownList : RadCheckedDropDownList
    {
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content),
        Editor(typeof(CustomRadCheckedDropDownListCollectionEditor), typeof(UITypeEditor)),
        Category(Telerik.WinControls.RadDesignCategory.DataCategory)]
        [Description("Gets a collection representing the items contained in this RadCheckedDropDownList.")]
        public new RadCheckedListDataItemCollection Items
        {
            get
            {
                return (RadCheckedListDataItemCollection)this.DropDownListElement.Items;
            }
        }
    }
     
    public class CustomRadCheckedDropDownListCollectionEditor : Telerik.WinControls.Design.RadCheckedDropDownListCollectionEditor
    {
        public CustomRadCheckedDropDownListCollectionEditor(Type itemType) : base(itemType)
        {
        }
     
        protected override Type[] CreateNewItemTypes()
        {
            return new Type[] { typeof(RadCheckedListDataItem), typeof(DescriptionTextCheckedListDataItem), typeof(MyRadCheckedListDataItem) };
        }
    }
     
    public class MyRadCheckedListDataItem : RadCheckedListDataItem
    {
    }
     
    public class MyRadCheckedListVisualItem : RadCheckedListVisualItem
    {
        RadDateTimePickerElement dtPicker;
     
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            dtPicker = new RadDateTimePickerElement();
            this.Children.Add(dtPicker);
            dtPicker.ValueChanged += dtPiceker_ValueChanged;
        }
     
        private void dtPiceker_ValueChanged(object sender, EventArgs e)
        {
            this.Data.Value = dtPicker.Value;
        }
     
        public override void Synchronize()
        {
            base.Synchronize();
            this.dtPicker.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
            if (this.Data is MyRadCheckedListDataItem)
            {
                dtPicker.Visibility = Telerik.WinControls.ElementVisibility.Visible;
                if (this.Data.Value != null)
                {
                    dtPicker.ValueChanged -= dtPiceker_ValueChanged;
                    this.dtPicker.Value = (DateTime)this.Data.Value;
                    dtPicker.ValueChanged += dtPiceker_ValueChanged;
                }
            }
        }
    }

    The seventh item is the custom type: 



    If it is not the exact requirement please specify in details what is the custom requirement that you are trying to achieve. Thus, we would be able to think about a suitable solution and assist you further.  


    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Steve Batten
    Steve Batten avatar
    8 posts
    Member since:
    Jan 2010

    Posted 21 Jun 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    I tried to add RaddateTimePicker but I am not able to convert  RaddateTimePicker  type to RadItem

     

      this.radRibbonBarButtonGroup2.Items.AddRange(new Telerik.WinControls.RadItem[] {
                this.checkBoxLastExport,
                this.checkBoxDaterange,
                this.checkBoxRefnumber,
                this.checkBoxReportType,
               (Telerik.WinControls.RadItem) this.dateTimePickerFrom,
                this.dateTimePickerTo,
                });

    It gives error  Cannot convert type 'Telerik.WinControls.UI.RadDateTimePicker' to 'Telerik.WinControls.RadItem'

    Can you please assist?

    Thanks in Advance.

     

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3217 posts

    Posted 21 Jun 2018 Link to this post

    Hello, Steve,   

    RadDateTimePicker is a control. The RadRibbonBarButtonGroup.Items collection expects elements. You can add a RadDateTimePickerElement:
    this.radRibbonBarGroup1.Items.Add(new RadDateTimePickerElement());

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  7. Steve Batten
    Steve Batten avatar
    8 posts
    Member since:
    Jan 2010

    Posted 27 Jun 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hello Dess,

    I have added this code in One class and tried to add it in itemcollection of Groupbox but it is not allowing

     

    this.radRibbonBarGroup.Items.Add(new CustomRadCheckedDropDownList); gives errorcannot convert from 'CustomRadCheckedDropDownList' to 'Telerik.WinControls.RadItem' 

  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3217 posts

    Posted 28 Jun 2018 Link to this post

    Hello, Steve,   

    According to the provided information it seems that this is absolutely the same case as the previously described one. RadCheckedDropDownList is a control. The RadRibbonBarButtonGroup.Items collection expects elements. It doesn't accept controls. You can add a RadCheckedDropDownListElement
    this.radRibbonBarGroup1.Items.Add(new RadCheckedDropDownListElement());

    I hope this information helps. If you have any additional questions, please let me know. 

    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  9. Steve Batten
    Steve Batten avatar
    8 posts
    Member since:
    Jan 2010

    Posted 04 Jul 2018 Link to this post

    Hello Dess, your information was helpful for me.

    I have another question  can we use RadRibbonBar as TabBar, Means same as Tab Pages in Tab Control?.Every Tab Contol will have different view?

    Thanks in advance.

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3217 posts

    Posted 05 Jul 2018 Link to this post

    Hello, Steve,    

    By design, RadRibbonBar builds user interfaces similar to those used in Microsoft Office. It is supposed to offer a toolset of options arranged in different tabs. There is no container at the bottom that will be changed when you select a specific tab. RadPageView is more appropriate for this case. Additional information for it is available in the online documentation: https://docs.telerik.com/devtools/winforms/pageview/overview If you need to keep the rich UI provided by RadRibbonBar and show different pages according to the selected tab in the ribbon, you can use it in combination with RadPageView and hide the page tabs. Then, handle the RadRibbonBar.CommandTabSelected event and set the RadPageView.SelectedPage property to the relevant page: 
    public RadForm1()
    {
        InitializeComponent();
          
        foreach (RadPageViewPage page in this.radPageView1.Pages)
        {
            page.Item.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
        }
        this.radRibbonBar1.CommandTabSelected += radRibbonBar1_CommandTabSelected;
    }
     
    private void radRibbonBar1_CommandTabSelected(object sender, CommandTabEventArgs args)
    {
        int tabIndex = this.radRibbonBar1.CommandTabs.IndexOf(args.CommandTab);
        if (tabIndex > -1 && this.radPageView1.Pages.Count > tabIndex)
        {
            this.radPageView1.SelectedPage = this.radPageView1.Pages[tabIndex];
        }
    }

    I hope this information helps. If you have any additional questions, please let me know. 
     
     
    Regards,
    Dess
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top