Grid Frozen Columns

Grid with columns frozen on the left 

Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Date
Location
Meals
Column 1
Column 2
Column 3
Column 4
Column 5
Organic
Chef
3675MaryfoodShepherd's pieLa Croisette11/19/2022DinerWheat, Papayasample text1sample text2sample text3sample text4sample text5NoPepper Tomato
3671JeremyfoodPizzaRegent6/13/2010TavernHazelnutssample text1sample text2sample text3sample text4sample text5YesDemeter Harvest
3667JohnfoodCheesecakeWinterspring9/25/2015RestaurantWalnuts, Broccolisample text1sample text2sample text3sample text4sample text5YesJosh Baskin
3663MichaelfoodHot BeverageJisina2/13/2012VisitPotato, Broccolisample text1sample text2sample text3sample text4sample text5YesPepper Tomato
3659GabriellefoodFrench toastGoldshire5/19/2016TavernPapaya, Tomatosample text1sample text2sample text3sample text4sample text5YesOmu Man
3655LucyfoodBig SaladStormwind4/3/2019TavernBroccoli, Banana, Tomatosample text1sample text2sample text3sample text4sample text5NoOmu Man
3651CheyennefoodBig SaladWestfall11/1/2017VisitRicesample text1sample text2sample text3sample text4sample text5NoOmu Man
3647JonahfoodShepherd's pieSylvanaar4/27/2020VisitOats, Banana, Papayasample text1sample text2sample text3sample text4sample text5YesJoanna Stan
3643FernandofoodSoupGhidrimesti5/7/2010UniversityRicesample text1sample text2sample text3sample text4sample text5YesChef Chef
3639AudreyfoodShepherd's piePiccadilly5/17/2011UniversityRicesample text1sample text2sample text3sample text4sample text5NoCharles Duchemin

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 

Drag a column header and drop it here to group by that column
Id
Person
Food
Country
Date
Location
Meals
Column 1
Column 2
Column 3
Column 4
Column 5
Organic
Chef
3675MaryfoodShepherd's pieLa Croisette11/19/2022DinerWheat, Papayasample text1sample text2sample text3sample text4sample text5NoPepper Tomato
3671JeremyfoodPizzaRegent6/13/2010TavernHazelnutssample text1sample text2sample text3sample text4sample text5YesDemeter Harvest
3667JohnfoodCheesecakeWinterspring9/25/2015RestaurantWalnuts, Broccolisample text1sample text2sample text3sample text4sample text5YesJosh Baskin
3663MichaelfoodHot BeverageJisina2/13/2012VisitPotato, Broccolisample text1sample text2sample text3sample text4sample text5YesPepper Tomato
3659GabriellefoodFrench toastGoldshire5/19/2016TavernPapaya, Tomatosample text1sample text2sample text3sample text4sample text5YesOmu Man
3655LucyfoodBig SaladStormwind4/3/2019TavernBroccoli, Banana, Tomatosample text1sample text2sample text3sample text4sample text5NoOmu Man
3651CheyennefoodBig SaladWestfall11/1/2017VisitRicesample text1sample text2sample text3sample text4sample text5NoOmu Man
3647JonahfoodShepherd's pieSylvanaar4/27/2020VisitOats, Banana, Papayasample text1sample text2sample text3sample text4sample text5YesJoanna Stan
3643FernandofoodSoupGhidrimesti5/7/2010UniversityRicesample text1sample text2sample text3sample text4sample text5YesChef Chef
3639AudreyfoodShepherd's piePiccadilly5/17/2011UniversityRicesample text1sample text2sample text3sample text4sample text5NoCharles Duchemin

show code
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 

Drag a column header and drop it here to group by that column
Name
header 1
header 2
header 3
header 4
header 5
Id
main node 3939sample 1sample 2sample 3sample 4sample 53939
Barley 3939 -> 3963sample 1sample 2sample 3sample 4sample 53963
node 3939 -> 3943sample 1sample 2sample 3sample 4sample 53943
Papaya 3939 -> 3941sample 1sample 2sample 3sample 4sample 53941
main node 3929sample 1sample 2sample 3sample 4sample 53929
Broccoli 3929 -> 3937sample 1sample 2sample 3sample 4sample 53937
node 3929 -> 3931sample 1sample 2sample 3sample 4sample 53931
main node 3913sample 1sample 2sample 3sample 4sample 53913
node 3913 -> 3917sample 1sample 2sample 3sample 4sample 53917
Cherry 3913 -> 3915sample 1sample 2sample 3sample 4sample 53915
show code
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 

Drag a column header and drop it here to group by that column
Id
Person
Food
Location
header 1
header 2
header 3
header 4
header 5
3675
MaryShepherd's pieDinersample 1sample 2sample 3sample 4sample 5
3671
JeremyPizzaTavernsample 1sample 2sample 3sample 4sample 5
3667
JohnCheesecakeRestaurantsample 1sample 2sample 3sample 4sample 5
3663
MichaelHot BeverageVisitsample 1sample 2sample 3sample 4sample 5
3659
GabrielleFrench toastTavernsample 1sample 2sample 3sample 4sample 5
show code
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 

Drag a column header and drop it here to group by that column
Id
Main details
header 1
header 2
header 3
header 4
header 5
Dinner details
Date
Address
Chef
Person
Food
Location
Country
First Name
Last Name
3675MaryShepherd's piesample 1sample 2sample 3sample 4sample 411/19/2022DinerLa CroisettePepperTomato
3671JeremyPizzasample 1sample 2sample 3sample 4sample 46/13/2010TavernRegentDemeterHarvest
3667JohnCheesecakesample 1sample 2sample 3sample 4sample 49/25/2015RestaurantWinterspringJoshBaskin
3663MichaelHot Beveragesample 1sample 2sample 3sample 4sample 42/13/2012VisitJisinaPepperTomato
3659GabrielleFrench toastsample 1sample 2sample 3sample 4sample 45/19/2016TavernGoldshireOmuMan
3655LucyBig Saladsample 1sample 2sample 3sample 4sample 44/3/2019TavernStormwindOmuMan
3651CheyenneBig Saladsample 1sample 2sample 3sample 4sample 411/1/2017VisitWestfallOmuMan
3647JonahShepherd's piesample 1sample 2sample 3sample 4sample 44/27/2020VisitSylvanaarJoannaStan
3643FernandoSoupsample 1sample 2sample 3sample 4sample 45/7/2010UniversityGhidrimestiChefChef
3639AudreyShepherd's piesample 1sample 2sample 3sample 4sample 45/17/2011UniversityPiccadillyCharlesDuchemin
show code
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))



Comments