Reordering

By default, FlexGrid allows reordering columns by dragging their headers into new positions.

You may prevent users from reordering columns by setting the grid's allowDragging property to 'None'. You may also prevent dragging specific columns by setting the columns allowDragging property to 'false'.

For example, the grid below allows reordering all columns except 'ID'.

Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
US
Phones
145,248
81,732.54
38,401.13
1
Germany
Computers
111,632
20,603.32
27,944.24
2
UK
Cameras
181,205
44,217.79
48,877.49
3
Japan
Stereos
54,740
29,190.63
23,365.74
4
Italy
Phones
126,531
46,951.19
49,107.56
5
Greece
Computers
6,073
86,237.02
49,767.35
C1 MVC uses the HTML5 drag/drop API for column reordering. Unfortunately, most of the mobile devices do not support this API. If you want to support column reordering on mobile devices, we suggest to use the DragDropTouch polyfill .
1
2
3
4
5
6
7
// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsReordering.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    // prevent reordering the first column
    theGrid.getColumn('Id').allowDragging = false;
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ColumnsReordering
        public ActionResult ColumnsReordering()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsReordering_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsReordering_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsReordering_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsReordering_Text3)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)
 
<div class="panel panel-warning">
    <div class="panel-heading">
        @Html.Raw(Resources.C1FlexGrid.ColumnsReordering_Text4)
    </div>
</div>