We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

CheckBox & Radio Button widget is missing ?

Do you plan add checkbox and radio button widget ?

Thanks

6 Replies

SS Saranya Sivakumar Syncfusion Team January 14, 2015 12:09 PM UTC

Hi Nurkmez,

Thanks for using Syncfusion products.

We would like to let you know that, we have included the controls which are suitable for Essential studio LightSwitch HTML application. Also we can create CheckBox and RadioButton widgets by adding Custom Control in the LightSwitch application.

Follow the below steps to add the Custom Control in LightSwitch application.

Step 1: Select the CustomControl property in the designer and change its control type as Custom Control as shown below.

                      

Step 2: Then click on the Edit Render Code which is in the properties panel. This will open Browser.js file like the following image.

Step 3: In this file add our widgets as shown in the following code snippet.

[Browse.js]

myapp.Browse.ScreenContent_render = function (element, contentItem) {

    // Write code here.

 

    var itemRadio = $("<input type='radio'id='radio' data-role='none'/>");

 

    itemRadio.appendTo($(element));

 

    var item1 = $("<label id='radiolabel' for='radio' data-role='none'> Radiobutton </label>");

 

    item1.appendTo($(element));

 

    var itemTemplate = $("<input type='checkbox'id='check' data-role='none'/>");

 

    itemTemplate.appendTo($(element));

 

    var item = $("<label id='checklabel' for='check' data-role='none'> Checkbox </label>");

 

    item.appendTo($(element));

  

    itemTemplate.ejCheckBox();

    itemRadio.ejRadioButton();   

};

For your convenience we have prepared the sample based on your requirement, and the same can be downloaded from the following location.

Sample Location: Sample

Please let us know if you have further concern.

Regards,

Saranya.S



KC Kasithangam C Syncfusion Team January 14, 2015 12:45 PM UTC

 

Hi Nurkmez,

Thanks for using Syncfusion products.

We would like to let you know that, we have included the controls which are suitable for Essential studio LightSwitch HTML application. Also we can create CheckBox and RadioButton widgets by adding Custom Control in the LightSwitch application.

Follow the below steps to add the Custom Control in LightSwitch application.

Step 1: Select the CustomControl property in the designer and change its control type as Custom Control as shown below.

                       

Step 2: Then click on the Edit Render Code which is in the properties panel. This will open Browser.js file like the following image.

Step 3: In this file add our widgets as shown in the following code snippet.

[Browse.js]

myapp.Browse.ScreenContent_render = function (element, contentItem) {

    // Write code here.

    var itemRadio = $("<input type='radio'id='radio' data-role='none'/>");

    itemRadio.appendTo($(element));

    var item1 = $("<label id='radiolabel' for='radio' data-role='none'> Radiobutton </label>");

    item1.appendTo($(element));

 

    var itemTemplate = $("<input type='checkbox'id='check' data-role='none'/>");

    itemTemplate.appendTo($(element));

    var item = $("<label id='checklabel' for='check' data-role='none'> Checkbox </label>");

    item.appendTo($(element));

  

    itemTemplate.ejCheckBox();

    itemRadio.ejRadioButton();   

};

For your convenience we have prepared the sample based on your requirement, and the same can be downloaded from the following location.

Sample Location: Sample

Please let us know if you have further concern.

Regards,

Kasithangam




NU Nurkmez January 20, 2015 11:31 AM UTC

Thanks for quick replya.


SS Saranya Sivakumar Syncfusion Team January 21, 2015 10:16 AM UTC

Hi Nurkmez,
Thanks for your update.
Please let us know if you have further queries.
Regards,
Saranya.S




TS Thomas Steschulat August 5, 2015 01:07 PM UTC

Hello,
im searching for a checkbox control for a while because the flipbox or whatever control in LS isnt practicable for me.

Im glad to see that ES has one.

But there is another question...
I want to use the Checkbox control as a search control. That means that i can search for 
1. is True
2. is False
3. is NULL (or "dont use it for filtering or as Parameter for filtering a Search Query")

That means a need a Three State checkbox.... "Checked", "Unchecked" and "Blank"

Can u help me with this circumstance?


Kind regards
Thomas



SN Sasikala Nagarajan Syncfusion Team August 7, 2015 07:02 PM UTC

Hi Thomas,
Thanks for the update,
We can enable tri state in checkbox control using enableTriState property. In this state, we can get the checked state of the checkbox using “checkState” property. In this checkState property we have some issues in 13.2.0.29 version when we enable the tri state. Now we have fixed this issue internally. Please get the updated source file from below location

Script file

Please refer the below code snippet to enable the tri state in check box.

myapp.AddEditpassengerItem.Seniorcitizen_render = function (element, contentItem) {

// Write code here.


var itemTemplate = $("<input type='checkbox'id='check' data-role='none'/>");

itemTemplate.appendTo($(element));

itemTemplate.ejCheckBox({

enableTriState:true,

change: function (args) {

contentItem.value = args.isChecked;

}

});


To know more about available properties please refer the below link

https://help.syncfusion.com/js/overview

To know about API configuration to our JS controls Please refer the below link

https://help.syncfusion.com/js/api-configuration

Also, we have logged an issue in change event’s isChecked argument (isChecked return true for intermediate state also instead of returns the null) in our database. A new support incident (142433) to track the status of this issue has been created under your account. Please follow incident for further queries related to this feature.

Please let us know if you have further queries,

Regards,
Sasikala Nagarajan


Loader.
Live Chat Icon For mobile
Up arrow icon