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:

Created:

Updated:

Platform:

Replies:

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

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 [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")))



@(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.

CONFIRMATION

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.

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

;