From checkbox to InputSwitch component

Radzen IDE (Angular)
#1

Hi,
I'm looking to improve the GUI of my Radzen applications and was wandering how to do this with Radzen in mind.

First one is to change some of the checkboxes on screens to be changed to a "inputSwitch" ( NG-Prime inputSwitch).

basically the inputSwitch ( toggle switch / button ) is equal to a checkbox ( without tri-state).

How to do this.

This wil give the application on the GUI site more intuitive feel and wil bring the GUI closer to some mobile device apps.

#2

Hi @mcanavar,

Radzen does not currently include a Switch component for Angular applications. You can use a custom component if you need to by following these instructions. You can skip the NPM installation steps as PrimeNG is already added - you need to register the NG Module of the switch and then use it via the HTML component. You will also have to add some CSS for it since the Radzen Angular themes do not include switch styling at the moment.

#3

Hi Korchev,

Could this something you can include in your roadmap to include in an upcoming release.
If yes then I would rather wait then do a custom implementation.

If exists: Please include this on you customer wish request list. I think there are more customers who'd like this to be implemented in the standard components list.

#4

Hi @korchev,

I have followed the instructions and I'm not seeing gui in Radzen for the input switch when using Html and when app is running no rendered switch.

inspecting the produced html:

<rz-html class="'ui-inputswitch'">
    <div class="ui-inputswitch"><p-inputswitch offlabel="Nee" onlabe="Ja" class="ng-untouched ng-pristine ng-valid" ng-reflect-model="true">
        <div role="checkbox" class="ui-inputswitch ui-widget ui-inputswitch-checked" ng-reflect-ng-class="[object Object]" aria-checked="true">
            <div class="ui-helper-hidden-accessible">
                <input type="checkbox">
            </div>
            <span class="ui-inputswitch-slider"></span>
        </div>
    </p-inputswitch></div>
  </rz-html>

I've also included the needed css .

missing something ?

#5

Radzen does not show unknown components in design time. As for why it doesn't render at runtime we are not sure as we are not familiar with the PrimeNG switch component. I suggest you check the generated HTML with your browser developer tools and inspect the CSS. Also you have three elements with class "ui-inputswitch". This could be a problem.

#6

We decided to add the switch for the next Radzen release (probably next week).

1 Like
#7

@korchev

Thank you for your decision to add the switch component , this will improve my screen design and my app user acceptance a lot .

Please let me know if I can help by beta testing if needed.

Best regards,
Mehmet