Drop Target Control

Column's allowDragging property provides control over the drag source (which columns may be dragged into new positions).

You can get control over the drop target (column's new position) by handling the dragingColumnOver event and setting the event's cancel parameter to true if the current source/target combination is invalid.

For example, the grid below does not allow dragging the 'country' column to the last or the first positions:

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsDropTargetControl.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var theColumn=null;
 
    // prevent 'sales' column from being dragged to index 0
    theGrid.draggingColumn.addHandler(function (s, e) {
        theColumn = s.columns[e.col].binding;
    });
    theGrid.draggingColumnOver.addHandler(function (s, e) {
        if (theColumn == 'Country') {
            if (e.col == 0 || e.col == s.columns.length - 1) {
                e.cancel = true;
            }
        }
    });
});
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: ColumnsDropTargetControl
        public ActionResult ColumnsDropTargetControl()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDropTargetControl_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDropTargetControl_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDropTargetControl_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsDropTargetControl_Text3)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model)