DEVEXTREME Save all selected data in grid inside edit form to database - razor

Question

multiple select item in Edit form with grid
How to save the data included the selected item at grid using DEVEXTREME.
The condition now is i can show the grid but now i struggle on get all the data inside the grid to save it and bring it to database, including need to show it again when the user want to edit the data
Template:
#using (Html.DevExtreme().NamedTemplate("EmbeddedDataGridMultiple"))
{
#(Html.DevExtreme().DataGrid()
.ID("PrincipalGrid")
.DataSource(d => d.WebApi().Controller("MasterPrincipal").LoadAction("GetPrincipalData").Key("PrincipalId"))
.Columns(columns => {
columns.Add().DataField("Principal");
columns.Add().DataField("Description");
})
.HoverStateEnabled(true)
.Paging(p => p.PageSize(10))
.FilterRow(f => f.Visible(true))
.Scrolling(s => s.Mode(GridScrollingMode.Virtual))
.Height(345)
.Selection(s => s.Mode(SelectionMode.Multiple))
.SelectedRowKeys(new JS(#"component.option(""value"")"))
.OnSelectionChanged(#<text>
function(selectedItems) {
var keys = selectedItems.selectedRowKeys;
component.option("value", keys);
}
</text>)
)
}
Form
#(Html.DevExtreme().DataGrid<MasterGroupQuotaValidateModel>
()
.ID("gridData")
.ShowBorders(true)
.DataSource(d => d.Mvc().Controller("MasterGroupQuota")
.LoadAction("GetGroupQuota")
.Key("IdGroup")
.UpdateAction("UpdateMasterGroupQuota")
.DeleteAction("DeleteMasterGroupQuota")
.InsertAction("InsertMasterGroupQuota")
)
.RemoteOperations(true)
.Columns(columns =>
{
columns.AddFor(m => m.RowNumber).Caption("No").Width(70);
columns.AddFor(m => m.GroupQuotaId).Visible(false);
columns.AddFor(m => m.SitePlan)
.Lookup(lookup => lookup
.DataSource(d => d.WebApi().Controller("MasterSite").LoadAction("GetSitePlan").Key("SiteId"))
.DisplayExpr("SitePlan")
.ValueExpr("SiteId")
).ValidationRules(rules =>
{
rules.AddAsync().ValidationCallback("CheckGroupQuota").Message("This Site is already registered with the follwoing GroupQuota and Principal");
}); ;
columns.AddFor(m => m.Description).Caption("Group Quota").ValidationRules(rules =>
{
rules.AddAsync().ValidationCallback("CheckGroupQuota").Message("This Group Quota is already registered with the follwoing Site Plan and Principal");
});
columns.AddFor(m => m.Principal)
.Lookup(lookup => lookup
.DataSource(d => d.WebApi().Controller("MasterPrincipal").LoadAction("GetPrincipalData").Key("PrincipalId"))
.DisplayExpr("Principal")
.ValueExpr("PrincipalId")
).ValidationRules(rules =>
{
rules.AddAsync().ValidationCallback("CheckGroupQuota").Message("This Principal is already registered with the follwoing GroupQuota and Site Plan");
});
})
.Paging(paging => paging.PageSize(5))
.Pager(pager =>
{
pager.Visible(true);
pager.ShowPageSizeSelector(true);
pager.AllowedPageSizes(new JS("[5, 10, 'all']"));
pager.ShowInfo(true);
pager.ShowNavigationButtons(true);
})
.Sorting(sorting=> sorting.Mode(GridSortingMode.Single))
.FilterRow(f => f.Visible(true))
.HeaderFilter(f => f.Visible(true))
.AllowColumnReordering(true)
.ShowBorders(true)
.Grouping(grouping => grouping.AutoExpandAll(true))
.SearchPanel(searchPanel => searchPanel.Visible(true))
.GroupPanel(groupPanel => groupPanel.Visible(true))
.HoverStateEnabled(true)
.ShowRowLines(true)
.RowAlternationEnabled(true)
.Scrolling(scrolling => scrolling.RowRenderingMode(GridRowRenderingMode.Virtual))
.Selection(s => s.Mode(SelectionMode.Single))
.OnSelectionChanged("gridSelectionChanged")
.OnExporting("exporting")
.OnRowUpdating("RowUpdating")
.OnEditorPreparing("onEditorPreparing")
.OnSaved("setItemTreeToTextSaving")
.OnEditingStart(#<text>
function(e) {
GetKeyId(e.key)
}
</text>)
.Editing(e => e.Mode(GridEditMode.Popup)
.AllowUpdating(false)
.AllowAdding(false)
.AllowDeleting(false)
.UseIcons(true)
.Popup(p => p
.ShowTitle(true)
.Width(700)
.Height(525)
)
.Form(f => f.Items(items =>
{
items.AddGroup()
.Caption("Detail Group Quota")
.ColCount(2)
.ColSpan(2)
.Items(groupItems =>
{
groupItems.AddSimpleFor(m => m.GroupQuotaId).Visible(false);
groupItems.AddSimpleFor(m => m.SitePlan);
groupItems.AddSimpleFor(m => m.Description);
});
items.AddGroup()
.Caption("Principal")
.ColCount(2)
.ColSpan(2)
.Items(groupItems =>
{
groupItems.AddSimpleFor(m => m.Principal).Template(new TemplateName("EmbeddedDataGridMultiple")).ColSpan(2);
});
}))
)
)