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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Child Grid Model Binding

Thread ID:

Created:

Updated:

Platform:

Replies:

125010 Jul 14,2016 09:59 AM UTC Mar 7,2018 05:02 AM UTC ASP.NET MVC 3
loading
Tags: Grid
CLAUDIO RICCARDI
Asked On July 14, 2016 09:59 AM UTC

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.

Karthick Kuppusamy [Syncfusion]
Replied On 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. 


Henryk
Replied On March 7, 2018 12:35 AM UTC

Thank you, this helped me too!


Vignesh Natarajan [Syncfusion]
Replied On 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  


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;