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.
Unfortunately, activation email could not send to your email. Please try again.

Add columns dynamically from controller or through script

Thread ID:





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


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 01:22 AM

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.

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.