Local Data

19 Sep 202323 minutes to read

List binding

To bind list binding to the grid, you can assign a IEnumerable object to the dataSource property. The list data source can also be provided as an instance of the DataManager.

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true">
            
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer Name" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText=" Order Date" textAlign="Right" format="yMd" width="130"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="ShippedDate" headerText="Shipped Date" textAlign="Right" format="yMd" width="140"></e-grid-column>                
        <e-grid-column field="ShipCountry" headerText="Ship Country" width="150"></e-grid-column>
    </e-grid-columns>

 </ejs-grid>
public IActionResult Index()
{
    var Order = OrderDetails.GetAllRecords();
    ViewBag.DataSource = Order;
    return View();
}

NOTE

By default, DataManager uses JsonAdaptor for list data-binding.

ExpandoObject binding

The grid is a generic component that is firmly bound to a model type. There are cases when the model type is unknown during the compile type. In such cases, bind data to the grid as a list of ExpandoObject.

The ExpandoObject can be bound to the data grid by assigning it to the DataSource property. The grid can also perform all kinds of supported data operations and editing in ExpandoObject.

<ejs-grid id="ExpandoObjectGrid" dataSource="ViewBag.ExpandoData" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})">
<e-grid-groupSettings showGroupedColumn="true" showDropArea="true"></e-grid-groupSettings>
            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" newRowPosition="Top"></e-grid-editSettings>
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column>
                <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
                <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column>
                <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
            </e-grid-columns>
</ejs-grid>
public static List<ExpandoObject> ExpandoOrders { get; set; } = new List<ExpandoObject>();

protected IActionResult Index()
{
    string[] customerIDs = { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" };
    string[] shipCountrys = { "USA", "UK", "Denmark", "Australia", "India" };
    ExpandoOrders = Enumerable.Range(1, 5).Select((x) =>
    {
        dynamic d = new ExpandoObject();
        d.OrderID = 1000 + x;
        d.CustomerID = customerIDs[x % customerIDs.Length];
        d.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;
        d.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];
        d.ShipCountry = shipCountrys[x % shipCountrys.Length];
        return d;
    }).Cast<ExpandoObject>().ToList<ExpandoObject>();
    ViewBag.ExpandoData = ExpandoOrders;
    return View();
}

ExpandoObject with complex column binding

You can achieve the ExpandoObject complex data binding in the data grid by using the dot(.) operator in the column.field. In the following examples, Customer.OrderDate, Customer.Freight, and Customer.ShipCountry are complex data.

<ejs-grid id="ExpandoObjectGrid" dataSource="ViewBag.ExpandoData" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})">
            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" newRowPosition="Top"></e-grid-editSettings>
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column>
                <e-grid-column field="Customer.OrderDate" headerText="Order Date" editType="datetimepickeredit" customFormat="@(new {type = "datetime", format = "M/d/y hh:mm a" })" width="160"></e-grid-column>
                <e-grid-column field="Customer.Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column>
                <e-grid-column field="Customer.ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
            </e-grid-columns>
</ejs-grid>
public static List<ExpandoObject> ExpandoOrders { get; set; } = new List<ExpandoObject>();

public IActionResult Index()
{
    ExpandoOrders = Enumerable.Range(1, 75).Select((x) =>
    {
        dynamic d = new ExpandoObject();
        d.OrderID = 1000 + x;
        d.Customer = new ExpandoObject();
        d.Customer.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;
        d.Customer.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];
        d.Customer.ShipCountry = (new string[] { "USA", "UK", "Denmark", "Australia", "India" })[new Random().Next(5)];
        d.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;
        d.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];
        d.ShipCountry = (new string[] { "USA", "UK" })[new Random().Next(2)];
        d.Verified = (new bool[] { true, false })[new Random().Next(2)];
        return d;
    }).Cast<ExpandoObject>().ToList<ExpandoObject>();
    ViewBag.ExpandoData = ExpandoOrders;
    return View();
}

NOTE

Perform data and CRUD operations for complex ExpandoObject binding fields as well.

The following image represents ExpandoObject complex data binding.
Grid with ExpandoObject Binding

DynamicObject binding

The grid is a generic component that is firmly bound to a model type. There are cases when the model type is unknown during the compile type. In such cases, bind data to the grid as a list of DynamicObject.

A DynamicObject can be bound to a data grid by assigning it to the DataSource property. The grid can also perform all kinds of supported data operations and editing in DynamicObject.

NOTE

You must override the GetDynamicMemberNames method of the DynamicObject class and return the property names to perform data operation and editing while using DynamicObject.

<ejs-grid id="DynamicObjectGrid" dataSource="ViewBag.DynamicData" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})">
<e-grid-groupSettings showGroupedColumn="true" showDropArea="true"></e-grid-groupSettings>
            <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Normal" newRowPosition="Top"></e-grid-editSettings>
            <e-grid-columns>
                <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column>
                <e-grid-column field="CustomerID" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column>
                <e-grid-column field="Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column>
                <e-grid-column field="ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
            </e-grid-columns>
</ejs-grid>
public static List<DynamicDictionary> DynamicOrders { get; set; } = new List<DynamicDictionary>();

protected IActionResult Index()
{
    string[] customerIDs = { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" };
    string[] shipCountrys = { "USA", "UK", "Denmark", "Australia", "India" };
    DynamicOrders = Enumerable.Range(1, 5).Select((x) =>
    {
        dynamic d = new DynamicDictionary();
        d.OrderID = 1000 + x;
        d.CustomerID = customerIDs[x % customerIDs.Length];
        d.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;
        d.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];
        d.ShipCountry = shipCountrys[x % shipCountrys.Length];
        return d;
    }).Cast<DynamicDictionary>().ToList<DynamicDictionary>();
    ViewBag.DynamicData = DynamicOrders;
    return View();
}

