# Remote Data Binding

Develop powerful and lightweight web applications using ASP.NET MVC controls. Learn more about the ComponentOne MVC controls in ASP.NET MVC documentation.

## Content



FlexGrid allows you to retrieve data directly using **C1JSONRequest**. This specifies remote data URLs that include the server, table and columns. The arrays returned are used as data sources for **CollectionView** objects.

CollectionViewHelper is a static class that enables collections to have editing, filtering, grouping, and sorting services. This class also includes the following methods:

*   **Read()**: Retrieves data from the collection.
*   **Edit()**: Enables excel-style editing in FlexGrid. See [Excel-Style Editing](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/workwithflexgrid/editing/FlexGridExcelStyleEditing) for more information.
*   **BatchEdit()**: Allows editing multiple items at a time. See [Batch Editing](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/workwithflexgrid/editing/FlexGridBatchEditing) for more information.

The `Bind` property in FlexGrid is used to bind it to a collection by passing an action URL method to carry out a specific operation.

This topic demonstrates how to retrieve data from an existing data source remotely. This is useful for developing data-intensive applications and scenarios for representing data as dashboards. Refer to **Quick Start: Add data to FlexGrid** for explanation of [Local Model Binding](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart).

The following image shows how the FlexGrid appears after making the C1JSON Request to fetch data from the model, Sale.cs, which was added to the application in the [QuickStart](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart):

![](https://cdn.mescius.io/document-site-files/images/2b3ac322-100e-4637-958d-fb40dcda3f44/images/flexgriddatabinding.png)

The following code examples demonstrate how to bind FlexGrid to fetch data from remote datasource:

#### In Code

**RemoteBindController.cs**

```csharp
public partial class FlexGridController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
    public IActionResult Index_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData)
    {
        return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(15)));
    }
}
```

**RemoteBind.cshtml**

```razor
@using C1.Web.Mvc.Grid
@(Html.C1().FlexGrid()
    .AutoGenerateColumns(false)
    .AllowSorting(true)
    .Bind(Url.Action("Index_Bind"))
    .CssClass("grid")
    .SelectionMode(SelectionMode.Row)
    .Columns(columns =>
    {
        columns.Add(column => column.Binding("ID").Visible(false));
        columns.Add(column => column.Binding("Start").Format("MMM d yy"));
        columns.Add(column => column.Binding("End").Format("HH:mm"));
        columns.Add(column => column.Binding("Country"));
        columns.Add(column => column.Binding("Product"));
        columns.Add(column => column.Binding("Amount").Format("c"));
        columns.Add(column => column.Binding("Discount").Format("p0")); 
    })
)
```

## See Also

[Quick Start](/componentone/docs/mvc/online-mvc/workwithcontrols/FlexGrid/FlexGridQuickStart)

**Reference**

[FlexGrid\<T> Class](/componentone/api/mvc/online-mvc/dotnet-framework-api/C1.Web.Mvc/C1.Web.Mvc.FlexGrid-1.html)