Ticket T1036840
Visible to All Users

Blazor - How to create an inline listview action that is shown in each row's cell

created 3 years ago

Hi,

Do You have a sample or maybe some hints how we could go about creating an inline-action for the listview items ?

the goal is to have a button in each listView row, that would execute an action for that particular row.
right now the best we found - is that user has to select an item in the list view, and the the action appears on the top.

Users do find that a bit excessive clicking - and are asking to move that action button in-line.

Any help would me much appreciated.

Answers approved by DevExpress Support

created 3 years ago (modified a year ago)

Hello Panos,

v23.2+

Starting with v23.2, DxGridListEditor supports in-line actions out of the box. Just create an action with SelectionDependencyType = SelectionDependencyType.RequireSingleObject and map it to one of the following Action Container categories: Edit, RecordEdit, or ListView.

See the documentation topic for details: How to: Add a Grid Column with an Action (ASP.NET Core Blazor and ASP.NET Web Forms)

Older Versions

Although DxGridListEditor does not support inline actions out of the box, you can add a custom command column renderer (RenderFragment) to its DxGridModel.Columns collection. In this column, use the DxGridCommandColumn.CellDisplayTemplate property to show a custom button instead of predefined command buttons. Here is an example:

C#
using DevExpress.Blazor; using DevExpress.Blazor.Internal; using DevExpress.ExpressApp; using DevExpress.ExpressApp.Actions; using DevExpress.ExpressApp.Blazor.Editors; using DevExpress.ExpressApp.Blazor.Services; using DevExpress.ExpressApp.SystemModule; using Microsoft.AspNetCore.Components; public class AddActionColumnsController : ViewController<ListView> { protected override void OnViewControlsCreated() { base.OnViewControlsCreated(); DxGridListEditor gridListEditor = View.Editor as DxGridListEditor; if (gridListEditor != null) { var gridComponentModel = gridListEditor.GetGridAdapter().GridModel; gridComponentModel.Columns += CreateActionColumn(Frame.GetController<DeleteObjectsViewController>().DeleteAction, 0); gridComponentModel.Columns += CreateActionColumn(Frame.GetController<RefreshController>().RefreshAction, 0); } } private RenderFragment CreateActionColumn(SimpleAction action, int visibleIndex) { ILoadingIndicatorProvider loadingIndicatorProvider = Application.ServiceProvider.GetRequiredService<ILoadingIndicatorProvider>(); RenderFragment<GridCommandColumnCellDisplayTemplateContext> template = context => templateBuilder => { templateBuilder.OpenElement(0, "div"); templateBuilder.AddAttribute(1, "class", "xaf-action"); templateBuilder.OpenComponent<GridCommandButton>(2); templateBuilder.AddAttribute(3, nameof(GridCommandButton.Text), action.Caption); EventCallback clickHandler = new EventCallbackFactory().Create(this, args => { DoClick(action, context.DataItem); loadingIndicatorProvider.Release("Action executed"); }); templateBuilder.AddAttribute(4, nameof(GridCommandButton.Click), clickHandler); templateBuilder.CloseComponent(); templateBuilder.CloseElement(); }; return builder => { builder.OpenComponent<DxGridCommandColumn>(0); builder.AddAttribute(1, nameof(DxGridCommandColumn.VisibleIndex), visibleIndex); builder.AddAttribute(2, nameof(DxGridCommandColumn.Caption), action.Caption); builder.AddAttribute(3, nameof(DxGridCommandColumn.Width), "100px"); builder.AddAttribute(4, nameof(DxGridCommandColumn.CancelButtonVisible), false); builder.AddAttribute(5, nameof(DxGridCommandColumn.NewButtonVisible), false); builder.AddAttribute(6, nameof(DxGridCommandColumn.SaveButtonVisible), false); builder.AddAttribute(7, nameof(DxGridCommandColumn.CellDisplayTemplate), template); builder.CloseComponent(); }; } private void DoClick(SimpleAction action, object targetObject) { var prevObject = View.CurrentObject; View.CurrentObject = targetObject; action.DoExecute(); View.CurrentObject = prevObject; } }

This example uses RenderTreeBuilder to implement everything in one class for demo purposes: ASP.NET Core Blazor advanced scenarios (render tree construction). To create a more complex template, you can implement the same solution using regular Razor Components:
How to: Use a Custom Component to Implement List Editor (Blazor)
Implement a Property Editor Based on a Custom Component (Blazor)
Use a Custom View Item to Add a Button to a Detail View

    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.