Child Grid Model Binding

3 Replies
4 Participants

Created by
CR CLAUDIO RICCARDI

Platform
ASP.NET MVC

Platform
ASP.NET MVC

Control
Grid

Created On
Jul 14, 2016 09:59 AM UTC

Last Activity On
Mar 7, 2018 05:02 AM UTC

Want to subscribe?
SIGN IN

Hi,

I have a model with a one-to-many relation like this:

public class Quote

{

[Key]

[DatabaseGenerated(DatabaseGeneratedOption.Identity)]

[DisplayName("Quote Id")]

public int QuoteId { get; set; }

...

public virtual ICollection<QuoteEquipment> QuoteEquipments { get; set; }

}

I would like to use an editable hierarchical grid to edit both parents data and child data.

The parent data are correctly managed. What are the correct DataSource parameters for ChildGrid?

<div>

@(Html.EJ().Grid<SlimHub.Models.Quote>("QuoteGrid")

.Datasource(I WANT TO BIND Model IEnumerable<Quote>).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineFormTemplate).InlineFormTemplateID("#inlineQuoteTemplate"); })

//.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineForm); })

.Locale("it-IT")

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Delete);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

});

})

.EnableAltRow()

.AllowResizing()

.AllowTextWrap(false)

.EnableHeaderHover()

.AllowFiltering()

.AllowPaging()

.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.Columns(col =>

{

col.Field("QuoteId").HeaderText("ID").HeaderTextAlign(TextAlign.Center).IsPrimaryKey(true).Visible(true).TextAlign(TextAlign.Right).Width(10).Add();

col.Field("QuoteCode").HeaderText("Codice").HeaderTextAlign(TextAlign.Center).Width(10).Add();

col.Field("CustomerId").HeaderText("Cliente").ForeignKeyField("CustomerId").ForeignKeyValue("CustomerName").DataSource((IEnumerable<object>) ViewBag.Customers).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(75).Add();

col.Field("StartDate").HeaderText("Data Inizio Validità").Format("{0:dd/MM/yyyy}").EditType(EditingType.Datepicker).Width(20).Add();

col.Field("EndDate").HeaderText("Data Fine Validità").Format("{0:dd/MM/yyyy}").EditType(EditingType.Datepicker).Width(20).Add();

col.Field("NumInt").HeaderText("Numero Interventi").HeaderTextAlign(TextAlign.Right).Width(20).Add();

col.Field("NumIntGrat").HeaderText("Numero Interventi Gratuiti").HeaderTextAlign(TextAlign.Right).Width(20).Add();

col.Field("UnitPrice").Format("{0:c2}").HeaderText("Prezzo Unitario").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).NumericEditOptions(new EditorProperties() { DecimalPlaces = 2 }).ValidationRules(v => v.AddRule("range", "[0,1000]")).Format("{0:C}").Width(20).Add();

})

.ChildGrid(child =>

{

child.Datasource(I WANT TO BIND Quote.QuoteEquipments).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

.QueryString("QuoteId")

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.InlineForm); })

.Locale("it-IT")

.ToolbarSettings(toolbar =>

{

toolbar.ShowToolbar().ToolbarItems(items =>

{

items.AddTool(ToolBarItems.Add);

items.AddTool(ToolBarItems.Edit);

items.AddTool(ToolBarItems.Delete);

items.AddTool(ToolBarItems.Update);

items.AddTool(ToolBarItems.Cancel);

});

})

.EnableAltRow()

.AllowResizing()

.AllowTextWrap(false)

.EnableHeaderHover()

.AllowFiltering()

.AllowPaging()

.Columns(col =>

{

col.Field("QuoteEquipmentId").HeaderText("QuoteEquipmentId").IsPrimaryKey(true).TextAlign(TextAlign.Right).Visible(true).Width(5).Add();

col.Field("QuoteId").HeaderText("QuoteId").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(10).Add();

col.Field("EquipmentId").HeaderText("EquipmentId").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(10).Add();

col.Field("Quantity").HeaderText("Quantity").HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Right).Width(5).Add();

})

.ClientSideEvents(eve => { eve.ActionComplete("complete"); })

)

</div>

Can you help me?

Thanks in advance.

3 Replies

KK Karthick Kuppusamy Syncfusion Team July 19, 2016 02:11 PM UTC

Hi Claudio,

Thanks for contacting Syncfusion support.

We have analyzed your code example and we have created a simple list collection and binding same data source in both parentgrid and childgrid. Please find the code example.

List collection creation:

[C#]

public static List<Data> GetData() {

List<Data> obj = new List<Data>();

obj.Add(new Data() { OrderID = 1000, EmployeeID = 1, ShipCountry = "india", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 1, FirstNAme = "Janet", LastNAme = "David" }}});

obj.Add(new Data() { OrderID = 1001, EmployeeID = 2, ShipCountry = "France", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 2,FirstNAme = "Nancy", LastNAme = "John" }}});

obj.Add(new Data() { OrderID = 1002, EmployeeID = 3, ShipCountry = "US", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 3, FirstNAme = "David", LastNAme = "Staven" }}});

obj.Add(new Data() { OrderID = 1003, EmployeeID = 4, ShipCountry = "US", Employee = new List<ChildData>() { new ChildData() { EmployeeID = 4, FirstNAme = "Janet", LastNAme = "David" }}});

return obj;

}

Please find the code example

@(Html.EJ().Grid<object>("FlatGrid")

.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource).UpdateURL("/Grid/Update")

.InsertURL("/Grid/Insert").RemoveURL("/Grid/Remove").Adaptor(AdaptorType.RemoteSaveAdaptor))

.AllowPaging()

…

.Columns(col =>

{

col.Field("OrderID").IsPrimaryKey(true).AllowEditing(true).Add();

col.Field("EmployeeID").AllowEditing(true).Add();

col.Field("ShipCountry").AllowEditing(true).Add();

})

.ClientSideEvents(eve =>

{

eve.DetailsExpand("detailsexpand");

})

.ChildGrid(child =>

{

child.Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.datasource))

.QueryString("EmployeeID")

.AllowPaging()

.ClientSideEvents(e => e.Load("Load"))

.Columns(col =>

{

col.Field("FirstNAme").HeaderText("FirstName").Width(120).Add();

col.Field("LastNAme").HeaderText("LastName").Width(100).Add();

});

})

)

var chilGridDta;

function detailsexpand(args) {

chilGridDta = args.masterData.Employee;

}

function Load(args) {

this.model.dataSource = chilGridDta;

}

</script>

In above code example we have get equivalent parent through “DetailExpand” of Grid and we have bind the child grid dataSource through “Load” event of Grid. For your more reference please find the document and sample link as below.

http://help.syncfusion.com/js/api/ejgrid#events:detailscollapse.

http://help.syncfusion.com/js/api/ejgrid#events:detailsexpand.

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/RemoteSaveAdaptorSample-719954206.zip.

Regards,

K.Karthick.

HE Henryk March 7, 2018 12:35 AM UTC

Thank you, this helped me too!

VN Vignesh Natarajan Syncfusion Team March 7, 2018 05:02 AM UTC

Hi Henry,

Thanks for the update.

We are to glad to hear that your query has been resolved by our solution.

Regards,