public class DynamicDictionary : DynamicObject
{
    public Dictionary<string, object> dictionary = new Dictionary<string, object>();

    public override bool TryGetMember(GetMemberBinder binder, out object result)
    {
        string name = binder.Name;
        return dictionary.TryGetValue(name, out result);
    }
    public override bool TrySetMember(SetMemberBinder binder, object value)
    {
        dictionary[binder.Name] = value;
        return true;
    }

    public override System.Collections.Generic.IEnumerable<string> GetDynamicMemberNames()
    {
        return this.dictionary?.Keys;
    }

}

DynamicObject with complex column binding

You can achieve DynamicObject complex data binding in the data grid by using the dot(.) operator in the column.field. In the following examples, Customer.OrderDate, Customer.Freight, and Customer.ShipCountry are complex data.

<ejs-grid id="DynamicObjectGrid" dataSource="ViewBag.DynamicData" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string>() {"Add", "Edit", "Delete", "Update", "Cancel"})">
    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top"></e-grid-editSettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" validationRules="@(new { required=true, number=true})" width="140"></e-grid-column>
        <e-grid-column field="Customer.OrderDate" headerText="Order Date" editType="datetimepickeredit" customFormat="@(new {type = "datetime", format = "M/d/y hh:mm a" })" width="160"></e-grid-column>
        <e-grid-column field="Customer.Freight" headerText="Freight" validationRules="@(new { required=true})" textAlign="Right" editType="numericedit" format="C2" width="140"></e-grid-column>
        <e-grid-column field="Customer.ShipCountry" headerText="Ship Country" editType="dropdownedit" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public static List<DynamicList> DynamicOrders { get; set; } = new List<DynamicList>();

public IActionResult Index()
{
    DynamicOrders = Enumerable.Range(1, 75).Select((x) =>
    {
        dynamic d = new DynamicList();
        d.OrderID = 1000 + x;
        d.Customer = new DynamicList();
        d.Customer.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;
        d.Customer.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];
        d.Customer.ShipCountry = (new string[] { "USA", "UK", "Denmark", "Australia", "India" })[new Random().Next(5)];
        d.Freight = (new double[] { 2, 1, 4, 5, 3 })[new Random().Next(5)] * x;
        d.OrderDate = (new DateTime[] { new DateTime(2010, 11, 5), new DateTime(2018, 10, 3), new DateTime(1995, 9, 9), new DateTime(2012, 8, 2), new DateTime(2015, 4, 11) })[new Random().Next(5)];
        d.ShipCountry = (new string[] { "USA", "UK" })[new Random().Next(2)];
        d.Verified = (new bool[] { true, false })[new Random().Next(2)];
        return d;
    }).Cast<DynamicList>().ToList<DynamicList>();
    ViewBag.DynamicData = DynamicOrders;
    return View();
}

public class DynamicList : DynamicObject
{
    private List<KeyValuePair<string, object>> properties = new List<KeyValuePair<string, object>>();

    public override bool TryGetMember(GetMemberBinder binder, out object result)
    {
        string name = binder.Name;
        var property = properties.Find(p => p.Key == name);
        result = property.Value;
        return property.Key != null;
    }

    public override bool TrySetMember(SetMemberBinder binder, object value)
    {
        string name = binder.Name;
        var property = properties.Find(p => p.Key == name);
        if (property.Key != null)
        {
            properties.Remove(property);
        }

        properties.Add(new KeyValuePair<string, object>(name, value));
        return true;
    }


    public override IEnumerable<string> GetDynamicMemberNames()
    {
        return properties.ConvertAll(p => p.Key);
    }
}

NOTE

Perform data and CRUD operations for complex DynamicObject binding fields as well.

The following image represents DynamicObject complex data binding.
Grid with DynamicObject Binding

Refresh the data source

You can add/delete the data source records through an external button. To reflect the data source changes in the grid, invoke the refresh method.

To refresh the data source:

Step 1:

Add/delete the data source record by using the following code.

    grid.dataSource.unshift(data); // add a new record.

    grid.dataSource.splice(selectedRow, 1); // delete a record.

Step 2:

Refresh the grid after the data source change by using the refresh method.

    grid.refresh(); // refresh the Grid.
<ejs-button id="add" content="Add" isPrimary="true"></ejs-button>
<ejs-button id="delete" content="Delete" isPrimary="true"></ejs-button>

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID"  width="150"></e-grid-column>       
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="ShipName" headerText="Ship Name" width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

<script>
document.getElementById('add').onclick = function() {
    var grid = document.getElementById("Grid").ej2_instances[0];
    var data = { OrderID: 10247, CustomerID: "ASDFG", Freight: 40.4, OrderDate: new Date(8367642e5) };
    grid.dataSource.unshift(data); // add new record.
    grid.refresh(); // refresh the Grid.
};

document.getElementById('delete').onclick = function() {
    var grid = document.getElementById("Grid").ej2_instances[0];
    if (grid.getSelectedRowIndexes().length) {
        var selectedRow = grid.getSelectedRowIndexes()[0];
        grid.dataSource.splice(selectedRow, 1); // delete the selected record.
    } else {
        alert("No records selected for delete operation");
    }
    grid.refresh(); // refresh the Grid.
};

</script>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}