Articles in this section
Category / Section

How to update both dataSource and columns simultaneously in grid?

3 mins read

This documentation explained how to update both dataSource and columns simultaneously in grid.

Solution

Usually grid column and datasource are updated using columns and dataSource methods respectively.

 

But updating those one after another will cause the DOM to update twice and in case of remote databinding in grid, it would send two requests to server-side. This can be optimized by using columns property instead of columns methods and then finally call dataSource method to provide the dataSource to Grid.

 

HTML

<input id="reupdate" type="button">
<div id="Grid"></div>

 

Js

1. Render the Grid control.

$("#Grid").ejGrid({
                dataSource: window.gridData, // the datasource "window.gridData" is referred from jsondata.min.js
               allowPaging: true,
                columns: [
                             { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, width: 90 },
                             { field: "Freight", headerText: "Freight", width: 90 },
                             { field: "CustomerID", headerText: "Customer ID", width: 90 },
                             { field: "EmployeeID", headerText: "Employee ID", width: 90 },
                             { field: "ShipName", headerText: "Ship Name", width: 90 }
                ]
            });

 

Razor

@(Html.EJ().Grid<object>("Grid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
        .AllowPaging()
        .Columns(col =>
        {
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add();
            col.Field("Freight").HeaderText("Freight").Width(90).Add();
            col.Field("CustomerID").HeaderText("Customer ID").Width(90).Add();
            col.Field("EmployeeID").HeaderText("Employee ID").Width(90).Add();
            col.Field("ShipName").HeaderText("Ship Name").Width(90).Add();
        })
)

 

Controller

namespace mvc.Controllers
{
    public class GridController : Controller
    {
        public ActionResult GridFeatures()
        {
            var DataSource = new NorthwindDataContext().OrdersViews.ToList();
            ViewBag.datasource = DataSource;
            return View();
        }
    }
}

Aspx

<ej:Grid ID="Grid" runat="server" AllowPaging="true">
        <Columns>
            <ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="90" />
            <ej:Column Field="Freight" HeaderText="Freight" Width="90" />
            <ej:Column Field="CustomerID" HeaderText="Customer ID" Width="90" />
            <ej:Column Field="EmployeeID" HeaderText="EmployeeID"  Width="90" />
            <ej:Column Field="ShipName" HeaderText="Ship Name"  Width="90" />
        </Columns>
 </ej:Grid>

 

Controller

namespace ExportSample
{
    public partial class GridFeatures : System.Web.UI.Page
    {
        List<Orders> order = new List<Orders>();
        public void BindData()
        {           
            this.Grid.DataSource = order;
            this.Grid.DataBind();
        }
    }
}

 

Core

<ej-grid id="Grid" allow-paging="true" datasource="ViewBag.datasource">
    <e-columns>
        <e-column field="OrderID" header-text="Order ID" is-primary-key="true" width="90"></e-column>
        <e-column field="Freight" header-text="Freight" width="90"></e-column>
        <e-column field="CustomerID" header-text="Customer ID" width="80"></e-column>
        <e-column field="EmployeeID" header-text="Employee ID" text-align="Left" width="75"></e-column>
        <e-column field="ShipName" header-text="Ship Name" width="110"></e-column>
    </e-columns>
</ej-grid>

 

Controller

namespace core.Controllers
{
    public partial class GridController : Controller
    {
        public static List<Orders> order = new List<Orders>();
        public ActionResult GridFeatures()
        {
            ViewBag.datasource = order;
            return View();
        }
}

 

Button click event

2. Changed the Grid dataSource and columns

$(function () {
        $("#reupdate").ejButton({
            text: "Reupdate Grid",
            click: function (args) {
                var cols = [
                    { field: "EmployeeID", headerText: "Employee ID", width: 90 },
                    { field: "FirstName", headerText: "First Name", width: 90 },
                    { field: "LastName", headerText: "Last Name", width: 90 },
                    { field: "Country", headerText: "Country", width: 90 }
                ]
                var gridObj = $("#Grid").ejGrid("instance");
                gridObj.model.columns = cols;  // changed the Grid columns
                gridObj.dataSource(window.employeeView, true); // Changed the Grid dataSource
                // the datasource "window.employeeView" is referred from jsondata.min.js
            }
        });
    });

 

Angular 2

<input id="reupdate" ej-button text="Reupdate Grid" (click)="click($event)" type="button">
 
<ej-grid id="Grid" #grid [dataSource]="gridData" [allowPaging]="true">
    <e-columns>
        <e-column field="OrderID" headerText="Order ID" [isPrimaryKey]="true" width="90"></e-column>
        <e-column field="Freight" headerText="CustomerID" width="90"></e-column>
        <e-column field="CustomerID" headerText="Customer ID" width="90"></e-column>
        <e-column field="EmployeeID" headerText="Employee ID" width="90"></e-column>
        <e-column field="ShipName" headerText="Ship Name" width="90"></e-column>
    </e-columns>
</ej-grid>

 

Typescript

@ViewChild('grid') Grid: EJComponents<any, any>;
    click()
    {
        var cols = [
                  { field: "EmployeeID", headerText: "Employee ID", width: 90 },
                  { field: "FirstName", headerText: "First Name", width: 90 },
                  { field: "LastName", headerText: "Last Name", width: 90 },
                  { field: "Country", headerText: "Country", width: 90 }
        ]
 
        this.Grid.widget.model.columns = [];
        this.Grid.widget.model.columns = cols;  // Change the columns of the Grid
        this.Grid.widget.dataSource(window.employeeView, true); // Chnage the dataSource of the Grid
        // the datasource "window.employeeView" is referred from jsondata.min.js
    }

 

The following output is displayed the above behavior

Fig1: Initial grid rendering

 

Fig2: After the button click

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied