[Solved] Checkbox issues

[Jaymie]

Hi,

I have an issue at the moment with the TreeView control and checkboxes.
I needed to allow for the client to be able to select a parent node and all the children to be selected and deselcted as neccessary.
I did this by doing this:

function onChecked(e) {
    var item = $(e.item),
    isChecked = e.checked,
    treeView = $(this).data('tTreeView'),
    childCheckBoxes = item.find(":checkbox");

    $.each(childCheckBoxes, function (index, checkbox) {
        $(checkbox).attr('checked', isChecked);
        treeView.nodeCheck(null, checkbox);
    });
}

This worked fine.
Then i needed to select the checkboxes when the page loaded depending on values stored in my database, which looks like this:

@(Html.Telerik().TreeView()
        .Name("TreeView")
        .ShowCheckBox(true)
        .ClientEvents(events => events
            .OnChecked("onChecked")
        )
        .BindTo(Model, mappings =>
        {
            mappings.For<Asset>(binding => binding
                .ItemDataBound((item, Asset) =>
                {
                    item.Text = String.Format("{0}", Asset.DisplayName);
                    item.Value = Convert.ToString(Asset.Id);
                    if (ViewData["oldAccess"] != null)
                    {
                        List<int> oAccess = (List<int>)ViewData["oldAccess"];
                        foreach (int i in oAccess)
                        {
                            if (Convert.ToInt32(item.Value) == i)
                            {
                                item.Checked = true;
                            }
                        }
                    }
                    item.Expanded = true;
                })
                .Children(Asset => Asset.Categories()));
        })
)

This, again worked fine.
The problem arose when I try to chagne the Checkboxes and save the state.
If I uncheck a parent, the client removes the checkboxes for all the children, but when the form is submitted, the server only unchecks the one I clicked. Not the ones that the client changed.
I need the server to be aware of these changes, so I guess I have to manipulate the List<TreeViewItem> TreeView_checkedNodes but I have no idea how.

Any help would be greatly appreciated.

/Jaymie

[Dimo]

Hello Jaymie,

It is incorrect to manipulate the checkboxes' state directly. Please use the nodeCheck API method with proper parameters:

function onChecked(e) {
    var treeView = $(this).data("tTreeView");
    var childNodes = $(e.item).find(">.t-group input").filter(":checkbox");
    childNodes.each(function(index, element) {
        treeView.nodeCheck(element, e.checked);
    });
}

Greetings,
Dimo
the Telerik team

[Jaymie]

Thanks, that worked perfectly