checkbox with categories with json binding - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkboxes, DropDownList, jqxDropDownList, json

This topic contains 8 replies, has 3 voices, and was last updated by kmiranda 9 years ago.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

checkbox with categories with json binding Posts
March 11, 2015 at 1:30 am checkbox with categories with json binding #68305

claudegel
Participant

Is it possible to have a checkbox dropdownlist with categories if data source comme from mysql table via json
something like select code, description, category from table order by category.
category will be the categories separator, code is the value and description the label

March 11, 2015 at 3:09 pm checkbox with categories with json binding #68358
Nadezhda
Participant
Hello claudegel,

Here is an example with jqxDropDownList:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
</head>
<body>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/customers.txt";
                var source =
                    {
                        datatype: "json",
                        datafields: [
                            { name: 'html' },
                            { name: 'group' }
                        ],
                        url: url,
                        async: false
                    };
                var dataAdapter = new $.jqx.dataAdapter(source);

                // Create a jqxDropDownList
                $("#jqxWidget").jqxDropDownList({
                    checkboxes: true, 
                    source: dataAdapter,
                    displayMember: "html",
                    valueMember: "group",
                    width: '300',
                    height: '85',
                    selectionRenderer: function () {
                        var checkedItems = "";
                        var items = $("#jqxWidget").jqxDropDownList('getCheckedItems');
                        if(items){
                            $.each(items, function (index) {
                                checkedItems += this.label + ", ";
                            });
                            return "<b>" + checkedItems + "</b>";
                        }
                        return "<b>Please Choose:</b>";
                    }
                });
            });
        </script>
        <div>
            <div style='float: left;' id='jqxWidget'>
            </div>
        </div>
    </div>
</body>
</html>
```
JSON:
[{ "html": "<div style='padding: 1px;'><div>Code: Do the Work</div><div>Description: Steven Pressfield</div></div>", "group": "Category1" },{ "html": "<div style='padding: 1px;'><div>Code: Think and Grow Rich</div><div>Description: Napoleon Hill</div></div>", "group": "Category1" },{ "html": "<div style='padding: 1px;'><div>Code: The Toyota Way to Continuous...</div><div>Description: Jeffrey K. Liker</div></div>", "group": "Category1" },{ "html": "<div style='padding: 1px;'><div>Code: Redesigning Leadership </div><div>Description: John Maeda</div></div>", "group": "Category1" },{ "html": "<div style='padding: 1px;'><div>Code: MacBook Pro Portable Genius</div><div>Description: Brad Miser</div></div>", "group": "Category2" },{ "html": "<div style='padding: 1px;'><div>Code: Social Media Metrics Secrets</div><div>Description: John Lovett</div></div>", "group": "Category2" },{ "html": "<div style='padding: 1px;'><div>Code: iPad 2: The Missing Manual</div><div>Description: J D Biersdorfer J.D</div></div>", "group": "Category2" }]

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/
March 11, 2015 at 9:25 pm checkbox with categories with json binding #68379

claudegel
Participant

Ok so if I send a select request to my php engine and return the data from my mysql table in the form you show above it should work. I gonna try and let you know

March 12, 2015 at 3:05 am checkbox with categories with json binding #68386
claudegel
Participant
Ok I’ve modified my php engine so it return the data like this:
```
[{"html":"<div style='padding: 1px;'><div>Code: HNE/MR/12</div><div>Description: Non emb, Marjolaine, 12u</div></div>","group":"1"},{"html":"<div style='padding: 1px;'><div>Code: HNE/OR/12</div><div>Description: Non emb, Origan, 12u</div></div>","group":"1"},{"html":"<div style='padding: 1px;'><div>Code: HNE/MN/12</div><div>Description: Non emb, Menthe,  12u</div></div>","group":"1"},{"html":"<div style='padding: 1px;'><div>Code: HNE/ES/12</div><div>Description: Non emb, Estragon, 12u</div></div>","group":"1"},{"html":"<div style='padding: 1px;'><div>Code: HNE/PF/12</div><div>Description: Non emb, Persil frisé 12un</div></div>","group":"1"},
.....
,{"html":"<div style='padding: 1px;'><div>Code: PPT/TR/6</div><div>Description: Pesto Tradizionale, 142g, 6un</div></div>","group":"12"},{"html":"<div style='padding: 1px;'><div>Code: PKG/PR/3</div><div>Description: Pesto Prov, 3 kg</div></div>","group":"12"}]
```
Then I change my script like this
```
var url = "../moteur/index.php";
.....
var prod_code =
		{
			datatype: "json",
	        type:	"POST",
	        datafields: [
	           { name: 'html' },
	           { name: 'group' }
	        ],
	        url: url,
	        async: false,
	        data: {
	    		dropdown: true,
	    		dbase: "inventaire",
	    		numrow: "*",
	    		filtre: "groupe > 0 AND actif = 1",
	    		ordre: "groupe asc",
	        	field: "code,descrip_fr,groupe"
	    	}
	    };
	var dataAdapter6 = new $.jqx.dataAdapter(prod_code);
	// Create a jqxDropDownList for product code
    $("#codeprod").jqxDropDownList({
        source: dataAdapter6,
        displayMember: "html",
        valueMember: "group",
        width: 200,
        height: 20,
        selectedIndex: 0,
        //placeHolder: "Sélectionner le produit"
        selectionRenderer: function () {
            var item = $("#codeprod").jqxDropDownList('getSelectedItem');
            if(item){
                return "<b>" + item.label + "</b>";
            }
            	return "<b>Selectionner le produit:</b>";
        	}
		});

