locked
Access state value of checkbox, with Bootstrap Switch pluggin RRS feed

  • Question

  • User416875641 posted

    Hi,

    Not sure if this is the right place to ask this.

    I have to make a field on the form I have to disappear, this is generally pretty easy.

    this.form.Yes.change(e => {

    /// Do something

    }

    With the BSSWitch it doesn't work, and it won't revert back to  default style checkbox for some reason.

    export interface BootstrapSwitchOptions {
    state?: boolean;
    size?: string;
    animate?: boolean;
    disabled?: boolean;
    readonly?: boolean;
    indeterminate?: boolean;
    invers?: boolean;
    radioAllOff?: boolean;
    onColor?: string;
    offColor?: string;
    onText?: string;
    offText?: string;
    labelText?: string;
    handleWidth?: string;
    labelWidth?: string;
    baseClass?: string;
    wrapperClass?: string;
    onInit?: any;
    onSwitchChange?: any;
    }

    if (this.form.checkbox.state === true) //Error


    Error TS2367 (TS) This condition will always return 'false' since the types 'Readonly<any>' and 'boolean' have no overlap.

    I tried Props, and props.state, still can't access the true or false.

    Friday, January 10, 2020 11:29 AM

All replies

  • User-474980206 posted

    we would need a link to bootstrap switch library you are using, and the code that creates this.form.checkbox. 

    but error means .state is defined ReadOnly<any> which means its a read only property, but of any datatype. but your code is doing an explicit compare ("===") to a Boolean (datatypes and value must match).  probably using "==" would fix.  if you know its really a Boolean than use a cast.

    Friday, January 10, 2020 4:19 PM
  • User416875641 posted

    Boostrap switch version:

    https://www.nuget.org/packages/Bootstrap.Switch/3.3.2.1

    https://www.nuget.org/packages/bootstrap-switch.TypeScript.DefinitelyTyped/0.6.4

    Class that makes checkbox:

    namespace AppName.ModuleName.Entities
    {
    using App;
    using App.ComponentModel;
    using App.Data;
    using App.Data.Mapping;
    using System;
    using System.Collections.Generic;
    using System.ComponentModel;
    using System.IO;

    [ConnectionKey("Default"), Module("ModuleName"), TableName("[dbo].[TableName]")]
    [DisplayName("Table Name"), InstanceName("Table Name")]
    public sealed class TableNameRow : Row, IIdRow, INameRow, IMultiTenantRow
    {
    [DisplayName("Table Name Id"), Column("TableNameID"), Identity]
    public Int32? TableNameId
    {
    get { return Fields.TableNameId[this]; }
    set { Fields.TableName[this] = value; }
    }


    [BSSwitchEditor(OnText = "Yes", OffText = "No")]

    [DisplayName("File  Available"), Column("FileAvailable")]
    public Boolean? FileAvailable
    {
    get { return Fields.FileAvailable[this]; }
    set { Fields.FileAvailable[this] = value;

    }

    [DisplayName("File")]
    public String File
    {
    get { return Fields.File[this]; }
    set { Fields.File[this] = value; }
    }


    [DisplayName("Path"), Size(4000)]
    [Expression("(T0.[FolderPath]+T0.[OriginalName])")]
    public String Path
    {
    get { return Fields.Path[this]; }
    set { Fields.Path[this] = value; }
    }

    public Int32Field TenantIdField
    {
    get { return Fields.TenantId; }
    }


    IIdField IIdRow.IdField
    {
    get { return Fields.TableNameId; }
    }

    public static readonly RowFields Fields = new RowFields().Init();

    public TableNameRow()
    : base(Fields)
    {
    }

    public class RowFields : RowFieldsBase
    {

    public readonly Int32Field IncidentKind;

    public Int32Field AccidentNearMissId;

    public BooleanField FileAvailable;


    }
    }
    }

    The Bootstrapswitch module:

    namespace WebApp{
    @App.Decorators.element('<input type="checkbox"/>')
    @App.Decorators.registerClass([Serenity.IGetEditValue, Serenity.ISetEditValue])
    export class BSSwitchEditor
    extends Serenity.Widget<BootstrapSwitchOptions>
    implements Serenity.IGetEditValue, Serenity.ISetEditValue {

    constructor(element: JQuery, opt: BootstrapSwitchOptions) {
    super(element, opt);

    this.options.size = "mini";
    element.attr('type', 'checkbox').bootstrapSwitch(this.options);
    }

    public setEditValue(source: any, property: App.PropertyItem): void {
    if (this.element.hasClass('required')) this.element.removeClass('required');
    this.element.bootstrapSwitch('state', source[property.name]);
    }

    public getEditValue(property: App.PropertyItem, target: any): void {
    target[property.name] = this.element.bootstrapSwitch('state');
    }
    }
    export interface BootstrapSwitchOptions {
    state?: boolean;
    size?: string;
    animate?: boolean;
    disabled?: boolean;
    readonly?: boolean;
    indeterminate?: boolean;
    invers?: boolean;
    radioAllOff?: boolean;
    onColor?: string;
    offColor?: string;
    onText?: string;
    offText?: string;
    labelText?: string;
    handleWidth?: string;
    labelWidth?: string;
    baseClass?: string;
    wrapperClass?: string;
    onInit?: any;
    onSwitchChange?: any;
    }
    }

    Using the values presented by the controls:

    namespace WebApp{@App.Decorators.registerClass()
    @App.Decorators.panel()
    export class TableNameRowDialog extends App.EntityDialog<TableNameRow, any> {
    //

    protected form = new TableNameSForm(this.idPrefix);


    protected afterLoadEntity() {
    super.afterLoadEntity();

    //Not working , undefined error
    //this.form.FileAvailable.state.change(e => {
    // console.log("changed")
    // this.form.FullPath.element.toggle(false)

    //})

    //https://stackoverflow.com/questions/42808955/how-to-get-a-bootstrap-switch-value-in-hidden-input


    ///NOt working , checked and $value not recognised
    /* $('#FileAvailable').on('change.BSSwitchEditor', function (e, state) {
    console.log(e.target.checked);
    alert(e.target.checked);
    if (e.target.checked == true) {
    $value = 'buy';
    $('input.prop_state').val($value);
    } else {
    $value = 'rent';
    $('input.prop_state').val($value);
    }
    }); */

    //Not working, no result

    /* this.form.FileAvailable.change(e => {
    console.log("changed")
    if (this.form.FileAvailable.context == true)

    App.EditorUtils.setReadOnly(this.form.ReasonNoFileAvailable, false);
    this.form.FullPath.element.toggle(false)
    this.form.ReasonNoFileAvailable.element.toggle(false)
    }) */

    ///Works NOT using BSSwitchEditor
    this.form.IncidentKind.change(e => {

    //}

    Thanks so i just needd to catch the values on the boolean field with the BSSwitchEditor to do logic.

    Tuesday, January 14, 2020 9:03 AM
  • User416875641 posted

    This works with no Bootstrap switch applied to the boolean field.


    this.form.FileAvailable.element.bind('change',
    function (e) {

    if (this.form.FileAvailable.value == true)
    {
    this.form.FullPath.getGridField().toggle(true);
    }
    else {
    this.form.FullPath.getGridField().toggle(false);
    }

    }.bind(this)
    );

    With bootstrap switch, it shows no errors, warnings, nothing in console, but does NOT work.

    Tuesday, January 14, 2020 4:29 PM
  • User-474980206 posted

    bootstrap switch is jQuery plugin. that means you access via jQuery, not the native element.

       https://learn.jquery.com/plugins/basic-plugin-creation/

    if you review the source for for the switch:

       https://github.com/Bttstrp/bootstrap-switch/blob/master/src/js/bootstrap-switch.js

    you will see it supports the change event. you attach handlers via jQuery 

       

    var e = document.getElementById(...); // or any other way to get native element the plugin is wrapping
    
    // only want the bootstrap  swich event
    $(e).on("change.bootstrapSwitch", function() {
       // your code goes here
    });

    Tuesday, January 14, 2020 5:42 PM