Javascript MultiSelect Treeview to give Menu access right RRS feed

  • Question

  • User-1355965324 posted

    I am trying to use  treeview multiselect javascript    from www.jqueryscript.net/form/Treeview-Style-Multi-Select-Plugin-For-Bootstrap-Trees.  

    I am writing the following code .But I dont know how to bring the data from the table into the  <Select Tag>. Please anyone can help how to bring the data from the table. My database table  is given below. Please can you help 

    @Section Script
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link href="jquery.bootstrap.treeselect.css" rel="stylesheet">
    <script src="js/jquery.bootstrap.treeselect.js"></script>
    <select multiple="multiple" id="productGroup" name="productGroup">
      <option value="1" selected="selected">Group 1</option>
      <option value="2" data-parent="1">Group 2</option>
      <option value="3" data-parent="2">Group 3</option>
      <option value="4">Group 4</option>
      <option value="5">Group 5</option>
    MenuID ParentID Menu Name
    1 0 Customer
    2 0 Supplier
    3 1 Add Customer
    4 1 Edit Customer
    5 2 Add Supplier
    6 2 Edit Supplier
    Monday, February 4, 2019 4:46 PM

All replies

  • User839733648 posted

    Hi polachan,

    According to your description, I'm sorry that I could not understand your requirement clearly.

    I'm confused about what the result you want.

    Do you mean that you want to create a page with the MultiSelect Treeview including the form data by using javascript?

    Maybe someting like the effect in the following links?



    Best Regards,


    Tuesday, February 5, 2019 7:37 AM
  • User61956409 posted

    Hi polachan,

    I dont know how to bring the data from the table into the  <Select Tag>. Please anyone can help how to bring the data from the table. My database table  is given below.

    If you'd like to dynamically generate/populate <select> based on the data stored in your database, you can make a request to a backend service for retrieving data via AJAX, and then you can generate <option> tags and populate <select> dynamically based on returned data.

    You can refer to the following code sample to achieve your requirement.

        <select multiple="multiple" id="main_menu" name="main_menu"></select>
        $(function () {
                type: "POST",
                url: "xxxxx/MenuDetails",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
    //dynamically generate options and populate <select> $(JSON.parse(data.d)).each(function (index,item) { var option = ""; if (parseInt(item.ParentID) > 0) { option = '<option value="' + item.MenuID + '" data-parent="' + item.ParentID + '">' + item.MenuName + '</option>'; } else { option = '<option value="' + item.MenuID + '">' + item.MenuName + '</option>'; } $("#main_menu").append(option); }); $('#main_menu').treeselect(); } }); }) </script>

    In backend service code logic:

    DataTable dt = new DataTable();
    dt.Rows.Add(1, 0, "Customer");
    dt.Rows.Add(2, 0, "Supplier");
    dt.Rows.Add(3, 1, "Add Customer");
    dt.Rows.Add(4, 1, "Edit Customer");
    dt.Rows.Add(5, 2, "Add Supplier");
    dt.Rows.Add(6, 2, "Edit Supplier");
    //in your service, you need to retireve data from your database
    return Newtonsoft.Json.JsonConvert.SerializeObject(dt);

    Test Result:

    With Regards,

    Fei Han

    Tuesday, February 12, 2019 5:55 AM
  • User-1355965324 posted


    Please can you let me know which  script should be included to get treeselect(). Now when I  type 'treeselect() it is not coming there. Please can you help


    Wednesday, February 13, 2019 10:14 AM
  • User839733648 posted

    Hi polachan,

    I've seen that you've created another thread to ask bout this.

    I've tested the code and found the key point and maybe you could try and check.

    Best Regards,


    Thursday, February 14, 2019 6:55 AM
  • User61956409 posted

    Hi polachan,

    Please can you let me know which  script should be included to get treeselect(). 

    I'm using following references, and it work for me, please try it.

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://www.jqueryscript.net/demo/Treeview-Style-Multi-Select-Plugin-For-Bootstrap-Treeselect/css/jquery.bootstrap.treeselect.css" rel="stylesheet">
    <script src="https://www.jqueryscript.net/demo/Treeview-Style-Multi-Select-Plugin-For-Bootstrap-Treeselect/js/jquery.bootstrap.treeselect.js"></script>

    With Regards,

    Fei Han

    Thursday, February 14, 2019 7:01 AM
  • User-1355965324 posted

    Thanks Fei

    I given the link to the library  still not working

    Thursday, February 14, 2019 7:30 AM
  • User61956409 posted

    Hi polachan,

    I given the link to the library  still not working

    As I shared in screenshot,  the sample code work well on my side. If it does not work on your side, to troubleshoot the issue, you can use F12 developer tools Network to check if all required reference files are loaded, and check if any exception/error in Console tab.

    Besides, you can create a new page and add references that I shared, and test if the code snippet can work.

    With Regards,

    Fei Han

    Friday, February 15, 2019 3:20 AM