Question Is it possible to create a multiselect checkbox dropdown using jsonform?

there is no builtin type like that but you could do it <div clas

Question on possibility of Multiselect checkbox dropdown using jsonform about jsonform HOT 6 CLOSED

KarishmaKain commented on May 31, 2024

Question on possibility of Multiselect checkbox dropdown using jsonform

from jsonform.

Comments (6)

sdetweil commented on May 31, 2024

there is no builtin type like that

but you could do it

{
  "schema": {
    "colors":{
      "type": "object",
      "title": "properties colors",
      "properties": {
      	"all":{
      	  "type":"checkbox"
      	},
      	"selections":{
      	  "type":"array",
          "title": "list",
          "items": {
            "type": "string",
            "enum": [
              "INFO",
              "LOG",
              "WARN",
              "ERROR",
              "DEBUG"
            ]
          }
      	}
      }
  	}
  },
  "form":[
    {
      "title": "Settings",
      "type": "fieldset",
      "expandable": false,
      "order": 0,
      "items": [
        	{	
	       	  "key":"colors.all",
                  "title":"All",
                  "onChange": "(evt,node)=>",
                        "function setc(p,s){p.find('legend').first().css('color',s?'red':'blue')};",
                        "var selection=$(evt.target).prop('checked');",
                        "var parent =$(evt.target).closest('fieldset');",
                        "var allchecked=parent.find(\"input[name$='disabled']:checked\").length;",
                        "var count=parent.find(\"input[name$='disabled']\").length;",
                        "if(selection===true && allchecked!==count){selection=false};",
                          "setc(parent,selection);}"
	       	},
	        {
	          "key": "colors.selections",
	          "type": "checkboxes",
                  "notitle":true
	        }
      ]
    }
  ]
}

but you will have to code up the onChange handler to flip them all on or off
I posted one of mine for example.. look thru the content and then use jquery operations to find the checkboxes and
check or uncheck them

from playground
without the onChange coded (I wrapped that over multiple lines for visbility here, which isn't supported in json)

from jsonform.

sdetweil commented on May 31, 2024

and you could code an onChange for the checkboxes to change the text color as well

and u might be able to use a section type for the All checkbox to keep it out of the object itself

from jsonform.

KarishmaKain commented on May 31, 2024

Thanks for the response and this could work for me as an alternative. But could the same thing be done in a dropdown scrollable list(since i will have a 100 options to choose from). The current structure is directly displayed and when 100 options are available in the page it will either become crowded or the entire page will run long. A scrollable dropdown list which would have a 100 options (this can be done), a list of checkboxes (also can be done like you have shown). But can this both be combined to have scrollable dropdown list with a checkbox option next to each of the options?

from jsonform.

sdetweil commented on May 31, 2024

I don't think there is any way to accomplish this with the existing capabilities. BUT one could create a new type, and use the jQuery select2 type to implement the list. (as jsonform depends on jQuery)

I created a key:value pair type for one of my projects.

is there a reason u want checkbox AND text, if it's multi select and the text is highlighted?

from jsonform.

sdetweil commented on May 31, 2024

I added support in the base.. , would u like to try it out on my fork .

whereever your jsonform folder is, rename it out of the way,

git clone https://github.com/sdetweil/jsonform
to recreate the folder in the same place

then in the created jsonform folder do
git checkout scrollable_checkboxes

in the form u can add

scrollable:true,
height: x

where x is number of em's high to make the scroll box

example (this file one folder beside node modules, change the paths
then use browser file:///path to this html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>listtest form select </title>
  <link rel="stylesheet" style="text/css" href="../node_modules/jsonform/deps/opt/bootstrap.css" />
</head>
<body  style="margin:30px;">
  <h1>heading</h1>
    <form></form>
    <div id="res" class="alert"></div>
  <script type="text/javascript" src="../node_modules/jsonform/deps/jquery.min.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/underscore.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/lib/jsonform.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/opt/jsv.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/opt/jquery-ui.js"></script>
  <script type="text/javascript" src="../node_modules/jsonform/deps/opt/ace/ace.js"></script> 
  <script type="text/javascript">
     $('form').jsonForm(
     {
        schema: {
          name: {
            type: 'object',
            properties:{
              list:{
               "type": "array",
                "title": "Options",
                "items": {
                  "type": "string",
    //              "type": "checkboxes"    // is error now, not allowed in schema
                  "title": "Option",
                  "enum": [
                    "one",
                    "two",
                    "four",
                    'ten'
                  ]
                }
              },
             fribble:{
                type: 'object',
                properties:{
                  list:{
                   "type": "array",
                    "title": "Options",
                    "items": {
                      type: "string",
                      enum: [
                        "six",
                        "seven",
                        "eight",
                        'nine'
                      ]
                    }
                  }
                }
             },
             foobar: {
                type:'string',
                enum: [
                  "foo",
                  "bar"
                ]
             }

            }
          }
        },
        form:[
           {
            "title": "Settings",
            "type": "fieldset",
            "expandable": false,
            "order": 0,
            "items": [
                {
                  "key":"name.list",
                  type: "checkboxes",
                  scrollable: true,
                  height:5
                },
                {
                  "key": "name.fribble.list",
                  "type": "checkboxes"
                },
                {
                  "title":"test of enum on not array",
                  key:"name.foobar"
     //          ,  "type":"checkboxes"   // is error now, schema item not array
                }
            ]
          },
          {
            "type": "submit",
            "title": "Save, Create config",
            "id": "submit_button"
          }
        ],
        value:{
             name:{
              list: ['one','ten'],
              fribble: { list: ['seven'] }
             }
        },
        onSubmit: function (errors, values) {
          if (errors) {
            $('#res').html('<p>I beg your pardon?</p>');
          }
          else {
            $('#res').html("test results="+ JSON.stringify(values),'</p>');
          }
        }
     }
    );
    </script>
</body>
</html>

i see this
scrollable,
not scrollable,
not array

from jsonform.

stale commented on May 31, 2024

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

from jsonform.

Question on possibility of Multiselect checkbox dropdown using jsonform about jsonform HOT 6 CLOSED

Comments (6)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

Jobs