.....

<div style='float: left;' id='codeprod'></div>
```
Is it ok to set the url to a php engine or should I get the data absolutely from a txt file like data.txt
If yes can I send a request to my php engine so it create a data.txt file with the same json content as above and the set the url to point to my data.txt file

Now my dropdownlist is empty, no data in it

thanks
March 12, 2015 at 11:39 am checkbox with categories with json binding #68410

Nadezhda
Participant

Hi claudegel,

1) The ‘url’ is a string containing the URL to which the request is sent. In Bind DropDownList to MySQL Database Demo you can find how to populate the jqxDropDownList with data from MySQL Database.
2) We do not know how we can help you because the part which is ours works. It look like the issue is with server part.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

March 13, 2015 at 4:43 am checkbox with categories with json binding #68443

claudegel
Participant

Yes my url is pointing to another php script that send back the correct data. I already have three other dropdownlist in my page getting there data from the same url and they are working perfectly. I know that my data is sent properly.
I’m sending a request for field1, field2 and field3 and I get back
[{“html”:”<div style=’padding: 1px;’><div>Code: field1</div><div>Description: field2</div></div>”,”group”:”field3″},…

my other dropdownlist are regular one or Checkboxes. the one that I have problem is with Categories. is it possible that a Categories dropdownlist cannot get the data from an url php engine and must read his data from a file. all your exemple are fetching data from a file

So I’ve changed this in my php engine

remove: echo $result; // that is sending back the query result
add:`$myfile = fopen(“/tmp/data.txt”, “w”);
fwrite($myfile, $result);
fclose($myfile);`

now the data is in a file and I’ve pointed the url to that page, url: “data.txt”
I’ll check if it work this way and let you know

March 14, 2015 at 4:05 pm checkbox with categories with json binding #68531

claudegel
Participant

Hi, when I test with your data file as posted above it work but when I test with mine it do not work. I suspect that mine contain special caracters that I need to filter. Could you tel me if I need to filter some special caracter like “,” “-” “/” “‘” from my data.

also in your exemple the valueMember is set to “group”, but normally with a dropdownlist we need to select a specific item not a group of items. Is it possible to set it to Code: so when the user click on a description le value returned is the code of that selection.

here is my data.txt

[{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/MR/12'</div><div>Description: 'Non emb- Marjolaine- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/OR/12'</div><div>Description: 'Non emb- Origan- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/MN/12'</div><div>Description: 'Non emb- Menthe- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/ES/12'</div><div>Description: 'Non emb- Estragon- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/PF/12'</div><div>Description: 'Non emb- Persil frisé 12un'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/CB/12'</div><div>Description: 'Non emb- Ciboulette- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/BV/12'</div><div>Description: 'Non emb- Basilic- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/AN/24'</div><div>Description: 'Non emb- Aneth- 24u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/AN/12'</div><div>Description: 'Non emb- Aneth- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/OS/12'</div><div>Description: 'Non emb- Oseille- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/SU/12'</div><div>Description: 'Non emb- Sauge- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/BP/12'</div><div>Description: 'Non emb- Basil Pourp- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/SR/12'</div><div>Description: 'Non emb- Sarriette- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/CE/12'</div><div>Description: 'Non emb- Cerfeuil- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/ML/12'</div><div>Description: 'Non emb- Mélisse- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/FE/12'</div><div>Description: 'Non emb- Fenouil- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/PI/12'</div><div>Description: 'Non emb- Persil Ital- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'FHCBBN/5'</div><div>Description: 'Ciboulette non emballee - 5 do'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/TH/12'</div><div>Description: 'Non emb- Thym- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/RO/12'</div><div>Description: 'Non emb- Romarin- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/BC/12'</div><div>Description: 'Herbes non emballée Baslic citron douza'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/BT/12'</div><div>Description: 'Herbes non emballée Basilic Thai douzai'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'FHMNBN/2'</div><div>Description: 'Menthe non emballee - 2 douz.'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'FHMNBN/3'</div><div>Description: 'Menthe non emballee - 3 douz.'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/BN/12'</div><div>Description: 'Herbes non emb. Basilic Nufar douzaine'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HNE/CO/12'</div><div>Description: 'Non emb- Coriandre- 12u'</div></div>", "group": "1" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/OS/6'</div><div>Description: 'Clam Marv- Oseille- 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/ML/6'</div><div>Description: 'Clam Marv- Mélisse- 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/ES/6'</div><div>Description: 'Clamshell estragon 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/AN/6'</div><div>Description: 'Clamshell aneth 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/CO/6'</div><div>Description: 'Clamshell coriandre 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/BV/6'</div><div>Description: 'Clamshell Basilic 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/FE/6'</div><div>Description: 'Clamshell fenouil 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/SR/6'</div><div>Description: 'Clam Marv- Sariette 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/MP/6'</div><div>Description: 'Clam Marv- Mél. Pâtes 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/MR/6'</div><div>Description: 'Clam Marv- Marjolaine 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/MV/6'</div><div>Description: 'Clam Marv- Mél. Volaille 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/MF/6'</div><div>Description: 'Clam Marv- Mél. Poisson- 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/TH/6'</div><div>Description: 'Clamshell thym 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21S/BT/6'</div><div>Description: 'Clamshell basil. Thai 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21S/BA/6'</div><div>Description: 'Clamshell basil. Authentic 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21S/BC/6'</div><div>Description: 'Clamshell basil. Citron 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/SU/6'</div><div>Description: 'Clamshell sauge 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/RO/6'</div><div>Description: 'Clamshell romarin 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/OR/6'</div><div>Description: 'Clamshell origan 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/MN/6'</div><div>Description: 'Clamshell menthe 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21S/BP/6'</div><div>Description: 'Clamshell basil. Pourpre 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21S/BG/6'</div><div>Description: 'Clamshell basil. Grand Vert 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC21/CB/6'</div><div>Description: 'Clamshell ciboulette 21g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/MM/6'</div><div>Description: 'Clam Marv- Mél. Ragoût- 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/LR/6'</div><div>Description: 'Clam Marv- Laurier 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC1/CE/6'</div><div>Description: 'Clam Marv- Cerfeuil 6/10g'</div></div>", "group": "2" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/ES/6'</div><div>Description: 'Scellé Marv- Estragon- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/MR/6'</div><div>Description: 'Scellé Marv- Marjolaine- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/OR/6'</div><div>Description: 'Scellé Marv- Origan- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/OS/6'</div><div>Description: 'Scellé Marv- Oseille- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/SR/6'</div><div>Description: 'Scellé Marv- Sarriette- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/SU/6'</div><div>Description: 'Scellé Marv- Sauge- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/TH/6'</div><div>Description: 'Scellé Marv- Thym- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/FE/6'</div><div>Description: 'Scellé Marv- Fenouil- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/CO/6'</div><div>Description: 'Scellé Marv- Coriandre- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/CB/6'</div><div>Description: 'Scellé Marv- Ciboulette- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/BV/6'</div><div>Description: 'Scellé Marvini- Basilic- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/BP/6'</div><div>Description: 'Scellé Marv- Basil Pourp- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/AN/6'</div><div>Description: 'Scellé Marv- Aneth- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/RO/6'</div><div>Description: 'Scellé Marv- Romarin- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HSM/MN/6'</div><div>Description: 'Scellé Marv- Menthe- 6u'</div></div>", "group": "3" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC5S/BV/6'</div><div>Description: 'Clam Marv- 5 Saveurs- Basilic authentiqu'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/CB/6'</div><div>Description: 'Clam Marv- Ciboulette- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCMGBP4/6'</div><div>Description: 'Marv- Gourmet- Basilic Pourpre'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/CO/6'</div><div>Description: 'Clam Marv- Coriandre- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/ES/6'</div><div>Description: 'Clam Marv- Estragon- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/MN/6'</div><div>Description: 'Clam Marv- Menthe- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCMGBA4/6'</div><div>Description: 'Marv- Gourmet- Basilic L Authe'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC5S/BT/6'</div><div>Description: 'Clam Marv- 5 Saveurs- Basilic Thai'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC5S/BP/6'</div><div>Description: 'Clam Marv- 5 Saveurs- Basilic pourpre'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC5S/BGV/6'</div><div>Description: 'Clam Marv- 5 saveurs- Le Grand vert'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC5S/BC/6'</div><div>Description: 'Clam Marv- 5 Saveurs- Basilic citron'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/BV/6'</div><div>Description: 'Clam Marv- Basilic- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/AN/6'</div><div>Description: 'Clam Marv- Aneth- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/PF/6'</div><div>Description: 'Clamshell marvini Persil frisé 6 un.'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/PI/6'</div><div>Description: 'Clamshell marvini Persil Italien 6 un.'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/LR/6'</div><div>Description: 'Clam Marv- Laurier- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/ML/6'</div><div>Description: 'Clam Marv- Mélisse- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCMGBC4/6'</div><div>Description: 'Marv- Gourmet- Basilic Citron '</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCMGBT4/6'</div><div>Description: 'Marv- Gourmet- Basilic Thaï 4b'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/SU/6'</div><div>Description: 'Clam Marv- Sauge- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/TH/6'</div><div>Description: 'Clam Marv- Thym- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/SR/6'</div><div>Description: 'Clam Marv- Sarriette- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/RO/6'</div><div>Description: 'Clam Marv- Romarin- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/OS/6'</div><div>Description: 'Clam Marv- Oseille- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/OR/6'</div><div>Description: 'Clam Marv- Origan- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/MR/6'</div><div>Description: 'Clam Marv- Marjolaine- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/FE/6'</div><div>Description: 'Clam Marv- Fenouil- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCMGGV4/6'</div><div>Description: 'Marv- Gourmet- Basilic Grand V'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCM/CE/6'</div><div>Description: 'Clam Marv- Cerfeuil- 6u'</div></div>", "group": "4" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCS/BC/6'</div><div>Description: 'Clamshell Sensation Basilic Citron 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCS/BN/6'</div><div>Description: 'Clamshell Sensation Basilic Nufar 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/LA10/6'</div><div>Description: 'Clam Compl- Laurier 10g/6un'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/CE10/6'</div><div>Description: 'Clam Compl- Cerfeuil 10g/6un'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCS/BTR/6'</div><div>Description: 'Clam Compl- Sens- Basilic Trop'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCCMF10/6'</div><div>Description: 'Mélange pour poisson 10g'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/MR10/6'</div><div>Description: 'Clam Compl- Marjolaine 10g/6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/OS10/6'</div><div>Description: 'Clam Compl- Oseille 10g/6un'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/SR10/6'</div><div>Description: 'Clam Compl- Sariette 10/6un'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCS/BP/6'</div><div>Description: 'Clamshell Sensation Basilic Pourpre 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCCMR10/6'</div><div>Description: 'Mélange pour ragoût 10g'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCCMV10/6'</div><div>Description: 'Mélange pour volaille 10g'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCCMP10/6'</div><div>Description: 'Mélange pour pâtes 10g'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCS/BT/6'</div><div>Description: 'Clamshell Sensation Basilic Thai 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/ML10/6'</div><div>Description: 'Clam Compl- Mélisse 10g/6un'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/MN/6'</div><div>Description: 'Clam Compl- Menthe- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/A2/12'</div><div>Description: 'Clam Compl- Assor#2- 12u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/SR/6'</div><div>Description: 'Clam Compl- Sarriette- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/TH/6'</div><div>Description: 'Clam Compl- Thym- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/SU/6'</div><div>Description: 'Clam Compl- Sauge- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/RO/6'</div><div>Description: 'Clam Compl- Romarin- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/PI/6'</div><div>Description: 'Clam Compl- Persil Ital- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/OR/6'</div><div>Description: 'Clam Compl- Origan- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/LR/6'</div><div>Description: 'Clam Compl- Laurier- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/ES/6'</div><div>Description: 'Clam Compl- Estragon- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/CO/6'</div><div>Description: 'Clam Compl- Coriandre- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/CB/6'</div><div>Description: 'Clam Compl- Ciboulette- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/BV/6'</div><div>Description: 'Clam Compl- Basilic- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/AN/6'</div><div>Description: 'Clam Compl- Aneth- 6u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HCC/A1/12'</div><div>Description: 'Clam Compl- Assor#1- 12u'</div></div>", "group": "5" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/CB/6'</div><div>Description: 'Clam Provigo- Ciboulette- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/CO/6'</div><div>Description: 'Clam Provigo- Coriandre- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/ES/6'</div><div>Description: 'Clam Provigo- Estragon- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/OR/6'</div><div>Description: 'Clam Provigo- Origan- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/SU/6'</div><div>Description: 'Clam Provigo- Sauge- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/MN/6'</div><div>Description: 'Clam Provigo- Menthe- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/MR/6'</div><div>Description: 'Clam Provigo- Marjolaine- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/LR/6'</div><div>Description: 'Clam Provigo-Laurier 6 unites'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/BV/6'</div><div>Description: 'Clam Provigo- Basilic- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/SR/6'</div><div>Description: 'Clam Provigo- Sarriette- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/TH/6'</div><div>Description: 'Clam Provigo- Thym- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/AN/6'</div><div>Description: 'Clam provigo- Aneth- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HC4/RO/6'</div><div>Description: 'Clam Provigo- Romarin- 6u'</div></div>", "group": "6" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BN/1'</div><div>Description: 'Non emb- Basilic Nufar- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BPT/1'</div><div>Description: 'Non emb- Basilic Pour- transf-'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/FE/1'</div><div>Description: 'Non emb- Fenouil- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/AN/1'</div><div>Description: 'Non emb- Aneth- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/CO/1'</div><div>Description: 'Non emb- Coriandre- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/CE/1'</div><div>Description: 'Non emb- Cerfeuil- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/ML/1'</div><div>Description: 'Non emb- Mélisse- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BC/1'</div><div>Description: 'Non emb- Basilic citron- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/RT/1'</div><div>Description: 'Non emb- Romarin Transf- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/TT/1'</div><div>Description: 'Non emb- Thym Transf- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/OT/1'</div><div>Description: 'Non emb- Origan Transf- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/PI/1'</div><div>Description: 'Non emb- Persil Ital- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/CCT/1'</div><div>Description: 'Non emb- Coriandre Transf- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/MN/1'</div><div>Description: 'Non emb- Menthe- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BVT/1'</div><div>Description: 'Non emb- Basilic Transf- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/ES/1'</div><div>Description: 'Non emb- Estragon- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/RO/1'</div><div>Description: 'Non emb- Romarin- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/OR/1'</div><div>Description: 'Non emb- Origan- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/PF/1'</div><div>Description: 'Non emb- Persil- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/OS/1'</div><div>Description: 'Non emb- Oseille- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/CB/1'</div><div>Description: 'Non emb- Ciboulette- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/MR/1'</div><div>Description: 'Non emb- Marjolaine- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BT/1'</div><div>Description: 'Non emb- Basilic Thai- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BP/1'</div><div>Description: 'Non emb- Basil Pourp- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/BV/1'</div><div>Description: 'Non emb- Basilic- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/TH/1'</div><div>Description: 'Non emb- Thym- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/SR/1'</div><div>Description: 'Non emb- Sarriette- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/SU/1'</div><div>Description: 'Non emb- Sauge- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/LR/1'</div><div>Description: 'Non emb- Laurier- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'HKG/AT/1'</div><div>Description: 'Non emb- Aneth Transf- 1kg'</div></div>", "group": "7" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGKADZ/2'</div><div>Description: 'KALE / 2 DZ'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBTACDZ/1'</div><div>Description: 'Bette à Carde Arc-en-ciel non '</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBTVEDZ/1'</div><div>Description: 'Bette à Carde Verte emballée -'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGCOE/6'</div><div>Description: 'Coriandre emballée /6 un'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBTRDZ/1'</div><div>Description: 'Bette à Carde Rouge non emball'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBBCLB/30'</div><div>Description: 'Gros Bok Choy- 30lb'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCLB/5'</div><div>Description: 'Toy Choy (Bok Choy Tips) - 5 l'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGSHTDZ/1'</div><div>Description: 'Shangai tips - 1dz'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBCTDZ/1'</div><div>Description: 'Bok Choy Tips -1dz'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGCILB/10'</div><div>Description: 'Citronelle non emballée - 10 l'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGKAE/6'</div><div>Description: 'Kale emballé - 6 unités'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGCHFRDZ/1'</div><div>Description: 'Chou Frisé/Kale non emb. - 1dz '</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGAC/10'</div><div>Description: 'Aubergines Chinoises - 10 lbs'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBTVDZ/2'</div><div>Description: 'Bette à Carde Verte non emball'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBTVDZ/1'</div><div>Description: 'Bette à Carde Verte non emball'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBKLB/30'</div><div>Description: 'Mini Bok Choy non emballée - 3'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBKLB/10'</div><div>Description: 'Mini Bok Choy non emballé - 1'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGAC/20'</div><div>Description: 'Aubergines Chinoises - 20lbs'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGNAE/6'</div><div>Description: 'Mini Nappa emballée - 6 unités'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBOLB/20'</div><div>Description: 'Bonsaï Choy (Shangai Tips) non'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCLB/10'</div><div>Description: 'Toy Choy (Bok Choy Tips) - 10 '</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGSHADZ/1'</div><div>Description: 'Shangai - 1dz'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCLB/20'</div><div>Description: 'Toy Choy (Bok Choy Tips) - 20 '</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCKG/1'</div><div>Description: 'Toy Choy (Bok Choy tips) - kil'</div></div>", "group": "8" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTPFC/6'</div><div>Description: 'Tête de Persil frisée - 6 unit'</div></div>", "group": "9" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTBAC/6'</div><div>Description: 'Tête de basilic vert - 6 unité'</div></div>", "group": "9" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTPPC/6'</div><div>Description: 'Tête de persil plat - 6 unités'</div></div>", "group": "9" },{ "html": "<div style='padding: 1px;'><div>Code: 'H42/BV/12'</div><div>Description: 'Emb 42g- Basilic- 12u'</div></div>", "group": "9" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCOC/6'</div><div>Description: 'Tête de coriandre - 6 unités'</div></div>", "group": "9" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGMBCC/6'</div><div>Description: 'Bébé bette à carde rouge - 6 u'</div></div>", "group": "9" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBCJCL/454'</div><div>Description: 'Shangai- Bonsai Choy Tips Clam'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCJCL/454'</div><div>Description: 'Toy Choy Junior Clam 454g/6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGTCJCL/6'</div><div>Description: 'Toy Choy Junior Clam 227g/6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGCIE/6'</div><div>Description: 'Citronelle emballée - 6 unités'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBCJCL/6'</div><div>Description: 'Bonsai Choy Junior Clam 227g/6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBCRCL/6'</div><div>Description: 'Mini Bette à Cardes Rouges Cla'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGBCVCL/6'</div><div>Description: 'Mini Bette à Cardes Vertes Cla'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGCFKCL/6'</div><div>Description: 'Chou Frisé Kale Clam 227g/6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGDPCL/6'</div><div>Description: 'Duo pack Bonsai/Toy Choy Clam '</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGMBCCL/6'</div><div>Description: 'Mini Bok Choy Clam 2-3un./6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGMNCL/6'</div><div>Description: 'Mini Napa Clam 2-3un./6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'LGSECL/6'</div><div>Description: 'Sauté Exotique Clam 400g/6'</div></div>", "group": "11" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/RO/6'</div><div>Description: 'Pesto Rosso- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/TA/6'</div><div>Description: 'Pesto Thai- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/BO/6'</div><div>Description: 'Pesto Bombay- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'P250/PR/12'</div><div>Description: 'Seau- Pesto Prov- Bouras. 3Kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/CI/6'</div><div>Description: 'Citronelle fraîche broyée- 115'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/RO/5'</div><div>Description: 'Pesto Rosso- 5kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/AZ/6'</div><div>Description: 'Pesto Azteca- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/BV/2'</div><div>Description: 'Basilic frais broyé- 500g- 2un.'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/CI/2'</div><div>Description: 'Citronelle fraiche broyée- 500g 2 un.'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/CO/2'</div><div>Description: 'Coriandre fraiche broyée- 500g- 2 un.'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/PR/6'</div><div>Description: 'Pesto Provenzale- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/ME/6'</div><div>Description: 'Pesto Mediterrannea- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/TR/1'</div><div>Description: 'Pesto Trad- 1 kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/AG/6'</div><div>Description: 'Ail grillé broyé- 115g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/AN/6'</div><div>Description: 'Aneth frais broyé- 115g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/BV/6'</div><div>Description: 'Basilic frais broyé- 115g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/CO/6'</div><div>Description: 'Coriandre fraîche broyée- 115g- 6 un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/GI/6'</div><div>Description: 'Gingembre frais broyé- 115g- 6 un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/IT/6'</div><div>Description: 'Herbes à l italienne- 115g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/OR/6'</div><div>Description: 'Origan frais broyé- 115g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/PG/6'</div><div>Description: 'Piments forts grillés broyés- 115 g- 6'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTU/PI/6'</div><div>Description: 'Persil frais broyé- 115g- 6 un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPK/PR/3'</div><div>Description: 'Pesto Provenzale- kg- 3un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPK/RO/3'</div><div>Description: 'Pesto Rosso- kg- 3un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/IT/2'</div><div>Description: 'Herbes à l Ital. broyées- 500g'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/TR/20'</div><div>Description: 'Pesto Trad- 20 kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/TR/5'</div><div>Description: 'Pesto Trad- 5kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/TR/4'</div><div>Description: 'Pesto Trad. 4kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/PR/5'</div><div>Description: 'Pesto Prov- 5kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/RO/1'</div><div>Description: 'Pesto Rosso 1 kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/RO/3'</div><div>Description: 'Pesto Rosso- 3kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'P250/RO/12'</div><div>Description: 'Seau- Pesto Rosso- Bouras. 3Kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'P250/TR/12'</div><div>Description: 'Seau- Pesto Trad- Bouras. 3Kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/MN/2'</div><div>Description: 'Menthe fraiche broyée- 500g- 2'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/PR/1'</div><div>Description: 'Pesto Prov- 1 kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/OR/2'</div><div>Description: 'Origan frais broyé- 500g- 2un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPK/TR/3'</div><div>Description: 'Pesto Tradizionale- kg- 3un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/AG/2'</div><div>Description: 'Ail grillé broyé- 500g- 2un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/AN/2'</div><div>Description: 'Aneth frais broyé- 500g- 2un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/GI/2'</div><div>Description: 'Gingembre frais broyé- 500g- 2'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/RO/2'</div><div>Description: 'Romarin frais broyé- 500g- 2un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/PI/2'</div><div>Description: 'Persil frais broyé- 500g- 2un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/TR/3'</div><div>Description: 'Pesto Trad- 3kg'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PTK/PG/2'</div><div>Description: 'Piments forts grillés- 500g- 2'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PPT/TR/6'</div><div>Description: 'Pesto Tradizionale- 142g- 6un'</div></div>", "group": "12" },{ "html": "<div style='padding: 1px;'><div>Code: 'PKG/PR/3'</div><div>Description: 'Pesto Prov- 3 kg'</div></div>", "group": "12" }]

March 16, 2015 at 8:34 am checkbox with categories with json binding #68591

Nadezhda
Participant

Hi claudegel,

In order to use Categories you should display items in groups by setting each jqxDropDownList item’s group property. If you use the above data you can set ‘valueMember'(‘displayMember’) only to “html” or “group” not to “Code”.

It seems that you should filter some symbols in your JSON data. For example in the following line { "html": "<div style='padding: 1px;'><div>Code: 'HNE/MR/12'</div><div>Description: 'Non emb- Marjolaine- 12u'</div></div>", "group": "1" } you don’t need the ' in Code and Description value.

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

November 25, 2015 at 7:22 pm checkbox with categories with json binding #78557

kmiranda
Participant

Hi ,

Much of this article served me but my jqxDropDownList not working properly so I realized that you can add more properties to the chain of json and show my example . I hope it serves .

var source = [{
“html”: “<div style=’padding: 1px;’><div>Steven Pressfield</div></div>”,
“group”: “Category1”,
“id”: “1”, “texto”: “Steven Pressfield”
}, {
“html”: “<div style=’padding: 1px;’><div>Napoleon Hill</div></div>”,
“group”: “Category1”,
“id”: “2”, “texto”: “Napoleon Hill”
}, {
“html”: “<div style=’padding: 1px;’><div>Jeffrey K. Liker</div></div>”,
“group”: “Category1”,
“id”: “3”, “texto”: “Jeffrey K. Liker”
}, {
“html”: “<div style=’padding: 1px;’><div>John Maeda</div></div>”,
“group”: “Category1”,
“id”: “4”, “texto”: “John Maeda”
}, {
“html”: “<div style=’padding: 1px;’><div>Brad Miser</div></div>”,
“group”: “Category2”,
“id”: “5”, “texto”: “Brad Miser”
}, {
“html”: “<div style=’padding: 1px;’><div>John Lovett</div></div>”,
“group”: “Category2”,
“id”: “6”, “texto”: “John Lovett”
}, {
“html”: “<div style=’padding: 1px;’><div>J D Biersdorfer J.D</div></div>”,
“group”: “Category2”,
“id”: “6”, “texto”: “J D Biersdorfer J.D”
}];

$(document).ready(function () {

// Create a jqxDropDownList
$(“#jqxWidget”).jqxDropDownList({
checkboxes: true,
source: source,
displayMember: “texto”,
valueMember: “id”,
width: ‘300’,
height: ’85’
});
});

HTML = <div style=’float: left;’ id=’jqxWidget’></div>

They can run the exercise on page http://jsfiddle.net/
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.