We are excited to announce that the ASP.NET Forums are moving to the new Microsoft Q&A experience. Learn more >

comboTree Jquery Plugging - Select All option RSS

3 replies

Last post Apr 15, 2021 09:41 AM by Sean Fang

‹ Previous Thread|Next Thread ›

Shortcuts

polachan

Member

414 Points

1339 Posts

comboTree Jquery Plugging - Select All option

Apr 09, 2021 09:37 AM|polachan|LINK

Is there any way can I Select All node and its cascase in ComboTree Jquery Pluggin only if I select option 2 from the accessSettings

Controller
List<SelectListItem> accessSettings = new List<SelectListItem>();
accessSettings.Add(new SelectListItem("Holiday Approver", "0", user.IsHolidayApprover));
accessSettings.Add(new SelectListItem("Uniform Approver", "1", user.isUniApprover));
accessSettings.Add(new SelectListItem("Salary View Allowed", "2", user.IsSalaryViewAllowed));
HTML

<div class="controls col-sm-9">
       <select class="form-control" id="ddlAccessSettings" multiselect asp-for="AccessSettings" asp-items="@ViewBag.AccessSettings" data-role="select"></select>
</div>
<div class="form-group" style="display: block;">
                                    <label class="control-label control-label-left col-sm-3 text-danger">Grant Salary view Access - Depot & Location  </label>
                                    <div class="controls col-sm-9">
                                        <input type="text" id="ddlSalaryMapping" placeholder="Select" />
                                        <input type="hidden" id="hfDepotMapping" asp-for="SelectedSalaryMapping" />
                                    </div>
                                </div>
Script
$.ajax({
            type: "GET",
            url: "/User/GetDepotDepartemntsForMap",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $('#ddlSalaryMapping').comboTree({
                    source: data,
                    isMultiple: true,
                    cascadeSelect: true,
                    collapse: true,
                    selected: defaultSelected

                });
            },
            failure: function (response) {
                console.log(response.responseText);
            },
            error: function (response) {
                console.log(response.responseText);
            }
        });

Thanks

Sean Fang

Contributor

3020 Points

889 Posts

Re: comboTree Jquery Plugging - Select All option

Apr 12, 2021 09:59 AM|Sean Fang|LINK

Hi polachan,

Thank you for providing codes for the question.

Howover, I am not sure what the problem you have. Could you please specify the question with more details?

Now, if you want to use "comboTree" js plugin and select all, there is a drawback that the values will be all selected including the upper level option and subs.

The data that we have to populate to the select should follow below format:

var SampleJSONData = [
    {
        id: 0,
        title: 'Horse'
    }, {
        id: 1,
        title: 'Birds',
        subs: [
            {
                id: 10,
                title: 'Piegon'
            }, {
                id: 11,
                title: 'Parrot'
            }, {
                id: 12,
                title: 'Owl'
            }, {
                id: 13,
                title: 'Falcon'
            }
        ]
    }
]

Is this what you want? You could refer to below demo.

controller:

public IActionResult GetDepotDepartemntsForMap()
        {
            List<ComboTreeObject> data = new List<ComboTreeObject>();
            ComboTreeObject option1 = new ComboTreeObject
            {
                id = 0,
                title = "Horse"
            };
            data.Add(option1);

            ComboTreeObject option2 = new ComboTreeObject
            {
                id = 1,
                title = "Birds",
                subs = new List<ComboTreeObject>
                {
                    new ComboTreeObject
                    {
                        id = 10,
                        title = "Piegon"
                    },
                    new ComboTreeObject
                    {
                        id = 11,
                        title = "Parrot"
                    },
                     new ComboTreeObject
                    {
                        id = 12,
                        title = "Owl"
                    },
                      new ComboTreeObject
                    {
                        id = 13,
                        title = "Falcon"
                    }
                }
            };

            data.Add(option2);

            var options = new JsonSerializerOptions
            {
                IgnoreNullValues = true,
                WriteIndented = true
            };

            return Json(data, options);
        }

public class ComboTreeObject
    {
        public int id { get; set; }
        public string title { get; set; }
        public bool isSelectable { get; set; } = true;
        public List<ComboTreeObject> subs { get; set; }

    }

cshtml:

<div class="controls col-sm-9">
    <select class="form-control" id="ddlAccessSettings" asp-items="@ViewBag.AccessSettings" multiselect data-role="select"></select>
</div>
<div class="form-group" style="display: block;">
    <label class="control-label control-label-left col-sm-3 text-danger">Grant Salary view Access - Depot & Location  </label>
    <div class="controls col-sm-9">
        <input type="text" id="ddlSalaryMapping" placeholder="Select" />
    </div>
</div>

@section scripts{
    <link href="~/css/style.css" rel="stylesheet" />
    <script src="~/js/comboTreePlugin.js"></script>
    <script>
        $(function () {
            $.ajax({
                type: "GET",
                url: "/User/GetDepotDepartemntsForMap",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    $('#ddlSalaryMapping').comboTree({
                        source: data,
                        isMultiple: true,
                        cascadeSelect: true,
                        collapse: true
                    });
                },
                failure: function (response) {
                    console.log(response.responseText);
                },
                error: function (response) {
                    console.log(response.responseText);
                }
            });
        })
    </script>
}

