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. Image for the cookie policy date

Add columns dynamically from controller or through script

Hi,

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

                   @(Html.EJ().Grid<Sample.ViewModel.UserVM>("FlatGrid")
        .Datasource((IEnumerable<object>)ViewBag.UserList)
        .AllowSorting()
        .AllowPaging()
         .ShowColumnChooser()
         .AllowFiltering()
         //   .FilterSettings(filter => { filter.FilterType(FilterType.Menu); })
         .AllowSearching()
         .AllowSelection()
         
                 .ToolbarSettings(toolBar => toolBar.ShowToolbar(true).ToolbarItems(items =>
                        {
                            items.AddTool(ToolBarItems.Add);
                            //items.AddTool(ToolBarItems.Edit);
                         //   items.AddTool(ToolBarItems.Delete);
                            items.AddTool(ToolBarItems.ExcelExport);
                            items.AddTool(ToolBarItems.WordExport);
                            items.AddTool(ToolBarItems.PdfExport);
                            items.AddTool(ToolBarItems.PrintGrid);
                        }))                          
        .Columns(col =>
        {
            col.Field("Id").HeaderText("ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
            col.Field("FirstName").HeaderText("First Name").Width(80).Add();
            col.Field("LastName").HeaderText("Last Name").Width(75).Add();
            col.Field("Address").HeaderText("Address").Width(75).Add();
            col.Field("MobileNo").HeaderText("Mobile No").TextAlign(TextAlign.Right).Width(80).Add();
            col.Field("Email").HeaderText("Email").Width(110).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..?

1 Reply

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team 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")))



@(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.dataSource)

         .. . .

        .ClientSideEvents(events=>events.Load("load"))

)


<script>

    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

    }
</script>


http://help.syncfusion.com/js/api/ejgrid#methods:columns

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

@(Html.EJ().Grid<object>("FlatGrid")

        .Datasource((IEnumerable<object>)ViewBag.dataSource)

        .. . ..

        .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

Regards,
Seeni Sakthi Kumar S.

Loader.
Up arrow icon