filtered checkbox on treeview jquery

[raphael]

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

[raphael]

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.