Access state value of checkbox, with Bootstrap Switch pluggin

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.

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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
});