Auto-Size Columns

This grid automatically resizes columns to fit their content. It does this by calling the autoSizeColumns method in response to events that affect the content size.

// This file locates: "Scripts/Lesson/C1FlexGrid/AutoColumnWidths.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'Austria,Belgium,Canada,Denmark,Estonia,Finland,Germany,Hungary,Ireland,Japan,Korea,Lebanon,Mexico,Norway,Portugal,Qatar,Romania,Spain,Turkey,Ukraine,Venezuela,Zaire'.split(',');
    var data = [];
    for (var i = 0; i < 10; i++) {
        data.push({
            id: i,
            countries: getCountries(),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
    function getCountries() {
        var c = [];
        var cnt = Math.round(Math.random() * 2) + 1;
        var start = Math.round(Math.random() * countries.length);
        for (var i = 0; i < cnt; i++) {
            c.push(countries[(i + start) % countries.length]);
        }
        return c.join(', ');
    }
 
    // show the data in a grid with fixed height
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.loadedRows.addHandler(function (s, e) { // rows loaded/reloaded
        s.autoSizeColumns();
    });
    theGrid.cellEditEnded.addHandler(function (s, e) { // cell edited
        s.autoSizeColumn(e.col);
    });
    theGrid.rowEditEnded.addHandler(function (s, e) { // whole row undo
        s.autoSizeColumns();
    });
 
    theGrid.itemsSource = data;
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: AutoColumnWidths
        public ActionResult AutoColumnWidths()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.AutoColumnWidths_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.AutoColumnWidths_Text1)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(300)
    .AllowResizing(C1.Web.Mvc.Grid.AllowResizing.None)
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("id").Header("ID").MinWidth(60).IsReadOnly(true);
        cs.Add().Binding("countries").Header("Countries");
        cs.Add().Binding("sales").Header("Sales").MinWidth(80);
        cs.Add().Binding("expenses").Header("Expenses").MinWidth(80);
    })
)