locked
comboTree Jquery Plugging - Select All option RRS feed

  • Question

  • User-1355965324 posted

    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

    Friday, April 9, 2021 9:37 AM

All replies

  • User-1330468790 posted

    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

    Monday, April 12, 2021 9:59 AM
  • User-1355965324 posted

    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

    Monday, April 12, 2021 3:04 PM
  • User-1330468790 posted

    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

    Thursday, April 15, 2021 9:41 AM
  • User-1355965324 posted

    Many Thanks Sean, 

    Monday, April 19, 2021 8:08 AM