This is a migrated thread and some comments may be shown as answers.

filtered checkbox on treeview jquery

1 Answer 32 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
raphael
Top achievements
Rank 1
raphael asked on 30 Apr 2012, 10:37 AM
Hi,
I'm trying to figure out if it's possible to populate a treeview with checkbox support via ajax? and then filter via jquery the checkboxes with a combobox.

what the final result should be is the following, I have a treeview where all my menu item are presented, on a combobox i have my roles, and when I change a role the treeview should changed the checked treeview items depending of the permission a role has.

can somebody help me with an example?

thank you

Raphael

1 Answer, 1 is accepted

Sort by
0
raphael
Top achievements
Rank 1
answered on 03 May 2012, 07:44 AM
Ok after some trouble i found te way to rebind my checkbox treeview after filtering it with a combobox.

I share the code if somebody occurs in the same problem.

here you have the html code:
<p>@Html.DropDownList("Roles", null, new { onchange = "itemChange();" })</p>
  
@(Html.Telerik().TreeView()
        .Name("TreeView")
        .ShowCheckBox(true)
        .BindTo(Model, mappings =>
        {
            mappings.For<MenuModel>(binding => binding
                    .ItemDataBound((item, menu) =>
                    {
                        item.Text = menu.Name;
                        item.Value = menu.MenuId.ToString();
                        item.Expanded = true;
                        if (checkedNodes != null) 
                            { var checkedNode = checkedNodes
                                    .Where(e => e.MenuId.Equals(menu.MenuId))
                                    .FirstOrDefault(); 
                            item.Checked = checkedNode != null ? true : false; 
                        }
                    })
                    .Children(m => m.Children));
        })
        .ClientEvents(events => events
            .OnChecked("onChecked")
        )
)
on combobox selected index change you just call an action via ajax:
function itemChange(args) {
    var actionUrl = '@Url.Action("Filtered")';
    var selectedRole = $("#Roles").val();
    var result;
      
    $.ajax({
        url: actionUrl,
        data: { roleId: selectedRole },
        contentType: "application/json",
        success: function (data) {
            var treeview = $("#TreeView").data("tTreeView");
            treeview.bindTo(data);
        }
    });
}

and in the action you have to populate the tree i just rebuild the tree with my data, and check if the item is selected, and at the end I send my data back.
[HttpGet]
public JsonResult Filtered(string roleId)
{
    var menus = _menuRepository.GetList();
    var selectedMenus = _menuRepository.GetMenuForRole(int.Parse(roleId));
    List<TreeViewItem> nodes = new List<TreeViewItem>();
     
    foreach(var menu in menus)
    {
        var node = new TreeViewItem
            {
                Text = menu.Name,
                Value = menu.MenuId.ToString(),
                Expanded = true
            };
        buildTreeView(menu.Children, ref node, selectedMenus);
        nodes.Add(node);
    }
    return new JsonResult { Data = nodes, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
}
private void buildTreeView(IEnumerable<MenuModel> menus, ref TreeViewItem target, List<MenuModel> selected)
{
    bool isChecked = false;
    foreach (var menu in menus)
    {
        if (selected != null
        {
            var checkedNode = selected.Where(e => e.MenuId.Equals(menu.MenuId))
                            .FirstOrDefault();
            isChecked = checkedNode != null ? true : false
        }
        var node = new TreeViewItem
        {
            Text = menu.Name,
            Value = menu.MenuId.ToString(),
            Expanded = true,
            Checked = isChecked
        };
        buildTreeView(menu.Children, ref node, selected); 
        target.Items.Add(node);
    }
}

Here we go, maybe it is not the cleanest code but it works for what i needed.


Tags
TreeView
Asked by
raphael
Top achievements
Rank 1
Answers by
raphael
Top achievements
Rank 1
Share this question
or