Add a filter to the command column in the RadGridView

4 posts, 0 answers
  1. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 20 Aug Link to this post

    Hi.

    I have a RadGridView object named rgvLinkList that contains a GridViewCommandColumn. I use a table that is read from an Access database as the data source (but I don't show all the columns in the database in the grid, I hide some). Then I add a command column to the grid, and take the button text in each row from another column (one of the hidden columns) in the grid.

    My problem is: I want to add a filter to the command column, I tried to do something similar to the one described at the address below but failed.
    https://www.telerik.com/forums/filtering-on-a-command-column#ZuNrDBneqEmAi9qmv8ZXtQ

    The method I use for setting data source, adding command column and hiding some columns:

    public void fillRgvWithLinks(RadGridView source)
            {
                string msg = "";
                try
                {
                    int i = 0;
                    source.DataSource = IOC.linksData.getAllLinks(out msg);
                    source.Columns[i++].HeaderText = "Sıra No";             // 0
                    source.Columns[i++].HeaderText = "Ana Grup";            // 1
                    source.Columns[i++].HeaderText = "Alt Grup";            // 2
                    source.Columns[i++].HeaderText = "Sürüm";               // 3 hide this
                    source.Columns[i++].HeaderText = "Başlık";              // 4
                    source.Columns[i++].HeaderText = "Adres";               // 5 hide this
                    source.Columns[i++].HeaderText = "Doğrulama Url";       // 6 hide this
                    source.Columns[i++].HeaderText = "Açıklama";            // 7 hide this
                    source.Columns[i++].HeaderText = "Anahtar Kelimeler";   // 8 hide this
                    source.Columns[i++].HeaderText = "Komutlar";            // 9 hide this
                    source.Columns.Add(AddCommandColumnToRgv());
                    foreach (var item in source.Columns)
                    {
                        if (item.Index == 0 || item.Index == 1 || item.Index == 2 || item.Index == 10) { continue; }
                        item.IsVisible = false;
                    }
                }
                catch (Exception ex)
                {
                    msg = ex.Message.ToString();
                }
            }

     

    Add column method:

    public static CustomCommandColumn AddCommandColumnToRgv()
            {
                CustomCommandColumn CommandColumn = new CustomCommandColumn();
                CommandColumn.Name = "LinkButon";
                CommandColumn.HeaderText = "Linke Git";
                CommandColumn.UseDefaultText = false;
                CommandColumn.FormatInfo = new System.Globalization.CultureInfo("tr-TR");
                return CommandColumn;
            }

     

    CustomCommandColumn class:

    public class CustomCommandColumn : GridViewCommandColumn
        {
            public CustomCommandColumn(): base()
            {
            }
     
            public CustomCommandColumn(string name): base(name)
            {
            }
     
            public override bool AllowFiltering
            {
                get
                {
                    return true;
                }
            }
        }

    CellFormatting event of my RadGridView : 

    private void rgvLinkList_CellFormatting(object sender, CellFormattingEventArgs e)
            {
                if (e.Row is GridViewDataRowInfo) {
                    GridCommandCellElement commandCell = e.CellElement as GridCommandCellElement;
                    if(commandCell != null)
                    {
                        commandCell.CommandButton.Text = e.Row.Cells[4].Value.ToString();
                    }
                 
                }
            }

     

    CellBeginEditevent of my RadGridView, The descs array here consists of text values (text above buttons) read from a column in the database (Similar to Emanuel Varga's example) :

    private void rgvLinkList_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
            {
                string msg = "";
                try
                {
                    if (rgvLinkList.Columns[e.ColumnIndex].Name != "LinkButon")
                    {
                        return;
                    }
     
                    var editor = rgvLinkList.ActiveEditor as RadDropDownListEditor;
                    var dropDownElement = editor.EditorElement as RadDropDownListEditorElement;
                    string[] descs = IOC.linksData.getDescriptions(out msg);
                    dropDownElement.DataSource = descs;
     
                }
                catch (Exception ex)
                {
                    msg = ex.Message.ToString();
                }
            }

     

    And EditorRequired event of my RadGridView  (Again, similar to the example of Emanuel Varga) :

    private void rgvLinkList_EditorRequired(object sender, EditorRequiredEventArgs e)
            {
                var editManager = sender as GridViewEditManager;
                if (editManager == null || rgvLinkList.CurrentColumn.Name != "LinkButon")
                {
                    return;
                }
     
                e.Editor = new RadDropDownListEditor();
                e.EditorType = typeof(RadDropDownListEditor);
            }

     

    I was able to add a filter to the column after all, but when I type something in the filter text box nothing happens. I wonder what is missing or wrong?

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

  2. Nadya
    Admin
    Nadya avatar
    378 posts

    Posted 25 Aug Link to this post

    Hello, özer,

    Thank you for the provided detailed description of your set up and the steps that you follow. Following them, I succeed in replicating your scenario in my test project. 

    You specified that you use RadGridView in bound mode. Then, you add your CustomCommandColumn to the grid. In this case, note that it is necessary to specify the column's FieldName property in order to map the values coming from the DataSource with the respective column. Currently, you specified DataSource only for the RadDropDownListEditorElement. When I set the data source for the editor element as well as specify the FieldName property to the appropriate column, the cell values in the command column are properly filtered. You can check the attached gif file.

     public partial class RadForm1 : Telerik.WinControls.UI.RadForm
     {
         public RadForm1()
         {
             InitializeComponent();
             this.radGridView1.EnableFiltering = true;
             this.radGridView1.AutoSizeColumnsMode = GridViewAutoSizeColumnsMode.Fill;
    
             CustomCommandColumn CommandColumn = new CustomCommandColumn();
             CommandColumn.Name = "LinkButon";
             CommandColumn.FieldName = "Country";
             CommandColumn.HeaderText = "Linke Git";
             CommandColumn.UseDefaultText = false;
             CommandColumn.AllowFiltering = true;
    
             // CommandColumn.FormatInfo = new System.Globalization.CultureInfo("tr-TR");
             this.radGridView1.Columns.Add(CommandColumn);
             this.radGridView1.EditorRequired += this.RadGridView1_EditorRequired;
             this.radGridView1.CellFormatting += this.RadGridView1_CellFormatting;
             this.radGridView1.CellBeginEdit += this.RadGridView1_CellBeginEdit;
             this.radGridView1.FilterChanged += this.RadGridView1_FilterChanged;
         }
    
         private void RadGridView1_FilterChanged(object sender, GridViewCollectionChangedEventArgs e)
         {
    
         }
    
         private void RadGridView1_EditorRequired(object sender, EditorRequiredEventArgs e)
         {
             var editManager = sender as GridViewEditManager;
             if (editManager == null || radGridView1.CurrentColumn.Name != "LinkButon")
             {
                 return;
             }
    
             e.Editor = new RadDropDownListEditor();
             e.EditorType = typeof(RadDropDownListEditor);
         }
    
         private void RadGridView1_CellBeginEdit(object sender, GridViewCellCancelEventArgs e)
         {
             string msg = "";
             try
             {
                 if (radGridView1.Columns[e.ColumnIndex].Name != "LinkButon")
                 {
                     return;
                 }
    
                 var editor = radGridView1.ActiveEditor as RadDropDownListEditor;
    
                 var dropDownElement = editor.EditorElement as RadDropDownListEditorElement;
    
                 //string[] descs = IOC.linksData.getDescriptions(out msg);
                 dropDownElement.DataSource = new object[] { "USA", "UK" };
    
    
             }
             catch (Exception ex)
             {
                 msg = ex.Message.ToString();
             }
         }
    
         private void RadGridView1_CellFormatting(object sender, CellFormattingEventArgs e)
         {
             if (e.Row is GridViewDataRowInfo)
             {
                 GridCommandCellElement commandCell = e.CellElement as GridCommandCellElement;
                 if (commandCell != null)
                 {
                     commandCell.CommandButton.Text = e.Row.Cells[4].Value.ToString();
                 }
    
             }
         }
    
         private void RadForm1_Load(object sender, EventArgs e)
         {
             // TODO: This line of code loads data into the 'nwindDataSet.Employees' table. You can move, or remove it, as needed.
             this.employeesTableAdapter.Fill(this.nwindDataSet.Employees);
    
    
         }
     }
     public class CustomCommandColumn : GridViewCommandColumn
     {
         public CustomCommandColumn() : base()
         {
         }
    
         public CustomCommandColumn(string name) : base(name)
         {
         }
    
         public override bool AllowFiltering
         {
             get
             {
                 return true;
             }
         }
     }

    I attached my test project for your reference. Could you please give it a try and see how it works. 

    I hope this helps. Should you have other questions do not hesitate to ask.

    Regards,
    Nadya
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

  3. özer
    özer avatar
    22 posts
    Member since:
    Jun 2020

    Posted 26 Aug in reply to Nadya Link to this post

    Hi Nadya.

    Thank you answer. I used HyperLinkColumn instead of CommandColumn and achieved my goal. However, I may need filterable command column in the later stages of my project.

  4. Nadya
    Admin
    Nadya avatar
    378 posts

    Posted 26 Aug Link to this post

    Hi, özer,

    I am glad that you have found a working solution for achieving the desired behavior that you want. If you are facing any further difficulties do not hesitate to contact us. 

    Regards,
    Nadya
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top