Dynamically add columns

[Unknown]

Good Morning,

I'm using the sync fusion MVC grid in an application I'm working on and there is some functionality I need to implement which I'm struggling with so I;m hoping someone might be able to point me in the right direction.

I have a result set for a report which I want to display in the sync fusion grid. It has some basic properties, Name, Email etc. But also each record has a collection of 'Breakdowns'. All of the records in the result set will have the same number of breakdowns however the number of breakdowns can change depending on the search criteria the user enters.

I have the grid generating the correct columns however as you can see below I'm using the first result's data for the breakdowns for every row which obviously isn't correct.

The code in my view is as follow:

@(Html.EJ().Grid<AppraisalSummary>("ResultsGrid")
                      .Datasource((IEnumerable<AppraisalSummary>)Model.Results.Results)
                      .Locale("en-GB").AllowScrolling(true).ScrollSettings(col => { col.Height(450); }).MinWidth(905).EnableAltRow()
                      .IsResponsive(true).AllowResizing().AllowResizeToFit().ClientSideEvents(e => e.RowSelected("row_clicked"))
                      .Columns(col =>
                      {
                          col.Field(f => f.RecordUrl).HeaderText("RecordUrl").Visible(false).CssClass("RecordUrl");
                          col.Field(f => f.Title).HeaderText("Title").Add();
                          col.Field(f => f.FirstName).HeaderText("First Name").Add();
                          col.Field(f => f.MI).HeaderText("MI").Add();
                          col.Field(f => f.LastName).HeaderText("Last Name").Add();
                          col.Field(f => f.Email).HeaderText("Email").Add();
                          col.Field(f => f.DoctorType).HeaderText("Doctor Type").Add();
 
                          Model.Results.Results.First().Breakdowns.ForEach((b) => //todo: This is using the first result for every row
                          {
                              col.HeaderText("Due").Format(b.Due.ToString()).Add();
                              col.HeaderText("Completed").Format(b.Completed.ToString()).Add();
                              col.HeaderText("%").Format(b.PercentageComplete.ToString()).Add();
                          }
                          );
                      })
                )

Just so you can see what I'm working with the classes that the results are based on are stored as follows:

public class AppraisalSummary
    {
        public Guid Id { get; set; }
        public string RecordUrl { get; set; }
        public string Title { get; set; }
        public string FirstName { get; set; }
        public string MI { get; set; }
        public string LastName { get; set; }
        public string Email { get; set; }
        public string DoctorType { get; set; }
 
 
        public List<AppraisalSummaryTypeBreakdown> Breakdowns { get; set; }
    }

public class AppraisalSummaryTypeBreakdown
   {
       public Guid? TypeId { get; set; }
       public string TypeName { get; set; }
       public int Due { get; set; }
       public int Completed { get; set; }
       public double PercentageComplete { get; set; }
   }

Thanks in advance,
Jason

[Seeni Sakthi Kumar Seeni Raj]

Hi Jason, 

We suspect that you would like to bind Complex columns to the Grid. To bind the complex columns, you have to mention the field name with the corresponding field name followed by the Table name which has been concatenated by dot (.). In you case, the Complex column is like an array, so you have to concatenate the table along with an index value of the row. Refer to the following code example. 

@(Html.EJ().Grid<AppraisalSummary>("ResultsGrid") 

         .Datasource((IEnumerable<AppraisalSummary>)Model) 

         .Columns(col => 

            { 

            . ..  

 

                //Complex columns 

                col.Field("Breakdowns.0.Completed").Add(); 

                col.Field("Breakdowns.0.Due").Add(); 

                col.Field("Breakdowns.0.PercentageComplete").Add(); 

            }) 

) 

We have also prepared a sample that can be downloaded from the following location. 

Sample: http://www.syncfusion.com/downloads/support/directtrac/166022/ze/I1660221543704451.zip 

Regards, 

Seeni Sakthi Kumar S.