Auto-Size Rows

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

Countries

Sales

Expenses

Zaire, Austria, Belgium, Canada, Denmark

5,245.28

1,909.33

Hungary, Ireland, Japan, Korea, Lebanon, Mexico, Norway, Portugal, Qatar, Romania, Spain, Turkey

7,231.58

1,337.71

Finland, Germany, Hungary, Ireland, Japan

3,133.73

2,732.47

Belgium, Canada, Denmark, Estonia, Finland, Germany

4,040.07

4,966.42

Norway, Portugal, Qatar, Romania

2,546.07

1,766.58

Norway, Portugal, Qatar, Romania, Spain

7,471.49

2,199.67

Japan, Korea, Lebanon, Mexico

6,947.09

1,241.67

Ukraine, Venezuela, Zaire, Austria, Belgium, Canada

348.40

4,790.47

Germany, Hungary, Ireland, Japan

4,373.95

4,100.41

Korea, Lebanon, Mexico, Norway

4,942.87

576.97

Ireland, Japan, Korea, Lebanon, Mexico, Norway, Portugal, Qatar, Romania, Spain, Turkey

5,440.29

4,037.50

Ukraine, Venezuela, Zaire, Austria, Belgium, Canada, Denmark, Estonia, Finland, Germany

4,476.75

556.92

Zaire, Austria, Belgium, Canada, Denmark, Estonia, Finland, Germany

3,936.74

4,994.57

Germany, Hungary, Ireland, Japan, Korea, Lebanon, Mexico

1,008.79

1,034.68

Estonia, Finland, Germany

9,732.90

3,834.70

// This file locates: "Scripts/Lesson/C1FlexGrid/AutoRowHeights.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 < 100; 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() * 12) + 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
        setTimeout(function () {
            s.autoSizeRows();
        }, 50);
    });
    theGrid.resizedColumn.addHandler(function (s, e) { // column resized
        if (s.columns[e.col].wordWrap) {
            s.autoSizeRows();
        }
    });
    theGrid.cellEditEnded.addHandler(function (s, e) { // cell edited
        if (s.columns[e.col].wordWrap) {
            s.autoSizeRow(e.row);
        }
    });
    theGrid.rowEditEnded.addHandler(function (s, e) { // whole row undo
        s.autoSizeRow(e.row);
    });
 
    theGrid.itemsSource = data;
});

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

<h1>
    @Html.Raw(Resources.C1FlexGrid.AutoRowHeights_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.AutoRowHeights_Text1)
</p>
@(Html.C1().FlexGrid().Id("theGrid").Height(300)
    .AutoGenerateColumns(false)
    .Columns(cs =>
    {
        cs.Add().Binding("id").Header("ID").Width("60").IsReadOnly(true);
        cs.Add().Binding("countries").Header("Countries").Width("*").WordWrap(true);
        cs.Add().Binding("sales").Header("Sales");
        cs.Add().Binding("expenses").Header("Expenses");
    })
)