How can Add Column Dynamically in Grid

[Cyrille]

Hi Team,

I have requirement of Grid , I need to add column Dynamically (e.g :- col 1, col2 , col3 , ..... etc) using Model. can you please tell me how i will achieve my requirement.

[Joseph Christ Nithin Issack]

Hi Cyrille, 

   Greetings from Syncfusion sotware. 

   Based on your requirement you need to add columns dynamically using the model. Before we proceed to the solution we would like you to confirm the following details so that we will be able to provide a better solution ASAP.  

• Do you want to add the columns in the server side or add the columns already existing in the model.
• Do you want to add the columns in the specific index or as the last column.
• Please share the complete grid rendering code you are using.

Regards, 

Joseph I. 

[Cyrille]

• Do you want to add the columns in the server side or add the columns already existing in the model.

For example : Below model i have

public class IntrimTest

{

public int Id { get; set; }

public string IntrimName { get; set; }

public string Skill { get; set; }

public List ConstructionIntrims { get; set; }

}

public class ConstructionIntrim

{

public int Id { get; set; }

public int constId { get; set; }

public string ConstructionName{get;set;}

public int workhr { get; set; }

}

so i need to display column :- IntrimName , Skill , and list of ConstructionName as column(this name can be 10-or 20 and these all column come from database)

• Do you want to add the columns in the specific index or as the last column.

This all column name will come from database and i need to update work hour value in different table

• Please share the complete grid rendering code you are using.

@{ List<object> commands = new List<object>();

commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } });

commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); }

@Html.EJS().Grid("ResourceMonthView").DataSource(dataManager =>

{

dataManager.Url("/Resource/GetDataTurnOver").UpdateUrl("/Resource/UpdateResourceMonthView").Adaptor("UrlAdaptor");

}).Columns(col =>

{

col.Field("Id").HeaderText("Id").IsPrimaryKey(true).Width("Auto").Visible(false).Add();

col.Field("IntrimName ").HeaderText("Intrim Name").Width("Auto").AllowEditing(false).CustomAttributes(new { @class = "customcss" }).Add();

foreach(var ConstructionIntrim in Viewsource.ConstructionSource)

{

col.Field("Id").HeaderText("Id").IsPrimaryKey(true).Width("Auto").Visible(false).Add();

col.Field("ConstructionName ").HeaderText("%Name From DB").Width("Auto").AllowEditing(false).CustomAttributes(new { @class = "customcss" }).Add();

 here i sneed to display customer name from DB as column name and row will have input text box for insert value of Hour.

}

col.Width("80").Commands(commands).Add();

}).Locale("fr-CH").EditSettings(edit =>

{

edit.AllowAdding(false).AllowEditing(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal);

}).Render()

[Rajapandi Ravi]

Hi Cyrille, 

Thanks for the update 

We have analyzed your query and since your column was a collection in the model. So, we suspect that you are maintaining a complex data binding in your model class and based on that we have prepared a sample with complex binding. Please refer the below code example and sample for more information. 

Index.cshtml 

<ejs-grid id="Grid" allowPaging="true" allowSorting="true" toolbar="@(new List<string>() {"Search" })"> 

    <e-data-manager url="/Home/UrlDatasource" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="100"></e-grid-column> 

        <e-grid-column field="Customer.CustomerId" headerText="ID" width="120"></e-grid-column> //complex data binding columns 

        <e-grid-column field="Customer.Name" headerText="Name" width="100"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

HomeController.cs 

public IActionResult UrlDatasource([FromBody]DataManagerRequest dm) 

        { 

            IEnumerable<OrdersData> DataSource = OrdersData.GetAllRecords().AsEnumerable();  

            DataOperations operation = new DataOperations(); 

            List<string> str = new List<string>(); 

            if (dm.Aggregates != null) 

            { 

                for (var i = 0; i < dm.Aggregates.Count; i++) 

                    str.Add(dm.Aggregates[i].Field); 

            } 

            IEnumerable aggregate = operation.PerformSelect(DataSource, str); 

 

            if (dm.Search != null && dm.Search.Count > 0) 

            { 

                DataSource = operation.PerformSearching(DataSource, dm.Search);  //Search 

            } 

            if (dm.Sorted != null && dm.Sorted.Count > 0) //Sorting 

            { 

                DataSource = operation.PerformSorting(DataSource, dm.Sorted); 

            } 

            if (dm.Where != null && dm.Where.Count > 0) //Filtering 

            { 

                DataSource = operation.PerformFiltering(DataSource, dm.Where, dm.Where[0].Operator); 

            } 

            int count = DataSource.Cast<OrdersData>().Count(); 

            if (dm.Skip != 0) 

            { 

                DataSource = operation.PerformSkip(DataSource, dm.Skip);   //Paging 

            } 

            if (dm.Take != 0) 

            { 

                DataSource = operation.PerformTake(DataSource, dm.Take); 

            } 

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource); 

        } 

