Forum Discussion

amritbhgt's avatar
amritbhgt
Cloud Apps
11-29-2023
Solved

select All check box to select other checkboxes

Hi ,
I am trying to create a check box which will select all the other checkboxes, but somehow its not working.
if there is any other solution by using a button that would also work for me.
 
Thanks
{
"type": "Input.Toggle",
"title": "Select All",
"id": "chk_brand_all",
"valueOn": "true",
"valueOff": "false",
"value": "false",
"style": {
"text-align": "center"
}
},
{
"type": "Input.ChoiceSet",
"id": "chk_brand_items",
"class": "chk_brand_items",
"layout": "vertical",
"isMultiSelect": true,
"value": "",
"style": {
"padding": "4px 0 0 5px"
},
"choices": [
{
"title": "Brand",
"value": "Brand"
},
{
"title": "Brand 1",
"value": "Brand 1
},
{
"title": "Brand 2",
"value": "Brand 2"
},
 
 
 
$('#chk_brand_all').on('click', function(){
               if(this.checked) {
                              $('.chk_brand_items .checkbox').each(function(){
                                             this.checked = true;
                              });
               }else{
                              $('.chk_brand_items .checkbox').each(function(){
                                             this.checked = false;
                              });
               }
});
 
Blox
Code-first Analytics
Dashboards & Reporting
  • Benji_PaldiTeam's avatar
    Benji_PaldiTeam
    12-01-2023

    In the above case, you need to assign different path to the variable 'chekboxGroup':

    let chekboxGroup = args.widget.style.currentCard.body[0].items[0].columns[0].items[2];

    You can find this path using browser console. 

    • Open the blox widget in edit mode
    • Open Browser console
    • Type prism.activeWidget.style.currentCard
    • Open the object and find your container where checkboxes are placed

    Feel free to reach out if you have further questions, we're always happy to help 

    [email protected] 
    Paldi Solutions

7 Replies

Replies have been turned off for this discussion
  • Benji_PaldiTeam's avatar
    Benji_PaldiTeam
    Data Pipeline
    11-30-2023

    Hi amritbhgt ,

    You can use the following script to add a 'Select All' checkbox in Blox:

    Blox:

    {
    "style": "",
    "script": "",
    "title": "",
    "showCarousel": true,
    "body": [
        {
            "type": "Input.Toggle",
            "title": "Select All",
            "id": "chk_brand_all",
            "style": {
                "text-align": "center"
            }
        },
        {
            "type": "Input.ChoiceSet",
            "id": "chk_brand_items",
            "class": "chk_brand_items",
            "layout": "vertical",
            "isMultiSelect": true,
            "value": "Brand,Brand 1,Brand 2",
            "style": {
                "padding": "4px 0 0 5px"
            },
            "choices": [
                {
                    "title": "Brand",
                    "value": "Brand"
                },
                {
                    "title": "Brand 1",
                    "value": "Brand 1"
                },
                {
                    "title": "Brand 2",
                    "value": "Brand 2"
                }
            ]
        }
    ],
    "actions": []
}

    Widget Script:

    

widget.on('ready', (sender, args) => {
	
	let chekboxGroup = args.widget.style.currentCard.body[1];
		
	if(chekboxGroup.choices.map(item => item.value).join(',') === chekboxGroup.value){
		$('#chk_brand_all')[0].checked = true;
	} else {
		$('#chk_brand_all')[0].checked = false;
	}
	
	$('#chk_brand_all').click(function(){
		
		if(this.checked) {
			let allValues = chekboxGroup.choices.map(item => item.value).join(',')
			chekboxGroup.value = allValues;
				
		} else {
			chekboxGroup.value = '';
		}
			
		args.widget.redraw();
		
	})
});

     

    You also have the alternative of utilizing the Pladi Advanced Filter plugin. With this plugin, you can incorporate multiple dropdown filters into a single widget and configure each dropdown for single or multiple selections. The plugin offers a diverse range of customization options to tailor the filters according to your needs.

     

    Feel free to reach out if you have further questions, we're always happy to help 🙂
    [email protected] 
    Paldi Solutions

    • amritbhgt's avatar
      amritbhgt
      Cloud Apps
      11-30-2023

      where are we calling "chk_brand_items"

      in the widget scripts i can just see "chk_brand_all"

      • Benji_PaldiTeam's avatar
        Benji_PaldiTeam
        Data Pipeline
        11-30-2023

        We don't need to call 'chk_brand_items'. Just need to assign value of all checkbox items to "value" property of "Input.ChoiceSet" in blox, so whatever values we assigned to "value" property separated by comma, corresponding checkboxes will be checked.