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