Tuesday, July 9, 2013

DetailView as a PreView in GridView

Recently I had the need to display a complex layout as a preview row in my AspxGridView. Instead of adding a nonpersistent property where I will construct the html I though it would be easier to simply use XAF’s ModelEditor to design a DetailView and then assign that in my preview row.

After one hour or less I ended up with this controller.


    public interface IModelListViewPreviewRowDetailView : IModelListView {




        IModelDetailView PreviewRowDetailView { get; set; }



    public class PreviewRowDetailViewController:ViewController<ListView>,IModelExtender {


        protected override void OnViewControlsCreated() {


            var previewRowDetailView = ((IModelListViewPreviewRowDetailView) View.Model).PreviewRowDetailView;

            if (previewRowDetailView!=null) {

                var gridView = ((ASPxGridListEditor) View.Editor).Grid;

                gridView.Templates.PreviewRow = new PreviewRowTemplate(Application,ObjectSpace,previewRowDetailView.Id);

                gridView.Settings.ShowPreview = true;




        class PreviewRowTemplateITemplate {

            readonly XafApplication _xafApplication;

            readonly IObjectSpace _objectSpace;

            readonly string _viewId;


            public PreviewRowTemplate(XafApplication xafApplication, IObjectSpace objectSpace, string viewId) {

                _xafApplication = xafApplication;

                _objectSpace = objectSpace;

                _viewId = viewId;



            void ITemplate.InstantiateIn(Control container) {

                var templateContainer = (GridViewPreviewRowTemplateContainer) container;

                object obj = templateContainer.Grid.GetRow(templateContainer.VisibleIndex);

                var detailView = ViewFactory.CreateDetailView(_xafApplication, _viewId, _objectSpace, obj, false);


                templateContainer.Controls.Add((Control) detailView.Control);





        public void ExtendModelInterfaces(ModelInterfaceExtenders extenders) {

            extenders.Add<IModelListView, IModelListViewPreviewRowDetailView>();



In the image bellow you can see a ListView of DetailViews Smile


In next image you can see how simple is to configure this all thanks to XAF Application Model.


The controller of course now lives in www.expandframework.com and you can follow its history in our online repository.


This is not a perfect solution, however it does its job. I also posted in eXpand forums where we can all discuss further improvements


Subscribe to XAF feed
Subscribe to community feed



Post a Comment