public class OrdersData 

        { 

            public static List<OrdersData> 

    order1 = new List<OrdersData> 

        (); 

            public OrdersData() 

            { 

 

            } 

            public OrdersData(int UnitID, int N2, int N1, int EmployeeId, Customer Customer, string ShipName, string ShipAddress) 

            { 

                this.UnitID = UnitID; 

                this.N1 = N1; 

                this.N2 = N2; 

                this.EmployeeID = EmployeeId; 

                this.Customer = Customer; 

                this.ShipName = ShipName; 

                this.ShipAddress = ShipAddress; 

            } 

            public static List<OrdersData> 

                GetAllRecords() 

            { 

                if (order1.Count() == 0) 

                { 

                    int code = 10; 

                    for (int i = 1; i < 3; i++) 

                    {                                                  //set the value here for another model class fields 

                          order1.Add(new OrdersData(code+1,28, 16, 3,new Customer { CustomerId = 7, Name = "Vinet" }, " bistro", "Kirchgasse 6")); 

                        order1.Add(new OrdersData(code + 1, 10, 15, 2, new Customer { CustomerId = 5, Name = "John" }, " Cozinha",  "Avda. Azteca 123")); 

                        order1.Add(new OrdersData(code + 2, 15 ,29, 3, new Customer { CustomerId = 9, Name = "Scott" }, "Frankenversand", "Carrera 52 con Ave. Bolívar #65-98 Llano Largo" )); 

                        order1.Add(new OrdersData(code + 3, 18, 30, 4, new Customer { CustomerId = 1, Name = "Robert" }, " Handel","Magazinweg 7")); 

                        order1.Add(new OrdersData(code + 4, 22, 25, 1, new Customer { CustomerId = 4, Name = "James" }, " Carnes","1029 - 12th Ave. S.")); 

                        code += 5; 

                    } 

                } 

                return order1; 

            } 

            public int? UnitID { get; set; } 

            public int? EmployeeID { get; set; } 

 

            public int? N1 { get; set; } 

            public int? N2 { get; set; } 

            public  Customer Customer { get; set; } 

            public string ShipName { get; set; } 

            public string ShipAddress { get; set; } 

 

        } 

        public class Customer //another model class 

        { 

            public static List<Customer> order1 = new List<Customer>(); 

            public Customer() 

            { 

 

            } 

 

            public long CustomerId { get; set; } 

            public string Name { get; set; } 

        } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/168165/ze/16816535333574.zip 

Note: We have checked your shared information and we could see that you are using two primary columns in a Grid and setting the column visibility as False. By default, all the CRUD actions in EJ2 Grid are performed based on the primary key. So, we suggested you set isPrimaryKey as true in any one of unique column.  

Regards,
Rajapandi R 

[Cyrille]

Thanks for reply but still my requirement is not match.

I want Vinet , John , scott, Robert as column header and column name.  below is screenshot of requirement of grid.

Emoplye Id	Id	Vinet	John	Scott	Robert	James
3	7	<textbox>	<textbox>	<textbox>	<textbox>	<textbox>
2	5	<textbox>	<textbox>	<textbox>	<textbox>	<textbox>

[Rajapandi Ravi]

Hi Cyrille, 

Thanks for the update 

By default, in our Grid the column will rendered based on field names which we defined in the column’s property. Based on your query we suspect that you like to render the column values “Vinet, Scott, John” as column header. We don’t have Support to render the cell value as column header in Grid. 

Regards,
Rajapandi R 

[Cyrille]

Thanks for Update.

[Rajapandi Ravi]

Hi Cyrille, 

Please get back to us if you need any other assistance. 

Regards, 

Rajapandi R