Grid Frozen Columns | ASP.net Core Awesome

Grid with columns frozen on the left

Columns can be frozen on the left and right side of the grid. If there isn't enough available space the columns will automatically unfreeze.

Grid with columns frozen on the left and right

GridFrozenColumns/Index.cshtml

@(Html.Awe().Grid("GridFzLeftRight")
    .Mod(o => o.Main().Freeze(3, 2))
    .Columns(
        new Column { Bind = "Id", Width = 75, Groupable = false, Resizable = false },
        new Column { Bind = "Person" },
        new Column { Bind = "Food.Name", ClientFormatFunc = "site.imgFood", MinWidth = 200 },
        new Column { Bind = "Country.Name", Header = "Country" },
        new Column { Bind = "Date", Width = 120 },
        new Column { Bind = "Location" },
        new Column { Prop = "Meals", MinWidth = 250, Header = "Meals" },
        new Column { ClientFormat = "sample text1", Header = "Column 1" },
        new Column { ClientFormat = "sample text2", Header = "Column 2" },
        new Column { ClientFormat = "sample text3", Header = "Column 3" },
        new Column { ClientFormat = "sample text4", Header = "Column 4" },
        new Column { ClientFormat = "sample text5", Header = "Column 5" },
        new Column { Bind = "Organic" },
        new Column { Bind = "Chef.FirstName,Chef.LastName", Prop = "ChefName", Header = "Chef", MinWidth = 180 })
    .Url(Url.Action("GetItems"))
    .Height(350)
    .Reorderable()
    .Resizable())

Tree Grid with frozen columns

GridFrozenColumns/Index.cshtml

<div class="frzdemo">
    @(Html.Awe().Grid("LazyTreeGrid")
        .Mod(o => o.Freeze(1, 1))
        .Reorderable()
        .Resizable()
        .Url(Url.Action("LazyTree", "TreeGrid"))
        .Columns(
            new Column { Bind = "Name", MinWidth = 200},
            new Column { ClientFormat = "sample 1", Header = "header 1"},
            new Column { ClientFormat = "sample 2", Header = "header 2"},
            new Column { ClientFormat = "sample 3", Header = "header 3"},
            new Column { ClientFormat = "sample 4", Header = "header 4"},
            new Column { ClientFormat = "sample 5", Header = "header 5"},
            new Column { Bind = "Id", Width = 100 })
        .PageSize(3)
        .Height(400))
</div>

Grid with nests and frozen columns

GridFrozenColumns/Index.cshtml

<div class="frzdemo">
    @(Html.Awe().Grid("MasterDetailGrid")
        .Mod(o => o.Freeze())
        .Columns(
            new Column {ClientFormat = DemoUtils.DetailNstBtn, Width = 100, Header = "Id"},
            new Column {Bind = "Person"},
            new Column {Bind = "Food.Name"},
            new Column {Bind = "Location"},
            new Column {ClientFormat = "sample 1", Header = "header 1"},
            new Column {ClientFormat = "sample 2", Header = "header 2"},
            new Column {ClientFormat = "sample 3", Header = "header 3"},
            new Column {ClientFormat = "sample 4", Header = "header 4"},
            new Column {ClientFormat = "sample 5", Header = "header 5"})
        .Url(Url.Action("GetItems", "LunchGrid"))
        .PageSize(5)
        .Resizable()
        .Reorderable()
        .Height(350)
        .Nests(new Nest {Name = "detailnst", Url = Url.Action("LunchDetail", "GridNestingDemo"), LoadOnce = true}))
</div>

Grid MultiRow Header Groups and frozen columns

GridFrozenColumns/Index.cshtml

@(Html.Awe().Grid("GridHg")
    .Mod(o => o.Main().Freeze(2, 3))
    .HeaderGroups(
        new HeaderGroup {Content = "Main details", Level = 0, Id = "main"},
        new HeaderGroup {Content = "Dinner details", Level = 0, Id = "dinfo"},
        new HeaderGroup {Content = "Chef", Id = "chef", Level = 1},
        new HeaderGroup {Content = "Address", Id = "addr", Level = 1})
    .Columns(
        new Column {Bind = "Id", Width = 75, Groupable = false, Resizable = false},
        new Column {Bind = "Person", HeaderGroups = new[] {"main"}},
        new Column {Bind = "Food.Name", HeaderGroups = new[] {"main"}},
        new Column {ClientFormat = "sample 1", Header = "header 1"},
        new Column {ClientFormat = "sample 2", Header = "header 2", MinWidth = 200 },
        new Column {ClientFormat = "sample 3", Header = "header 3", MinWidth = 200 },
        new Column {ClientFormat = "sample 4", Header = "header 4", MinWidth = 200 },
        new Column {ClientFormat = "sample 4", Header = "header 5"},
        new Column {Bind = "Date", Width = 120, HeaderGroups = new[] {"dinfo"}},
        new Column {Bind = "Location", HeaderGroups = new[] {"dinfo", "addr"}},
        new Column {Bind = "Country.Name", Header = "Country", HeaderGroups = new[] {"dinfo", "addr"}},
        new Column {Bind = "Chef.FirstName", ClientFormat = ".(ChefFName)", Header = "First Name", HeaderGroups = new[] {"dinfo", "chef"}},
        new Column {Bind = "Chef.LastName", ClientFormat = ".(ChefLName)", Header = "Last Name", HeaderGroups = new[] {"dinfo", "chef"}})
    .Url(Url.Action("LunchGrid", "Data"))
    .Resizable()
    .Reorderable()
    .Height(400))