FlexGrid

ColumnPickerController.cs ColumnPicker.cshtml

using Microsoft.AspNetCore.Mvc; 
using MvcExplorer.Models; 
  
namespace MvcExplorer.Controllers 
{ 
    public partial class FlexGridController : Controller 
    { 
        public ActionResult ColumnPicker() 
        { 
            var model = Sale.GetData(50); 
            return View(model); 
        } 
    } 
} 

@model IEnumerable<Sale> 
  
@section Styles{ 
    <style> 
        .column-picker-icon { 
            cursor: pointer; 
        } 
  
        .wj-multiselectlistbox.column-picker { 
            box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); 
        } 
  
        .wj-multiselectlistbox .wj-listbox-item > label { 
            display: block; 
            margin: 0 0 3px 0; 
        } 
  
        .wj-multiselectlistbox .wj-listbox-item.wj-state-selected { 
            background: transparent; 
            color: inherit; 
        } 
  
        .wj-multiselectlistbox .wj-listbox-item:hover { 
            background: rgba(0,0,0,.05); 
        } 
  
        .wj-multiselectlistbox .drop-marker { 
            position: absolute; 
            background: #0085c7; 
            opacity: 0.5; 
            pointer-events: none; 
            z-index: 1000; 
        } 
    </style> 
} 
  
@section Scripts{ 
    <script type="text/javascript">
        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; 
                    }); 
                } 
            }); 
  
            // Config drag & drop for the Column-picker 
            configDragDropForColumnPicker(grid, theColumnPicker); 
  
            // 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); 
                } 
            } 
        } 
  
        // Config Column-picker's drag & drop 
        function configDragDropForColumnPicker(theGrid, theColumnPicker) { 
            var isDragEnabled = false, 
                dragSrc = null, 
                dragDst = null, 
                theColumnPickerListBox = theColumnPicker.listBox, 
                dragCheckbox = document.getElementById('enableDrag'); 
  
            dragCheckbox.addEventListener('click', function (e) { 
                var element = e.target; 
                isDragEnabled = element.checked; 
                var host = theColumnPickerListBox.hostElement; 
                var items = host.getElementsByClassName('wj-listbox-item'); 
                for (var i = 0; i < items.length; i++) { 
                    enableDragItem(items[i], isDragEnabled); 
                } 
            }); 
            theColumnPickerListBox.formatItem.addHandler(function (s, e) { 
                enableDragItem(e.item, isDragEnabled); 
            }); 
            var theColumnPickerHost = theColumnPickerListBox.hostElement; 
            theColumnPickerHost.addEventListener('dragstart', handleDragStart); 
            theColumnPickerHost.addEventListener('dragover', handleDragOver); 
            theColumnPickerHost.addEventListener('drop', handleDrop); 
            theColumnPickerHost.addEventListener('dragend', handleDragEnd); 
            function enableDragItem(item, enabled) { 
                item.setAttribute('draggable', enabled); 
            } 
            function handleDragStart(e) { 
                dragSrc = wijmo.closest(e.target, '.wj-listbox-item'); 
                if (dragSrc) { 
                    e.dataTransfer.setData('text', dragSrc.innerHTML); 
                    e.dataTransfer.effectAllowed = 'move'; 
                } 
            } 
            function handleDragOver(e) { 
                // C1WEB-28851: Fix getting wrong target in IE 
                var target = document.elementFromPoint(e.clientX, e.clientY), 
                    dragOver = wijmo.closest(target, '.wj-listbox-item'); 
                if (dragDst && dragDst !== dragOver) { 
                    removeDropMarker(); 
                } 
                if (dragOver && dragOver !== dragSrc) { 
                    e.preventDefault(); 
                    e.dataTransfer.dropEffect = 'move'; 
                    dragDst = dragOver; 
                    var src = getElementIndex(dragSrc); 
                    var dst = getElementIndex(dragDst); 
                    removeDropMarker(); 
                    addDropMarker(dst > src); 
                } 
                else { 
                    dragDst = null; 
                } 
            } 
            function handleDrop(e) { 
                if (dragSrc && dragDst) { 
                    e.preventDefault(); 
                    var src = theGrid.getColumn(dragSrc.innerText.trim()).index, 
                        dst = theGrid.getColumn(dragDst.innerText.trim()).index; 
                    theGrid.columns.moveElement(src, dst); 
                } 
                handleDragEnd(); 
            } 
            function handleDragEnd() { 
                dragSrc = null; 
                dragDst = null; 
                removeDropMarker(); 
            } 
            function getElementIndex(element) { 
                var parent = element.parentElement; 
                var siblings = Array.prototype.slice.call(parent.children); 
                return siblings.indexOf(element); 
            } 
            function removeDropMarker() { 
                wijmo.removeChild(wijmo.getElement('.drop-marker')); 
            } 
            function addDropMarker(isAfterPos) { 
                const height = 4; 
                const margin = 2; 
                var width = dragDst.clientWidth - margin; 
                var leftPos = margin; 
                var topPos = isAfterPos 
                    ? (dragDst.offsetTop + dragDst.clientHeight - height) 
                    : (dragDst.offsetTop); 
                // C1WEB-28851: IE does not recornize the code, hence change to this 
                var html = '<div class="drop-marker" style="top:' + topPos + 'px;left:' + leftPos + 'px;height:' + height + 'px;width:' + width + 'px"></div>'; 
                wijmo.createElement(html, theColumnPicker.hostElement); 
            } 
        } 
  
        // Save columns' layout to localStorage 
        function saveLayout() { 
            var grid = wijmo.Control.getControl("#gridColumnPicker"); 
            localStorage['columns'] = grid.columnLayout; 
        } 
        // Restore columns' layout from localStorage 
        function loadLayout() { 
            var grid = wijmo.Control.getControl("#gridColumnPicker"), 
                columnLayout = localStorage['columns']; 
            if (columnLayout) { 
                grid.columnLayout = columnLayout; 
            } 
        } 
    </script>
} 
  
