Remove From My Forums

Javascript MultiSelect Treeview to give Menu access right

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>
}
<div>
<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>
</select>
</div>

<Script>
$('#productGroup').treeselect();
</script>

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

0

Sign in to vote

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?

https://www.jqueryscript.net/form/Multi-Select-Checkbox-Tree-treeSelector.html

https://www.codeproject.com/Articles/1208467/Multiselect-Treeview

Best Regards,

Jenifer

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.

<body>
    <select multiple="multiple" id="main_menu" name="main_menu"></select>
</body>

<script>
    $(function () {
        $.ajax({
            type: "POST",
            url: "xxxxx/MenuDetails",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                //alert(data.d);
                
                //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.Columns.Add("MenuID");
dt.Columns.Add("ParentID");
dt.Columns.Add("MenuName");

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

0

Sign in to vote
User-1355965324 posted

Fei

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

$('#main_menu').treeselect();
Wednesday, February 13, 2019 10:14 AM
0

Sign in to vote

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,

Jenifer

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

0

Sign in to vote

User-1355965324 posted

Thanks Fei

I given the link to the library still not working

Thursday, February 14, 2019 7:30 AM
0

Sign in to vote

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

Asked by:

Javascript MultiSelect Treeview to give Menu access right

Question

All replies