We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Child Grid Model Binding

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>
<!--PARENT GRID-->
    @(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(); 
                        }); 
                         
                 }) 
 
) 
 
 
 
 
    <script type="text/javascript"> 
        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. 




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, 
Vignesh Natarajan  


Loader.
Up arrow icon