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
 
 
4317New Name edited
4139McDowell's 1
4133Chotchkie's
4127Chili's
4121Flingers
4115The Cheesecake Factory
4109The Rolling Donut
4103Big Kahuna Burger
4097City Wok
4091Cluckin' Bell
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
 
 
4317New Name edited
4139McDowell's 1
4133Chotchkie's
4127Chili's
4121Flingers
4115The Cheesecake Factory
4109The Rolling Donut
4103Big Kahuna Burger
4097City Wok
4091Cluckin' Bell
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
 
 
4317New Name edited
4139McDowell's 1
4133Chotchkie's
4127Chili's
4121Flingers
4115The Cheesecake Factory
4109The Rolling Donut
4103Big Kahuna Burger
4097City Wok
4091Cluckin' Bell
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
 
 
 
4317New Name edited
4139McDowell's 1
4133Chotchkie's
4127Chili's
4121Flingers
4115The Cheesecake Factory
4109The Rolling Donut
4103Big Kahuna Burger
4097City Wok
4091Cluckin' Bell
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