The requested page is not available for the requested platform. You are viewing the content for Default platform.

Custom Data Binding

  • 4 min to read

In custom data bind mode, you can populate a grid's view model with data each time the grid requests it.

Follow the steps below to use custom logic to bind the grid to data:

  1. Handle Grid Data Operations

  2. Obtain/Update Grid State

  3. Populate the Grid Model

  4. Bind the Grid to the Populated Model

1. Handle Grid Data Operations

The following properties allow you to specify the grid's route values collection to handle grid data operations (filtering, sorting, grouping, paging, etc.):

Use the GridViewOperationType enumeration values to identify grid data operations.

Partial View Code:


@Html.DevExpress().GridView(
    settings => {
        settings.Name = "gridView";

        //Handles standard grid callback requests.
        settings.CallbackRouteValues = new { Controller = "MyController", Action = "MyGridViewPartial" }; 

        //Handles grid data operations - in this sample, paging and sorting.
        settings.CustomBindingRouteValuesCollection.Add(
            GridViewOperationType.Paging,
            new { Controller = "MyController", Action = "MyPagingAction" }
        );
        settings.CustomBindingRouteValuesCollection.Add(
            GridViewOperationType.Sorting,
            new { Controller = "MyController", Action = "MySortingAction" }
        );
        ...

Refer to the Action Types and Passed Parameters topic for more information about the available data operation types.

2. Obtain/Update Grid State

Use the GridViewExtension.GetViewModel method to obtain the grid's view model (GridViewModel) that stores the grid's previous state (for example, the GridViewColumnState) and the (GridViewPagerState) objects). The controller's actions get the current grid state as a parameter.

Controller Code:


public partial class MyController: Controller {
    public ActionResult MyGridView() {
        return View("MyGridView");
    }
    //Standard grid callback requests
    public ActionResult MyGridViewPartial() {
        var viewModel = GridViewExtension.GetViewModel("gridView");
        if(viewModel == null)
            //Initialize the grid state on the first load
            viewModel = CreateGridViewModel();
        return MyCustomBindingCore(viewModel);
    }
    //Paging operation requests
    public ActionResult MyPagingAction(GridViewPagerState pager) {
        var viewModel = GridViewExtension.GetViewModel("gridView");
        viewModel.ApplyPagingState(pager); //Update the grid state with the processed paging state
        return MyCustomBindingCore(viewModel);
    }
    //Sorting operation requests
    public ActionResult MySortingAction(GridViewColumnState column, bool reset) {
        var viewModel = GridViewExtension.GetViewModel("gridView");
        viewModel.ApplySortingState(column, reset); //Update the grid state with the processed sorting state
        return MyCustomBindingCore(viewModel);
    }

    PartialViewResult MyCustomBindingCore(GridViewModel gridViewModel) {
        ... //Your code to delegate model population to Model-layer functions (see the next item)
        return PartialView("MyGridViewPartial", gridViewModel);
    }

    static GridViewModel CreateGridViewModel() {
        var viewModel = new GridViewModel();
        viewModel.KeyFieldName = "ID";
        viewModel.Columns.Add("From");
        viewModel.Columns.Add("Subject");
        viewModel.Columns.Add("Sent");
        viewModel.Columns.Add("Size");
        viewModel.Columns.Add("HasAttachment");
        return viewModel;
    }
}

See also:

3. Populate the Grid Model

In the controller, use the grid's view model (GridViewModel) and call its GridViewModel.ProcessCustomBinding delegate method to populate the grid's model with the requested data.

Controller Code:


public partial class MyController: Controller {
    ...
    PartialViewResult MyCustomBindingCore(GridViewModel gridViewModel) {
        //Delegate the implementation of the functions that are required for custom binding
        gridViewModel.ProcessCustomBinding(
            MyBindingHandlers.MyGetDataRowCount, //Function to return the total number of data rows in a model
            MyBindingHandlers.MyGetData //Function to return data rows requested by the grid
        );
        return PartialView("MyGridViewPartial", gridViewModel);
    }
}

Model Code:


...
    public static class MyBindingHandlers {
        static IQueryable Model { get { return LargeDatabaseDataProvider.Emails; } }

        public static void MyGetDataRowCount(GridViewCustomBindingGetDataRowCountArgs e) {
            e.DataRowCount = Model.Count(); //Return the total count of data rows in your model (taking into account the applied filters)
        }

        public static void MyGetData(GridViewCustomBindingGetDataArgs e) {
            e.Data = Model
                .ApplySorting(e.State.SortedColumns) //The function used to sort a model
                .Skip(e.StartDataRowIndex) //Position on the first required data row
                .Take(e.DataRowCount); //Get the number of data rows (the current page's rows)
        }
        ...
    }
    ...

See also:

4. Bind the Grid to the Populated Model

In the controller, pass the populated grid's model as a model to the grid's Partial View. In the Partial View, use the GridViewExtension.BindToCustomData method to bind the grid to the passed model.

Note

In custom data bind mode, use the DevExpressEditorsBinder object instead of the default model binder to transfer values from DevExpress editors back to the corresponding data model fields. See the Binding to Model section in the Binding Data Editors to Data topic for more information.

Controller Code:


public partial class MyController: Controller {
    ...
    public ActionResult MyGridViewPartial() {
        ...
        return MyCustomBindingCore(viewModel);
    }
    public ActionResult MyPagingAction(GridViewPagerState pager) {
        ...
        return MyCustomBindingCore(viewModel);
    }
    public ActionResult MySortingAction(GridViewColumnState column, bool reset) {
        ...
        return MyCustomBindingCore(viewModel);
    }

    PartialViewResult MyCustomBindingCore(GridViewModel gridViewModel) {
        ...
        return PartialView("MyGridViewPartial", gridViewModel);
    }
    ...
}

Partial View Code:


@Html.DevExpress().GridView(
    settings => {
        settings.Name = "gridView";
        ...
    }).BindToCustomData(Model).GetHtml()

Online Demos

Online Examples