<c1-flex-grid id="gridColumnPicker" auto-generate-columns="true" class="grid" is-read-only="true" item-formatter="formatItem"> 
    <c1-items-source initial-items-count="100" source-collection="Model"></c1-items-source> 
</c1-flex-grid> 
  
<div class="checkbox"> 
    <label> 
        <input id="enableDrag" type="checkbox"> @Html.Raw(FlexGridRes.ColumnPicker_Text2) 
    </label> 
</div> 
<div style="display:none"> 
    <img id="column-picker-icon" class="column-picker-icon" src="~/Content/images/icons/Columns.png" width="20" height="20" /> 
    <div id="theColumnPicker" class="column-picker" style="display:none"></div> 
</div> 
  
<input type="button" value="@FlexGridRes.ColumnPicker_Text4" class="btn" onclick="saveLayout()" /> 
<input type="button" value="@FlexGridRes.ColumnPicker_Text5" class="btn" onclick="loadLayout()" /> 
  
@section Summary{ 
    <p>@Html.Raw(FlexGridRes.ColumnPicker_Text0)</p> 
} 
  
@section Description{ 
    <p>@Html.Raw(FlexGridRes.ColumnPicker_Text0)</p> 
    <p>@Html.Raw(FlexGridRes.ColumnPicker_Text1)</p> 
    <p>@Html.Raw(FlexGridRes.ColumnPicker_Text3)</p> 
} 

New Controls >

Popular Controls >

Data Management >

Data Visualization >

Navigation and Layout >

Document >

Scheduling >

Input and Editing >

Tutorials >

New Features >

Getting Started Guides >

Sample Applications >

Data Management

Data Visualization

Navigation and Layout

Document

Scheduling

Input and Editing

Tutorials

New Features

Getting Started Guides

Sample Applications

Column Picker

Features

Description