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
