How to add a RadToggleSwitch column in winform gridview

17 posts, 4 answers
  1. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 07 Oct 2017 Link to this post

    Hi Telerik Team,

    I am trying to add a RadToggleSwitch column in a WinForm GridView with boolean value but I am unable to figure it out on how to do that.

    Could you please provide me the sample code or assist me in doing so?

    Thank you in advance!

    Best Regards,
    Ahmed
  2. Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 09 Oct 2017 Link to this post

    Hello Ahmed,

    Here is the code for the desired column (the approach is taken from here):
    public class ToggleSwitchCellElement : GridDataCellElement
    {
        public ToggleSwitchCellElement(GridViewColumn column, GridRowElement row) : base(column, row)
        {
        }
     
        RadToggleSwitchElement toggleSwitchElement = new RadToggleSwitchElement();
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.Children.Add(toggleSwitchElement);
        }
        protected override void SetContentCore(object value)
        {
            base.SetContentCore(value);
            if (this.Value != null && this.Value != DBNull.Value)
            {
                this.toggleSwitchElement.Value = (bool)Value;
            }
        }
        public override bool IsCompatible(GridViewColumn data, object context)
        {
            return data is ToggleSwitchColumn && context is GridDataRowElement;
        }
        public override void Attach(GridViewColumn data, object context)
        {
            base.Attach(data, context);
            toggleSwitchElement.ValueChanged += ToggleSwitchElement_ValueChanged;
        }
        public override void Detach()
        {
            toggleSwitchElement.ValueChanged -= ToggleSwitchElement_ValueChanged;
            base.Detach();
     
        }
        private void ToggleSwitchElement_ValueChanged(object sender, EventArgs e)
        {
            this.Value = toggleSwitchElement.Value;
        }
    }
    public class ToggleSwitchColumn : GridViewDataColumn
    {
        public ToggleSwitchColumn(string fieldName) : base(fieldName)
        {
        }
     
        public override Type GetCellType(GridViewRowInfo row)
        {
            if (row is GridViewDataRowInfo)
            {
                return typeof(ToggleSwitchCellElement);
            }
            return base.GetCellType(row);
        }
    }

    I hope this will be useful.  

    Regards,
    Dimitar
    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. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 23 Oct 2017 in reply to Dimitar Link to this post

    Thanks for reply, Dimitar

    How to enable RadToggleSwitch filtering option

    Thank you in advance!

    Best Regards,
    Ahmed

  4. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 23 Oct 2017 in reply to Dimitar Link to this post

    How to pass "OnText" and "OnText" values as parameters on calling ToggleSwitchColumn
  5. Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 24 Oct 2017 Link to this post

    Hello Ahmed,

    To enable the filtering change the custom column class to inherit GridViewCheckBoxColumn. 

    I am not sure what are you asking about in your second post. Could you please elaborate?

    I am looking forward to your reply.

    Regards,
    Dimitar
    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.
  6. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 24 Oct 2017 in reply to Dimitar Link to this post

    I want to pass "OnText" and "OffText" properties as parameters on calling ToggleSwitchColumn as follows:

    ToggleSwitchColumn customColumn = new ToggleSwitchColumn("FieldName", "OnText", "OffText");

  7. Answer
    Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 25 Oct 2017 Link to this post

    Hi Ahmed,

    Just create another constructor:
    public class ToggleSwitchColumn : GridViewCheckBoxColumn
    {
        public string OnText { get; set; }
        public string OffText { get; set; }
        public ToggleSwitchColumn(string fieldName, string onText, string offText) : base(fieldName)
        {
            this.OnText = onText;
            this.OffText = offText;
        }
     
        public ToggleSwitchColumn(string fieldName) : base(fieldName)
        {
        }
     
        public override Type GetCellType(GridViewRowInfo row)
        {
            if (row is GridViewDataRowInfo)
            {
                return typeof(ToggleSwitchCellElement);
            }
         
            return base.GetCellType(row);
        }
    }

    Should you have any other questions do not hesitate to ask.

    Regards,
    Dimitar
    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.
  8. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 25 Oct 2017 in reply to Dimitar Link to this post

    Hello Dimitar,

    On passing these two values ("onText" and "offText"), I want to set them for the "OnText" and "OffText" properties of toggleSwitchElement as follows:

    toggleSwitchElement.OnText = onText;
    toggleSwitchElement.OffText = offText;

     

    Thank you in advance!

    Best Regards,
    Ahmed

  9. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3005 posts

    Posted 27 Oct 2017 Link to this post

    Hello, Ahmed,    

    Thank you for writing back. 

    In order to specify the On/Off text for each RadToggleSwitchElement, you can specify the RadToggleSwitchElement.OnElement.Text and RadToggleSwitchElement.OffElement.Text properties in the SetContentCore method of the custom GridDataCellElement. Here is the modified code snippet: 
    protected override void SetContentCore(object value)
    {
        base.SetContentCore(value);
        if (this.Value != null && this.Value != DBNull.Value)
        {
            this.toggleSwitchElement.Value = (bool)Value;
            ToggleSwitchColumn column = this.ColumnInfo as ToggleSwitchColumn;
            if (this.toggleSwitchElement.Value == true)
            {
                this.toggleSwitchElement.OnElement.Text = column.OnText;
            }
            else
            {
                this.toggleSwitchElement.OffElement.Text = column.OffText;
            }
        }
    }

    If you have any further questions, I would recommend you to submit a support ticket where the threads are handled according to license and time of posting. This is the best way to reach our support staff.

    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.
  10. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 28 Oct 2017 Link to this post

    Thanks for reply, Dess

     

    On this new custom ToggleSwitchColumn, How to implement ElementVisibility for each cell conditionally based on another cell value?

     

    Could you please provide me the sample code or assist me in doing so?

     

    Thank you in advance!

    Best Regards,
    Ahmed

  11. Answer
    Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 30 Oct 2017 Link to this post

    Hello Ahmed,

    You can use the CellFormatting event:
    private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
    {
        var cell = e.CellElement as ToggleSwitchCellElement;
        if (cell != null)
        {
            var value = e.Row.Cells[2].Value.ToString();
            if (value == "Sam")
            {
                cell.ToggleSwitchElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
                cell.Text = "";
            }
            else
            {
                cell.ToggleSwitchElement.Visibility = Telerik.WinControls.ElementVisibility.Visible;
            }
        }
    }

    And you need to expose the ToggleSwitchElement in the custom cell class (make a public property)

    Should you have any other questions do not hesitate to ask.

    Regards,
    Dimitar
    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.
  12. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 30 Oct 2017 in reply to Dimitar Link to this post

    Thanks for reply, Dess

    But to expose the ToggleSwitchElement in the custom cell class (make a public property)?

    Thank you in advance!

    Best Regards,
    Ahmed

  13. Answer
    Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 31 Oct 2017 Link to this post

    Hi Ahmed,

    Add the following property to the custom cell element class:
    public RadToggleSwitchElement ToggleSwitchElement
    {
        get
        {
            return this.toggleSwitchElement;
        }
    }

    Do not hesitate to contact us if you have other questions.
     
    Regards,
    Dimitar
    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.
  14. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 31 Oct 2017 Link to this post

    Thanks for help, Dimitar

    I want to set filtering programmatically on this custom ToggleSwitchColumn,
    I want a sample code on how to implement this?

    Thank you in advance!

    Best Regards,
    Ahmed

  15. Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 01 Nov 2017 Link to this post

    Hello Ahmed,

    You can just add a filter descriptor:
    var customColumn = new ToggleSwitchColumn("Bool");
    customColumn.Name = "toggleColumn";
     
    this.radGridView1.Columns.Add(customColumn);
     
    this.radGridView1.FilterDescriptors.Add("Bool", Telerik.WinControls.Data.FilterOperator.IsEqualTo, true);

    Do not hesitate to contact us if you have other questions.
     
    Regards,
    Dimitar
    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.
  16. Ahmed
    Ahmed avatar
    29 posts
    Member since:
    Dec 2015

    Posted 01 Nov 2017 in reply to Dimitar Link to this post

    Thanks for reply, Dimitar

    I have applied this code but with no any effect on the gridview, no filtering is done?!

    Thank you in advance!
    Best Regards,
    Ahmed

     

  17. Dimitar
    Admin
    Dimitar avatar
    2512 posts

    Posted 02 Nov 2017 Link to this post

    Hello Ahmed,

    I have attached my test project to show you how this works.

    Regards,
    Dimitar
    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