Demo:

Best regards,

Sean

ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

- Reply
polachan
Member

414 Points

1339 Posts

Re: comboTree Jquery Plugging - Select All option

Apr 12, 2021 03:04 PM|polachan|LINK

Sean

Probably I have not asked the question the way to guess what is my requirement. Sorry for that. My Requirement is

If I have selected 'Salary View Allowed' from the first dropdown , then all the checkbox of the Jquery combotree must be selected without user click on any comboBox, If the user has not selected 'Salary View Allowed' , then all the all the checkbox of the Jquery combotree must be unselected

Regards

Sean Fang

Contributor

3020 Points

889 Posts

Re: comboTree Jquery Plugging - Select All option

Apr 15, 2021 09:41 AM|Sean Fang|LINK

Hi polachan,

Thank you for specifying your issue.

comboTree is a jQuery plugin and the only way we could do for the functionality is to write some js codes.

You could refer to below js codes with my demo.

Index.cshtml:

<div class="controls col-sm-9">
    <select class="form-control" id="ddlAccessSettings" asp-items="@ViewBag.AccessSettings" multiselect data-role="select" ></select>
</div>
<div class="form-group" style="display: block;">
    <label class="control-label control-label-left col-sm-3 text-danger">Grant Salary view Access - Depot & Location  </label>
    <div class="controls col-sm-9">
        <input type="text" id="ddlSalaryMapping" placeholder="Select" />
    </div>
</div>


@section scripts{
  
    <link href="~/css/style.css" rel="stylesheet" />
    <script src="~/js/comboTreePlugin.js"></script>
    <script>
        // global variables
        var salaryMapping;
        var ids = [];
        var comboTree;

        $(function () {
            // initialize the combo tree with ajax
            $.ajax({
                type: "GET",
                url: "/User/GetDepotDepartemntsForMap",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    // store the data in page
                    salaryMapping = data;
                    // store ids 
                    populateIds(data);
                    initialComboTree(data);

                    updateComboTree();
                },
                failure: function (response) {
                    console.log(response.responseText);
                },
                error: function (response) {
                    console.log(response.responseText);
                }
            });

            $('#ddlAccessSettings').on('change', function () {
                console.log('changed');
                updateComboTree();

            });

        });

        // recursively store all ids
        function populateIds(data) {
            data.forEach(function (item, index) {
                ids.push(item.id);
                if (item.subs) {
                    populateIds(item.subs);
                }
            });
        }

        function updateComboTree() {
            comboTree.clearSelection();
            if (checkSelectedList()) {
                comboTree.setSelection(ids);
            }
        }

        function checkSelectedList() {
            return $('#ddlAccessSettings option:selected').text() == 'Salary View Allowed';
        }

        function initialComboTree(data) {
            console.log('initialize');
            comboTree = $('#ddlSalaryMapping').comboTree({
                source: data,
                isMultiple: true,
                cascadeSelect: true,
                collapse: true
            });
        }


    </script>
}

UserController.cs:

public IActionResult Index()
        {
            List<SelectListItem> accessSettings = new List<SelectListItem>();
            accessSettings.Add(new SelectListItem("Holiday Approver", "0", true));
            accessSettings.Add(new SelectListItem("Uniform Approver", "1", true));
            accessSettings.Add(new SelectListItem("Salary View Allowed", "2", true));
            ViewBag.AccessSettings = accessSettings;

            return View();
        }

        public IActionResult GetDepotDepartemntsForMap()
        {
            List<ComboTreeObject> data = new List<ComboTreeObject>();
            ComboTreeObject option1 = new ComboTreeObject
            {
                id = 0,
                title = "Horse"
            };
            data.Add(option1);

            ComboTreeObject option2 = new ComboTreeObject
            {
                id = 1,
                title = "Birds",
                subs = new List<ComboTreeObject>
                {
                    new ComboTreeObject
                    {
                        id = 10,
                        title = "Piegon"
                    },
                    new ComboTreeObject
                    {
                        id = 11,
                        title = "Parrot"
                    },
                     new ComboTreeObject
                    {
                        id = 12,
                        title = "Owl"
                    },
                      new ComboTreeObject
                    {
                        id = 13,
                        title = "Falcon"
                    }
                }
            };

            data.Add(option2);

            var options = new JsonSerializerOptions
            {
                IgnoreNullValues = true,
                WriteIndented = true
            };

            return Json(data, options);
        }

Model:

public class ComboTreeObject
    {
        public int id { get; set; }
        public string title { get; set; }
        public bool isSelectable { get; set; } = true;
        public List<ComboTreeObject> subs { get; set; }

    }

Demo:

Hope helps.

Best regards,

Sean

ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >

‹ Previous Thread|Next Thread ›