BuyLog In
Ticket T1007315
Visible to All Users

XAF Blazor: How to open a reference property's Detail View by cell clicking in a ListView?

created 4 years ago

Hi!

I want to polish the UX for our Blazor ListViews.
What I want to achieve is, that all relationship properties in our ListViews became "navigateable", so that when I click on the property in the ListView column, it opens the corresponding DetailView of the item type.

See the following example:

Clipboard-File-1.png

In this example "Projects" have a relationship to "Customer".
When I click on the customer name in the ListView, the DetailView of the this item (e.g. "IBM") should be opened.
But when I click on the "Display Name" value ("e.g. "Projekt 2") then the DetailView of "Projects" should be opened.

Is this possible? Can this be done with some code changes?

Best regards,

Christian

Comments (2)
DevExpress Support Team 4 years ago

    Hi Christian,

    We need additional time to research possible solutions. We will get back to you as soon as we have any news.

    Thanks,
    Stanley

    X X
    Xian 4 years ago

      Thx, I'll wait.

      Sign in to comment on this post

      Answers approved by DevExpress Support

      created 4 years ago (modified a year ago)

      Hello,

      In v23.2+, Blazor Lookup and Object Property Editors render hyperlinks in ListView and DetailView to open a complete detail form for the related record in a new browser tab (for instance, using a middle mouse click on a hyperlink). This feature will be helpful for those who do not want to view and edit related details in a separate in-app window/popup (currently provided by the Edit button). Since the "Edit" button now has a hyperlink in DetailView, it is also available for read-only Lookup Property Editors. See also Reference (Foreign Key, Complex Type) Properties.

      Clipboard-File-1.png

      To disable hyperlinks in Blazor Lookup and Object Property Editors, set the ShowLink property to false in code:

      C#
      using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors;

public class DisableShowLinkController : ViewController {
    protected override void OnActivated() {
        base.OnActivated();
        if(View is DetailView detailView) {
            // disable links in detail views
            detailView.CustomizeViewItemControl<LookupPropertyEditor>(this, editor => editor.ShowLink = false);
            detailView.CustomizeViewItemControl<ObjectPropertyEditor>(this, editor => editor.ShowLink = false);
        }
        else if(View is ListView { Editor: DxGridListEditor dxGridListEditor }) {
            // disable links in inline edit mode
            dxGridListEditor.CustomizeViewItemControl<LookupPropertyEditor>(this, editor => editor.ShowLink = false);
            dxGridListEditor.CustomizeViewItemControl<ObjectPropertyEditor>(this, editor => editor.ShowLink = false);
        }
    }
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        if(View is ListView { Editor: DxGridListEditor dxGridListEditor }) {
            // disable links in list views
            foreach(var editor in dxGridListEditor.PropertyEditors) {
                if(editor is LookupPropertyEditor lookupPropertyEditor) {
                    lookupPropertyEditor.ShowLink = false;
                }
                else if(editor is ObjectPropertyEditor objectPropertyEditor) {
                    objectPropertyEditor.ShowLink = false;
                }
            }
        }
    }
}
      Old answer

      Hi Christian,

      Thank you for your patience. We think that the most appropriate solution will be to create a custom Lookup Property Editor. It will render an HTML anchor element with a URL to the required Detail View and render a reference property's text in the anchor. This way, end-users can click hyperlinks to open Detail Views.

      To accomplish this task, please follow the steps listed below:

      1. Create a new Razor component and add the Create method that creates a RenderFragment. Declare three parameters in this method: a RenderFragment parameter for the default column rendering (a reference property's text), a parameter for a reference type, and a parameter for a key value. Alternatively, you can create a Component Model and pass it to the Create method as described at How to: Implement a Property Editor Based on a Custom Component (Blazor).
      2. Inject the IXafApplicationProvider service to your component using the Dependency Injection to access a BlazorApplication instance. This is necessary to get a reference property's Detail View ID by using the XafApplication.GetDetailViewId method. Here is an example:
      Razor
      @using DevExpress.ExpressApp.Blazor.Services
@using Microsoft.AspNetCore.Components.Web

@inject IXafApplicationProvider ApplicationProvider

<a href="@GetUrl()" target="_blank" onclick="event.stopImmediatePropagation()">@DefaultRenderFragment</a>

@code {
    [Parameter]
    public RenderFragment DefaultRenderFragment { get; set; }
    [Parameter]
    public Type MemberType { set; get; }
    [Parameter]
    public object Key { set; get; }
    public static RenderFragment Create(RenderFragment defaultRenderFragment, Type memberType, object key) =>@<CustomLookupPropertyEditorRenderer DefaultRenderFragment=@defaultRenderFragment MemberType=@memberType Key=@key />;
    private string GetUrl()
    {
        var app = ApplicationProvider.GetApplication();
        var detailViewId = app.GetDetailViewId(MemberType);
        return $"{detailViewId}/{Key}";
    }
}
      1. Create a LookupPropertyEditor class descendant and override the BlazorPropertyEditorBase.CreateViewComponentCore method. In this method, get the default RenderFragment, the reference type and key value and pass them to the component's Create method as follows:
      C#
      using System;
using DevExpress.ExpressApp.Blazor.Editors;
using DevExpress.ExpressApp.Editors;
using DevExpress.ExpressApp.Model;
using Microsoft.AspNetCore.Components;

namespace SolutionName.Module.Blazor.Editors {
    [PropertyEditor(typeof(object), EditorAliases.LookupPropertyEditor, true)]
    public class CustomLookupPropertyEditor : LookupPropertyEditor {
        public CustomLookupPropertyEditor(Type objectType, IModelMemberViewItem model) : base(objectType, model) { }

        protected override RenderFragment CreateViewComponentCore(object dataContext) {
            var result = base.CreateViewComponentCore(dataContext);
            var currentObject = MemberInfo.GetValue(dataContext);
            var key = MemberInfo.MemberTypeInfo.KeyMember.GetValue(currentObject);
            return CustomLookupPropertyEditorRenderer.Create(result, MemberInfo.MemberType, key);
        }
    }
}

      I attached a sample project that demonstrates this idea - please review it and let us know whether this solution meets your requirements.

      Thanks,
      Stanley

        Show previous comments (8)
        Georgiy G (DevExpress) 2 years ago

          Hello,

          In v23.2+, Blazor Lookup and Object Property Editors render hyperlinks in ListView and DetailView to open a complete detail form for the related record in a new browser tab (for instance, using a middle mouse click on a hyperlink). This feature will be helpful for those who do not want to view and edit related details in a separate in-app window/popup (currently provided by the Edit button). Since the "Edit" button now has a hyperlink in DetailView, it is also available for read-only Lookup Property Editors.

          Clipboard-File-1.png

          To disable hyperlinks in Blazor Lookup and Object Property Editors, set the ShowLink property to false in code:

          C#
          using DevExpress.ExpressApp;
using DevExpress.ExpressApp.Blazor.Editors;

public class DisableShowLinkController : ViewController {
    protected override void OnActivated() {
        base.OnActivated();
        if(View is DetailView detailView) {
            // disable links in detail views
            detailView.CustomizeViewItemControl<LookupPropertyEditor>(this, editor => editor.ShowLink = false);
            detailView.CustomizeViewItemControl<ObjectPropertyEditor>(this, editor => editor.ShowLink = false);
        }
        else if(View is ListView { Editor: DxGridListEditor dxGridListEditor }) {
            // disable links in inline edit mode
            dxGridListEditor.CustomizeViewItemControl<LookupPropertyEditor>(this, editor => editor.ShowLink = false);
            dxGridListEditor.CustomizeViewItemControl<ObjectPropertyEditor>(this, editor => editor.ShowLink = false);
        }
    }
    protected override void OnViewControlsCreated() {
        base.OnViewControlsCreated();
        if(View is ListView { Editor: DxGridListEditor dxGridListEditor }) {
            // disable links in list views
            foreach(var editor in dxGridListEditor.PropertyEditors) {
                if(editor is LookupPropertyEditor lookupPropertyEditor) {
                    lookupPropertyEditor.ShowLink = false;
                }
                else if(editor is ObjectPropertyEditor objectPropertyEditor) {
                    objectPropertyEditor.ShowLink = false;
                }
            }
        }
    }
}
          F F
          Fernando Ramos Tier2 2 years ago

            Hi Georgiy

            How it is possible to achieve this behavior (***Since the "Edit" button now has a hyperlink in DetailView, it is also available for read-only Lookup Property Editors.***) at v23.1.5 ? I mean, hyperlink at edit button for read-only lookup.

            Thanks!

            Fernando

            Anatol (DevExpress) 2 years ago

              Hello Fernando,

              We appreciate your interest in these new features. They will be available in v23.2 when it is released. To learn how to implement similar features in v23.1.5, please review the Old answer section from our answer above.

              Sign in to comment on this post

              Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

              Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.