Master Details Demo using the Grid and PopupForm

This is a demo for master detail CRUD using the Grid.
For master-detail grid see Master Detail Grid, or Hierarchy (Nested Grids)
Id
Name
 
 
4141McDowell's
4135Chotchkie's
4129Chili's
4123Flingers
4117The Cheesecake Factory
4111The Rolling Donut
4105Big Kahuna Burger
4099City Wok
4093Cluckin' Bell
4087Central Perk
show code
MasterDetailCrudDemo/Index.cshtml
@{ var grid1 = "RestaurantGrid"; }
@Html.InitCrudPopupsForGrid(grid1, "MasterDetailCrudDemo", 470, 1000)

<div class="bar">
@Html.CreateButtonForGrid(grid1)
</div>

@(Html.Awe().Grid(grid1)
.Height(350)
.Attr("data-syncg", "rest") // crud sync using signalr in site.js
.Url(Url.Action("RestaurantGridGetItems"))
.Groupable(false)
.Columns(
new Column { Prop = "Id", Header = "Id", Width = 70 },
new Column { Bind = "Name" },
Html.EditColumnForGrid(grid1),
Html.DeleteColumnForGrid(grid1)))

Inline editing inside details popup 

Id
Name
 
 
4141McDowell's
4135Chotchkie's
4129Chili's
4123Flingers
4117The Cheesecake Factory
4111The Rolling Donut
4105Big Kahuna Burger
4099City Wok
4093Cluckin' Bell
4087Central Perk
show code
MasterDetailCrudDemo/Index.cshtml
@{ var gridIE = "RestaurantGridIE1"; }
@Html.InitCrudPopupsForGrid(gridIE, "MasterDetailInline", 470, 1000)

<div class="bar">
@Html.CreateButtonForGrid(gridIE)
</div>

@(Html.Awe().Grid(gridIE)
.Height(350)
.Attr("data-syncg", "rest") // crud sync using signalr in site.js
.Url(Url.Action("RestaurantGridGetItems"))
.Groupable(false)
.Columns(
new Column { Prop = "Id", Header = "Id", Width = 70 },
new Column { Bind = "Name" },
Html.EditColumnForGrid(gridIE),
Html.DeleteColumnForGrid(gridIE)))

Master Detail CRUD using in nest editing 

Drag a column header and drop it here to group by that column
Id
Name
 
 
4141McDowell's
4135Chotchkie's
4129Chili's
4123Flingers
4117The Cheesecake Factory
4111The Rolling Donut
4105Big Kahuna Burger
4099City Wok
4093Cluckin' Bell
4087Central Perk
This demo is similar to the first one which uses PopupForms, except here the Restaurant PopupForms (create/edit/delete) are opened inside grid nests

Master Detail CRUD using Inline Editing and nesting 

Id
Name
 
 
 
4141McDowell's
4135Chotchkie's
4129Chili's
4123Flingers
4117The Cheesecake Factory
4111The Rolling Donut
4105Big Kahuna Burger
4099City Wok
4093Cluckin' Bell
4087Central Perk
show code
MasterDetailCrudDemo/Index.cshtml
@{
var grid3 = "RestaurantGridInline";
}

@Html.InitDeletePopupForGrid(grid3)

<div class="bar">
@Html.Awe().Button().Text("Create").OnClick("$('#" + grid3 + "').data('api').inlineCreate()").CssClass("mbtn")
</div>

@(Html.Awe().Grid(grid3)
.Attr("data-syncg", "rest")
.Url(Url.Action("RestaurantGridGetItems"))
.InlEdit(new InlEditOpt {
SaveUrl = Url.Action("Create", "RestInl"),
EditUrl = Url.Action("Edit", "RestInl"),
RowClickEdit = true
})
.Groupable(false)
.Nests(new Nest { Name = "detailnst", Url = Url.Action("Addresses", "RestInl"), LoadOnce = true })
.Columns(
new Column { ClientFormat = ".(Id)", Header = "Id", Width = 70 }
.InlId(),

new Column { Bind = "Name" }
.Mod(o => o.Inline(Html.Awe().TextBox("Name"))),

new Column
{
ClientFormat = "<button type='button' class='awe-btn detailnst'>details <i class='caretc'><i class='o-caret'></i></i></button>",
Width = 130
},
Html.InlEditColumn(),
Html.InlDeleteColumn(grid3)))
<style>
/* hide addresses button for new rows */
.o-glnew .detailnst {
display: none;
}

.caretc {
position: relative;
padding: .3em .5em;
display: inline-block;
}

.caretc .o-caret {
transform: rotate(-90deg);
zoom: 1.1;
}

.detailnst-on .caretc .o-caret {
transform: rotate(0);
}
</style>



Comments