Ticket T1116207
Visible to All Users

Blazor - How to show a toggle switch in ListView cells

created 3 years ago (modified 3 years ago)

[DevExpress Support Team: CLONED FROM T961969: Xaf Blazor - How to use a custom cell template (HTML markup) in Grid List Editor]

I tried your comment but is not possible to do this. I attached a project. When you run the project in "Ultimos Valores" option you can press the button in action field. I would like to get the change event when you press the button switch but I have an exception.

Thanks a lot.

Answers approved by DevExpress Support

created 3 years ago

Hello,

I reviewed your code and can see that parameters are incorrectly passed to the Razor Component that you implemented. You handled the CheckedChanged event as follows:

C#
<DxCheckBox Checked="@ultimosValores.Accion" CheckedChanged="@((bool value) => CheckedChanged(value))">Silent Mode</DxCheckBox>

However, this code is never used, since the CellDisplayTemplate.Create method does not reuse this markup - it creates a new DxCheckBox item. The Create method should return the current Razor Component - CellDisplayTemplate. Here are some examples:
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'

Please see how the Create method is implemented in these examples. As you can see, it passes the received object to the created component using the component's parameter. You can pass the received UltimosValores object to your CellDisplayTemplate component in the same way.

To bind the Accion property to the control's value, use the @bind- keyword with the Checked property, or define the CheckedChanged handler. Please refer to the following help topics for additional information:
DxCheckBox<T>.CheckedChanged Event
ASP.NET Core Razor components > Component parameters
ASP.NET Core Blazor data binding > Binding with component parameters

In addition, you need to turn off the default click handler that shows the clicked object's DetailView: Xaf blazor create clickable links in list 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.