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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add columns dynamically from controller or through script

Thread ID:





123170 Feb 23,2016 11:03 AM UTC Feb 24,2016 06:22 AM UTC ASP.NET MVC 1
Tags: Grid
Asked On February 23, 2016 11:03 AM UTC


When I use grid in mvc for any module I used following code:

         //   .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
                 .ToolbarSettings(toolBar => toolBar.ShowToolbar(true).ToolbarItems(items =>
                         //   items.AddTool(ToolBarItems.Delete);
        .Columns(col =>
            col.Field("FirstName").HeaderText("First Name").Width(80).Add();
            col.Field("LastName").HeaderText("Last Name").Width(75).Add();
            col.Field("MobileNo").HeaderText("Mobile No").TextAlign(TextAlign.Right).Width(80).Add();
            col.Field("ReferedBy").HeaderText("Refered By").Width(110).Add();

Instead of defining columns statically, I want to add these columns through javascript or controller,
Is there any way for this..?

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On February 24, 2016 06:22 AM UTC

Hi Gomtesh,

Thanks for using Syncfusion Products.

We can update the Grid columns using either at the client side or else using the code behind.

Using Columns() of ejGrid, we can dynamically update/remove the columns from the Grid and also we can push column object to the column of Grid model. Refer to the following code example and Help Document.

@(Html.EJ().Button("ClickMe").Text("Click Me").Type(ButtonType.Button).ClientSideEvents(events=>events.Click("click")))



         .. . .




    function load(args) {

        this.model.columns.push({ field: "ShipName", headerText: "Ship Name" });

        this.model.columns.push({ field: "EmployeeID", headerText: "Employee ID" });


    function click(args) {//update grid columns using columns()

        var obj = $("#FlatGrid").ejGrid("instance");

        obj.columns("CustomerID", "add");//Add column

        obj.columns("CustomerID", "remove");//remove column

        obj.columns([{ field: "ShipCity", headerText: "ShipCity" }])//Add an array of object



Using GridProperties, we can update the Grid columns from controller end.  Refer to the code example.



        .. . ..

        .Columns(ViewBag.cols) //use the columns ViewBag

namespace MvcApplication66.Controllers


    public class HomeController : Controller


        public ActionResult Index()


            ViewBag.dataSource = OrderRepository.GetAllRecords();

            List<Column> cols = new List<Column>();// Column is a class of Syncfusion Javascript models

            cols.Add(new Column() { Field = "OrderID", HeaderText = "Order ID"});//Add some column

            ViewBag.cols = cols; //update them in ViewBag

            return View();



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

Sample: http://www.syncfusion.com/downloads/support/forum/123170/ze/Dynamic_Columns-1104901244

Seeni Sakthi Kumar S.


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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