0

So I have been trying to get a Hirearchical data in Select2 component. But it just dosent seem to work. I have used Select2 before and I think the code is the same, In Select 2 4.0 the data wont be displayed.

            var data = [
                {
                    "description" : "Parent" ,
                    "children" : [
                        {
                            "description" :"Child 1",
                            "id" : "11",
                            "children" : [
                                {
                                    "description" : "Grandchild 1",
                                    "id" : "111"
                                },
                                {
                                    "description" : "Grandchild 2",
                                    "id" : "112"
                                }
                            ]
                        },
                        {
                            "description" :"Child 2",
                            "id" : "12",
                            "children" : [
                                {
                                    "description" : "Grandchild 1",
                                    "id" : "121"
                                },
                                {
                                    "description" : "Grandchild 2",
                                    "id" : "122"
                                }
                            ]
                        }
                    ],
                    "id" : "1"
                }
            ];

            function descFormatResult(item) {

            }

            function descFormatSelection(item) {
                return item.description;
            }


            $("#e10_2").select2({
                matcher: function (term, text) {
                    return text.toUpperCase().indexOf(term.toUpperCase()) === 0;
                },
                placeholder: "Location",
                minimumInputLength: 0,
                data:{
                        results: data,
                        text : "description"
                    },
                escapeMarkup: function (text) {
                    return text;
                },
                templateResult: descFormatResult
            });

I do have a fiddle here JSFiddle

Any assistance would be great Thanks.

Saneesh B
  • 572
  • 4
  • 13
  • possible duplicate of [Select2 v4.0 make optgroups selectable](http://stackoverflow.com/questions/30405664/select2-v4-0-make-optgroups-selectable) – Kevin Brown-Silva Aug 06 '15 at 22:19

1 Answers1

1

"This release contains many breaking changes, but easy-upgrade paths have been created as well as helper modules that will allow for backwards compatibility to be maintained with past versions of Select2. Upgrading will require you to read the release notes carefully, but the migration path should be relatively straightforward. You can view a list of the most common changes that you will need to make in the release notes." - https://select2.github.io/announcements-4.0.html

Madness
  • 2,730
  • 3
  • 20
  • 29
  • Thanks for replying. I did get it to work, but only the last element in the tree seems to be selectable. Is there a way to select like "Child Node" https://jsfiddle.net/9xkvLwdm/2/ – Saneesh B Aug 05 '15 at 04:20
  • 1
    Does this cover it? http://stackoverflow.com/questions/26964909/selectable-optgroup-using-select2 – Madness Aug 05 '15 at 04:35
  • 1
    Yes it does :) .. Thank you very much – Saneesh B Aug 05 '15 at 06:01