Add columns dynamically from controller or through script

[Gomtesh]

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..?

[Seeni Sakthi Kumar Seeni Raj]

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.