Sizing with the Mouse

By default, FlexGrid provides the resize and auto-size feature through column header cells. So, users can drag the right edge of the column header cells to resize columns, or double-click the right edge of the cell to auto-size the columns. This default behavior can be observed in the grid below.

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
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50

You can use the allowResizing property to customize this behavior. Either prevent resizing altogether, or allow users to resize columns by dragging the right edge of ANY cell. This last option is especially useful in grids without column headers. For example:

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
6
US
Cameras
135,436
31,459.18
40,845.40
7
Germany
Stereos
169,610
99,190.22
1,631.26
8
UK
Phones
139,988
52,628.41
46,700.93
9
Japan
Computers
137,524
54,681.54
4,055.50
10
Italy
Cameras
37,424
45,332.72
14,858.59
1
2
3
4
5
6
7
8
// This file locates: "Scripts/Lesson/C1FlexGrid/SizingMouse.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    var theGridNoHeaders = wijmo.Control.getControl('#theGridNoHeaders');
 
    theGridNoHeaders.headersVisibility = 'None';
    theGridNoHeaders.allowResizing = wijmo.grid.AllowResizing.ColumnsAllCells;
});
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: SizingMouse
        public ActionResult SizingMouse()
        {
            return View(Models.FlexGridData.GetSales(50));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.SizingMouse_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.SizingMouse_Text1)
</p>
@Html.C1().FlexGrid().Id("theGrid").Bind(Model).Height(200)
<p>
    @Html.Raw(Resources.C1FlexGrid.SizingMouse_Text2)
</p>
@Html.C1().FlexGrid().Id("theGridNoHeaders").Bind(Model).Height(200)