Features

Row and Column Freezing

Row and Column Freezing

This view shows the MultiRow control's frozen cells features.

Features

Settings

Description

The MultiRow control allows you to freeze rows and columns so they remain in view as the user scrolls the grid. Frozen cells can be edited and selected as regular cells, exactly as in Excel and in the FlexGrid control.

using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using MultiRowExplorer.Models;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        public ActionResult Freezing()
        {
            ViewBag.DemoSettings = true;
            ViewBag.DemoSettingsModel = new ClientSettingsModel
            {
                Settings = CreateSettings()
            };
            return View();
        }

        public ActionResult Freezing_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }

        private static IDictionary<string, object[]> CreateSettings()
        {
            var settings = new Dictionary<string, object[]>
            {
                {"FrozenColumns", new object[]{1, 0, 2, 3}},
                {"FrozenRows", new object[]{2, 0, 1, 3, 4, 5}}
            };

            return settings;
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ClientSettingsModel demoSettingsModel = ViewBag.DemoSettingsModel;
}

<c1-multi-row id="@demoSettingsModel.ControlId" is-read-only="true" class="multirow"
              frozen-columns="1" frozen-rows="2">
    <c1-items-source read-action-url="@Url.Action("Freezing_Bind")"></c1-items-source>
    <c1-multi-row-cell-group header="Order" colspan="2">
        <c1-multi-row-cell binding="Id" header="ID" width="150" class="id" />
        <c1-multi-row-cell binding="Date" header="Ordered" width="150" />
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" />
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Customer" colspan="3">
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" width="200" />
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" />
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" show-drop-down="true">
            <c1-data-map display-member-path="Value" selected-value-path="Value">
                <c1-items-source source-collection="cities" />
            </c1-data-map>
        </c1-multi-row-cell>
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Shipper" colspan="2">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" colspan="2" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" width="200" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" width="100" />
    </c1-multi-row-cell-group>
</c1-multi-row>

@section Summary{
    <p>
        This view shows the MultiRow control's frozen cells features.
    </p>
}

@section Description{
    <p>
        The <b>MultiRow</b> control allows you to freeze rows and columns so they remain in view as the user scrolls the grid.
        Frozen cells can be edited and selected as regular cells, exactly as in Excel and in the FlexGrid control.
    </p>
}