FilterClearButton in Filtercell

3 posts, 1 answers
  1. Dominik
    Dominik avatar
    14 posts
    Member since:
    Jan 2017

    Posted 10 Feb 2017 Link to this post

    HI,

    I want to add a "FilterClearButton" in every FilterCell. We are changing from Infragistics to Telerik and our users are familiar with that behaviour so I tried to create my own FilterCell but it was not working as expected. Everytime i click in my Filtercell, a EditorElement appears and my FilterClear button is not visible anymore. I think I have done smth wrong.

     

    So has someone here tried anything similar?

    Sincerely,

    Dominik

  2. Answer
    Dimitar
    Admin
    Dimitar avatar
    2951 posts

    Posted 10 Feb 2017 Link to this post

    Hello Dominik,

    Here is a custom filter cell class that adds a button to the right:
    class MyFilterCellElement : GridFilterCellElement
    {
     
        public MyFilterCellElement(GridViewDataColumn column, GridRowElement row) : base(column, row)
        {
     
        }
        protected override Type ThemeEffectiveType
        {
            get
            {
                return typeof(GridFilterCellElement);
            }
        }
        RadButtonElement button = new RadButtonElement();
        protected override void CreateChildElements()
        {
            base.CreateChildElements();
            this.FilterButton.Margin = new Padding(-5, 0, 15, 0);
     
     
            button.ZIndex = 100;
            button.Text = "C";
            button.Click += Button_Click;
            this.Children.Add(button);
        }
     
        private void Button_Click(object sender, EventArgs e)
        {
            foreach (FilterDescriptor item in this.GridControl.FilterDescriptors.ToList())
            {
                if (item.PropertyName == this.ColumnInfo.FieldName)
                {
                    this.GridControl.FilterDescriptors.Remove(item);
                }
            }
     
        }
        protected override SizeF ArrangeOverride(SizeF finalSize)
        {
            var res = base.ArrangeOverride(finalSize);
            var rect = new RectangleF(res.Width - button.DesiredSize.Width, (res.Height - button.DesiredSize.Height) / 2, button.DesiredSize.Width, button.DesiredSize.Height);
            button.Arrange(rect);
            return res;
        }
    }

    To change the cell you need to use the CreateCell event:
    private void RadGridView1_CreateCell(object sender, GridViewCreateCellEventArgs e)
    {
        if (e.CellType == typeof(GridFilterCellElement))
        {
            e.CellElement = new MyFilterCellElement(e.Column as GridViewDataColumn, e.Row);
        }
     
        
    }

    I hope this will be useful.

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

    Posted 13 Feb 2017 in reply to Dimitar Link to this post

    Thanks a lot Dimitar,

     

    that works just great.

     

Back to Top