Skip to main content

How to: Implement a Custom Binding Scenario for Two GridViews Used in a Master-Detail Relationship

  • 3 minutes to read

This sample demonstrates how to manually provide data for two GridView extensions that are used in a master-detail relationship. In this implementation, only sorting and paging operations of the grids are handled in the corresponding Action methods.

To learn more on the GridView’s custom data binding feature, refer to the Custom Data Binding - Overview help topic.

Note that this sample provides a universal implementation approach. It can be easily adopted and used for every custom data source object if it implements the IQueryable interface.

The common logic of each grid’s custom binding implementation is similar to the implementation demonstrated by the E4394 code sample. The difference is that in this sample, the master grid’s detail row template is defined by using another (detail) GridView extension. Each detail grid instance is provided with information on the corresponding master row’s key field value. This value is passed to a detail grid’s Action methods (as a parameter) and to the grid’s Partial View (as a ViewData object).

In short, this sample’s implementation logic is as follows:

  • In both grid Partial Views (see MasterGridViewPartial.cshtml and DetailGridViewPartial.cshtml in Views → Home), a grid’s GridViewSettings.CustomBindingRouteValuesCollection property is used to define handling actions for sorting and paging operations; the GridSettingsBase.CallbackRouteValues property defines the action to handle all other (standard) grid callbacks. In the master grid’s Partial View, the GridViewSettings.SetDetailRowTemplateContent method delegate is implemented to define detail row content and provide it with the master row’s key field value - the value of the “CustomerID” column. In the detail grid’s Partial View, the received corresponding master row key field value (the value of the “CustomerID” column) is passed to the specified actions.
  • In the Controller (Controller → HomeController.cs), the specified Action methods are implemented for both grids to update a specific grid view model object (GridViewModel that maintains a grid’s state) with information of the performed operation (if required). Then, a grid view model’s GridViewModel.ProcessCustomBinding method is called to delegate a binding implementation to specific model-layer methods indicated by specific parameters of the method.
  • At the Model layer (see MasterCustomBindingModel.cs and DetailCustomBindingModel.cs in Models), two specified delegates are implemented for each grid to populate the corresponding grid view model with the required data. Generally, in the provided implementation of model-level binding delegates, you just need to modify a single code line in each model file to point to your particular model object that implements the IQueryable interface:

    (MasterCustomBindingModel.cs)
            static IQueryable Model { get { return NorthwindDataProvider.GetCustomers(); } }
    
    (DetailCustomBindingModel.cs)
            static IQueryable Model { get { return NorthwindDataProvider.GetInvoices(); } }
    
  • Finally, the resulting grid view model object is passed from the Controller to a particular grid’s Partial View as a Model. For a detail grid, the master row key value is also passed to the Partial View as a ViewData object. In the Partial View, each grid binds to the Model via the GridViewExtension.BindToCustomData method.

You can see the complete example at the following link:

View Example: How to create a master-detail GridView with paging and sorting using Custom Data Binding