ASP.NET Core MVC Controls | ComponentOne
Working with Controls / FlexGrid / Work with FlexGrid / Columns / Column Picker
In This Topic
    Column Picker
    In This Topic

    FlexGrid supports column picker to add or remove a visible column through the column-picker icon. This icon appears at the top-left cell of the grid to show the column-picker dropdown list where you can select the columns you want to display. In column picker, you can use the check boxes against the column names to show or hide the corresponding columns in the grid. You can also use filter box to filter columns from the dropdown list. Additionally, you can further customize the column picker to allow column drag and drop in the Column Picker's dropdown list to change the order of columns displayed in FlexGrid. To see the advanced column picker in action, see FlexGrid column picker product sample.

    MVC FlexGrid Column Picker

    You can easily implement a column-picker UI using the grid's columns property, a ListBox control, and showPopup and hidePopup methods as showcased in the following example.

    Add Model

    Person.cs
    Copy Code
    public class Person
    {
        internal static string[] Countries = "China|India|United States|Indonesia|Brazil|Pakistan|Bangladesh|Nigeria|Russia|Japan|Mexico|Philippines|Vietnam|Germany|Ethiopia|Egypt|Iran|Turkey|Congo|France|Thailand|United Kingdom|Italy|Myanmar".Split('|');
    
    
        public Person(int id)
        {
            ID = id;
        }
    
        public int ID { get; set; }
        public string Name { get { return string.Format("{0} {1}", First, Last); } }
        public string Country { get { return Countries[CountryID]; } }
        public int CountryID { get; set; }
        public bool Active { get; set; }
        public string First { get; set; }
        public string Last { get; set; }
        public DateTime Hired { get; set; }
    }
    
    public class SampleData
    {
        private static Random _rnd = new Random();
        private static string[] _firstNames = "Andy|Ben|Charlie|Dan|Ed|Fred|Gil|Herb|Jack|Karl|Larry|Mark|Noah|Oprah|Paul|Quince|Rich|Steve|Ted|Ulrich|Vic|Xavier|Zeb".Split('|');
        private static string[] _lastNames = "Ambers|Bishop|Cole|Danson|Evers|Frommer|Griswold|Heath|Jammers|Krause|Lehman|Myers|Neiman|Orsted|Paulson|Quaid|Richards|Stevens|Trask|Ulam".Split('|');
    
        private static string GetString(string[] arr)
        {
            return arr[_rnd.Next(arr.Length)];
        }
    
        public static IEnumerable<Person> GetData()
        {
            var list = Enumerable.Range(0, 50).Select(i =>
            {
                return new Person(i)
                {
                    First = GetString(_firstNames),
                    Last = GetString(_lastNames),
                    CountryID = _rnd.Next() % Person.Countries.Length,
                    Active = _rnd.NextDouble() >= .5,
                    Hired = DateTime.Today.AddDays(-_rnd.Next(1, 365))
                };
            });
            return list;
        }
    }
    

    Add Controller

    HomeController.cshtml
    Copy Code
    public static List<Person> Persons = SampleData.GetData().ToList();
    public ActionResult Index()
    {
         return View(Persons);
    }
    

    Add View for the Controller

    Index.razor
    Copy Code
    @model IEnumerable<Person>
    
    <script>
        c1.documentReady(function () {
            // Create the Column-picker dropdown list
            var grid = wijmo.Control.getControl('#gridColumnPicker');
            let theColumnPicker = new wijmo.input.MultiSelectListBox('#theColumnPicker', {
                itemsSource: grid.columns,
                checkedMemberPath: 'visible',
                displayMemberPath: 'header',
                showFilterInput: true,
                showSelectAllCheckbox: true,
                lostFocus: function () { wijmo.hidePopup(theColumnPicker.hostElement) },
                checkedItemsChanged: function (sender) {
                    grid.columns.forEach(function (item) { item.visible = false; });
                    sender.checkedItems.forEach(function (item) {
                        grid.columns.getColumn(item.binding).visible = true;
                    });
                }
            });
            // Prepare for column-picker button
            var tempBtnColPicker = document.getElementById('column-picker-icon');
            tempBtnColPicker._columnPicker = theColumnPicker;
            tempBtnColPicker._grid = grid;
        });
    
        function formatItem(panel, r, c, cell) {
            if (panel.cellType == wijmo.grid.CellType.TopLeft) {
                var tempBtnColPicker = document.getElementById('column-picker-icon'),
                    btnColPicker = tempBtnColPicker.cloneNode(true),
                    theColumnPicker = tempBtnColPicker._columnPicker,
                    grid = tempBtnColPicker._grid;
    
                // Show the column picker when the user clicks at the corner top-left cell
                btnColPicker.addEventListener("click", function (e) {
                    let host = theColumnPicker.hostElement;
                    if (host.offsetHeight) {
                        wijmo.hidePopup(host, true, true);
                        grid.focus();
                    }
                    else {
                        wijmo.showPopup(host, e.target, false, true, false);
                        theColumnPicker.focus();
                    }
                    e.preventDefault();
                });
    
                btnColPicker.addEventListener("mousedown", function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                });
    
                cell.appendChild(btnColPicker);
    
                if (theColumnPicker.hostElement.style.display != 'none') {
                    wijmo.showPopup(theColumnPicker.hostElement, btnColPicker, false, true, false);
                }
            }
        }
    
    
    </script>
    
    <c1-flex-grid id="gridColumnPicker"
                  is-read-only="true"
                  auto-generate-columns="false"
                  item-formatter="formatItem"
                  class="grid">
        <c1-items-source source-collection="@Model"></c1-items-source>
        <c1-flex-grid-column binding="ID" width="0.4*"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Name" header="Name" width="*" name="Name"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Country" header="Country" width="*" name="Country"></c1-flex-grid-column>
        <c1-flex-grid-column binding="Hired" header="Hired" width="*" name="Hired"></c1-flex-grid-column>
    </c1-flex-grid>
    
    
    <div style="display:none">
        <img id="column-picker-icon" class="column-picker-icon" src="Images/Columns.png" width="20" height="20" />
        <div id="theColumnPicker" class="column-picker" style="display:none"></div>
    </div>