ASP.NET MVC Controls
Quick Start
ASP.NET MVC Controls > Controls > CollectionView > Quick Start

This section describes how to useCollectionView with FlexGrid control in your MVC web application.

This topic comprises of three steps:

The following image shows how the FlexGrid appears after completing the steps above:

Component One MVC Edition CollectionView Quick Start

Back to Top

Step 1: Create an MVC Application

Create a new MVC application using the ComponentOne templates. For more information about creating an MVC application, see Configuring your MVC Application topic.

Step 2: Configure the Datasource for your Application

The example uses C1NWind database. The C1NWind.mdf file is available on your system in C:\Users\<username>\Documents\ComponentOne Samples\ASP.NET MVC\MVC\MvcExplorer\App_Data.
  1. Add C1NWind.mdf file to the AppData folder in the Solution Explorer.
  2. In the Solution Explorer, right-click Models|Add New Item|Data, and select ADO.NET Entity Data Model.
  3. Name the model as C1NWind, and click Add.
  4. In the Entity Data Model Wizard, select EF Designer from database, click Next. C1NWind.mdf database is added to the data connection dropdown.
  5. Click Next to choose Entity Framework version, and click Next.
  6. In the Choose Your Database Objects and Settings, select Tables, and click Finish.

If you can see C1NWind.edmx added to your project under the Models folder, you have successfully configured the datasource for your application.

Back to Top

Step 3: Add a FlexGrid control

Complete the following steps to initialize a FlexGrid control.

Add a new Controller

  1. In the Solution Explorer, right click the folder Controllers.
  2. From the context menu, select Add | Controller. The Add Scaffold dialog appears.
  3. Complete the following steps in the Add Scaffold dialog:
    1. Select Empty MVC Controller template.
    2. Set name of the controller (for example: Default1Controller).
    3. Click Add.
  4. Include the MVC references as shown below.
    C#
    Copy Code 
    using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using CollectionView_EN.Models;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc;
using C1.Web.Mvc.Serializition;
using System.Data.Entity.Validation;
using System.Data.Entity;
using System.Data;

    Note: Replace CollectionView_EN.Models; with <YourMVCApplicationName>.Models; in the references.
  5. Replace the method Index() with the following method.

    IndexController.cs

    C#
    Copy Code 
    //Define datasource for FlexGrid
private C1NWindEntities db = new C1NWindEntities();
public ActionResult Index()
{
    return View();
}
//Instantiate a JSON request
public ActionResult GridReadCategory([C1JsonRequest] CollectionViewRequest<Category> requestData)
{
    return this.C1Json(CollectionViewHelper.Read(requestData, db.Categories));
}

Add a View for the controller:

  1. From the Solution Explorer, expand the folder Controllers and double click the controller (for example: Default1Controller) to open it.
  2. Place the cursor inside the method Index().
  3. Right click and select Add View. The Add View dialog appears.
  4. In the Add View dialog, verify that the View name is Index and View engine is Razor (CSHTML).
  5. Click Add. A view has been added for the controller.
  6. In the Solution Explorer, double click Index.cshtml to open it.
  7. Replace the default code of the Views\Index.cshtml file with the one given below to initialize a FlexGrid control.

    In this example, the GridReadCategory action of controller is assigned to Bind property of FlexGrid' ItemSource to populate data.

    Razor (Index.cshtml)
    Copy Code 
    @(Html.C1().FlexGrid().Id("fGRCView").AutoGenerateColumns(false).AllowAddNew(true)
    .AllowSorting(true).CssClass("grid")
    .Columns(columns => columns
        .Add(c => c.Binding("CategoryID"))
        .Add(c => c.Binding("CategoryName"))
        .Add(c => c.Binding("Description").Width("500")))
    .Bind(
        ib => ib.Bind(Url.Action("GridReadCategory"))
    )
)

Step 4: Build and Run the Project

  1. Click Build | Build Solution to build the project.
  2. Press F5 to run the project.

Back to Top

 

 

Copyright © GrapeCity, inc. All rights reserved.

Product Support Forum |  Documentation Feedback