Responsive Layouts

The FlexGrid below shows all columns on large devices, and only one summary column on devices with narrow screens.

Company Name

Contact Name

Contact Title

Address

City

Country

// This file locates: "Scripts/Lesson/C1FlexGrid/ColumnsResponsiveLayouts.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.formatItem.addHandler(function (s, e) { // show company summary on narrow layout
        if (e.panel == s.cells && e.col == 0) {
            var html = wijmo.format('<div class="item-header">{CompanyName}</div>' +
                '<div class="item-detail">{ContactName}, {ContactTitle}</div>' +
      '<div class="item-detail">{Address}, {City}, {Country}</div>',
      s.rows[e.row].dataItem);
            e.cell.innerHTML = html;
        }
    });
 
    // store default row height
    var defaultRowHeight = theGrid.rows.defaultSize;
 
    // make it responsive
    theGrid.addEventListener(window, 'resize', updateGridLayout);
    function updateGridLayout() {
 
        // show/hide columns
        var narrow = theGrid.hostElement.clientWidth < 600;
        theGrid.columns.forEach(function (col) {
            col.visible = col.index == 0 ? narrow : !narrow;
        });
 
        // make rows taller on phone layout
        theGrid.rows.defaultSize = defaultRowHeight * (narrow ? 3 : 1);
 
        // hide column headers on narrow layouts
        theGrid.headersVisibility = narrow ? 'None' : 'Column';
    }
 
    // get some data
    wijmo.httpRequest('https://services.odata.org/Northwind/Northwind.svc/Customers?$format=json', {
        success: function (xhr) {
            var response = JSON.parse(xhr.responseText);
            theGrid.itemsSource = response.value;
            updateGridLayout();
        }
    });
});

// This file locates: "Content/css/Lesson/C1FlexGrid/ColumnsResponsiveLayouts.css".
/* set grid height */
.wj-flexgrid {
    height: 350px;
    -moz-user-select: none;
}
/* disable alternating rows */
.wj-alt:not(.wj-header):not(.wj-group):not(.wj-state-selected):not(.wj-state-multi-selected) {
    background: #fff;
}
/* format detail cells */
.item-header {
    font-weight: bold;
    font-size: 150%;    
}
.item-detail {
    margin-left: 12px;

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

<h1>@Html.Raw(Resources.C1FlexGrid.ColumnsResponsiveLayouts_Title)</h1>
 
<p>
    @Html.Raw(Resources.C1FlexGrid.ColumnsResponsiveLayouts_Text1)
</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .AutoGenerateColumns(false)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .Columns(cs=>
    {
        cs.Add().Header("Company").IsReadOnly(true).Visible(false).AllowDragging(false).Width("*");
        cs.Add().Binding("CompanyName").Header("Company Name").Width("20*");
        cs.Add().Binding("ContactName").Header("Contact Name").Width("15*");
        cs.Add().Binding("ContactTitle").Header("Contact Title").Width("20*");
        cs.Add().Binding("Address").Header("Address").Width("20*");
        cs.Add().Binding("City").Header("City").Width("20*");
        cs.Add().Binding("Country").Header("Country").Width("20*");
    })
)