[Solved] Parent node with checkbox, child nodes without

[Donna Stewart]

Is there any way to have a treeview where the parent nodes have a checkbox, but the child nodes do not?  I have a need to show informational children for each parent which have no need for a checkbox, but I do need the parent to be checkable. I've tried setting the checkable attribute to false for the children, but that didn't work. 
Thank you for your help,
Donna

[Dimo]

Hello Donna,

I tried your scenario with the following two demos and it worked as expected:

http://demos.telerik.com/aspnet-mvc/treeview/checkboxsupport

The change is in the view:

    mappings.For<Employee>(binding => binding
            .ItemDataBound((item, employee) =>
            {
                // ..........
                if (item.Parent != null)
                {
                    item.Checkable = false;
                }
                // ..........
})

(by the way, the above demo contains duplicate mapping statements, which is not correct, we will fix this)

and

http://demos.telerik.com/aspnet-mvc/treeview/ajaxloading

The change is in the controller:

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult _AjaxLoading(TreeViewItem node)
{
    // .............
    IEnumerable nodes = from item in northwind.Employees
                        where item.ReportsTo == parentId || (parentId == null && item.ReportsTo == null)
                        select new TreeViewItemModel
                        {
                            // ...........
                            Checkable = false
                        };

    // ...........
}

If the above information does not help you make your scenario work, please send me your implementation.


Greetings,
Dimo
the Telerik team

[Donna Stewart]

Hi and thank you for your response.  I am not sure what is different from your code and mine other than I am using  VB2010.  I have the latest version of the Telerik Extensions (2011.3.1115.340), but it does not work for me.  Maybe I am not understanding how it is supposed to work "as expected".  I would like for the child nodes (well actually grandchild nodes in this particular case) to not have check boxes at all.  As it is, I am seeing the check boxes and they are checkable.  I'll paste my code below and see if that triggers anything to you that I may be doing wrong.  If not, I will try to create a solution that re-creates the issue - my current implementation is pretty large and connects to our databases for the data.  Thank you for your help with this!

Here's the controller code:

Function GetWebItemsToAdd(ByVal userKey As Integer) As ActionResult
    Dim gmcPermissions As New GMCPermissions
    Dim addWebItemsModel As New List(Of TreeViewItem)
    Dim webItemsReturned As New List(Of GMCListItem)
    Dim DLReports As New List(Of CustomerReport)
    Dim OLReports As New List(Of WebQuery)
    Dim statusReturn As New StatusReturn
    Dim webItemObj As New WebTask
    Dim parentNode As New TreeViewItem
    Dim childNode As TreeViewItem
    Dim grandChildNode As TreeViewItem
    Dim model As New AddWebItemsToUserModel
    model.userKey = userKey
    model.webItemsToAdd = New List(Of TreeViewItem)
    statusReturn = gmcPermissions.GetWebInfoForUser(userKey, webItemsReturned, True)
    If webItemsReturned.Count > 0 Then
        Dim initialReportType As String = webItemsReturned.Item(0).value
        parentNode.Text = initialReportType
        parentNode.Value = initialReportType
        For Each webItem In webItemsReturned
            webItemObj = webItem.dataObject
            If webItem.value.Equals(initialReportType) Then
                childNode = New TreeViewItem
                childNode.Value = webItemObj.TaskKey
                childNode.Text = webItemObj.TaskText
                If webItemObj.TaskTab.Equals("DL") Then
                    If Session("companyListType").Equals("carrier") Then
                        childNode.Text = webItemObj.TaskText + " - " + webItemObj.TaskCollectionLabel
                    Else
                        childNode.Text = webItemObj.TaskText
                    End If
                    DLReports = New List(Of CustomerReport)
                    statusReturn = gmcPermissions.GetReportsForTaskAndUser(webItemObj.TaskKey, userKey, DLReports, True)
                    If statusReturn.StatusCode.Equals(com.gmcps.StatusReturn.StatusCodes.SUCCESS) And DLReports.Count > 0 Then
                        For Each rpt In DLReports
                            grandChildNode = New TreeViewItem
                            grandChildNode.Text = rpt.FileName
                            grandChildNode.Value = rpt.ReportKey
                            grandChildNode.Checkable = False
                            childNode.Items.Add(grandChildNode)
                        Next
                    End If
                ElseIf webItemObj.TaskTab.Equals("RPT") Then
                    OLReports = New List(Of WebQuery)
                    statusReturn = gmcPermissions.GetQueriesForTaskAndUser(webItemObj.TaskKey, userKey, OLReports, True)
                    If statusReturn.StatusCode.Equals(com.gmcps.StatusReturn.StatusCodes.SUCCESS) And OLReports.Count > 0 Then
                        For Each qry In OLReports
                            grandChildNode = New TreeViewItem
                            grandChildNode.Text = qry.QueryTitle
                            grandChildNode.Value = qry.QueryKey
                            grandChildNode.Checkable = False
                            childNode.Items.Add(grandChildNode)
                        Next
                    End If
                End If
                parentNode.Items.Add(childNode)
            Else
                addWebItemsModel.Add(parentNode)
                initialReportType = webItem.value
                parentNode = New TreeViewItem
                parentNode.Text = webItem.value
                parentNode.Value = webItem.value
                childNode = New TreeViewItem
                childNode.Value = webItemObj.TaskKey
                childNode.Text = webItemObj.TaskText
                If webItemObj.TaskTab.Equals("DL") Then
                    If Session("companyListType").Equals("carrier") Then
                        childNode.Text = webItemObj.TaskText + " - " + webItemObj.TaskCollectionLabel
                    Else
                        childNode.Text = webItemObj.TaskText
                    End If
                    DLReports = New List(Of CustomerReport)
                    statusReturn = gmcPermissions.GetReportsForTaskAndUser(webItemObj.TaskKey, userKey, DLReports, True)
                    If statusReturn.StatusCode.Equals(com.gmcps.StatusReturn.StatusCodes.SUCCESS) And DLReports.Count > 0 Then
                        For Each rpt In DLReports
                            grandChildNode = New TreeViewItem
                            grandChildNode.Text = rpt.FileName
                            grandChildNode.Value = rpt.ReportKey
                            grandChildNode.Checkable = False
                            childNode.Items.Add(grandChildNode)
                        Next
                    End If
                ElseIf webItemObj.TaskTab.Equals("RPT") Then
                    OLReports = New List(Of WebQuery)
                    statusReturn = gmcPermissions.GetQueriesForTaskAndUser(webItemObj.TaskKey, userKey, OLReports, True)
                    If statusReturn.StatusCode.Equals(com.gmcps.StatusReturn.StatusCodes.SUCCESS) And OLReports.Count > 0 Then
                        For Each qry In OLReports
                            grandChildNode = New TreeViewItem
                            grandChildNode.Text = qry.QueryTitle
                            grandChildNode.Value = qry.QueryKey
                            grandChildNode.Checkable = False
                            childNode.Items.Add(grandChildNode)
                        Next
                    End If
                End If
                parentNode.Items.Add(childNode)
            End If
        Next
        addWebItemsModel.Add(parentNode)
    End If
    model.webItemsToAdd = addWebItemsModel
    Return PartialView("AddWebItems", model)
End Function

Here's the view code:

<%@ Control Language="VB" Inherits="System.Web.Mvc.ViewUserControl(Of GMC_Hub_and_Spoke.AddWebItemsToUserModel)" %>
    <%-- The following line works around an ASP.NET compiler warning --%>
    <%: ""%>
    <script type="text/javascript">
        $(document).ready(function () {
            $('a#cancelBtn').click(function () {
                $('#userindexright').html("");
            });
            $('a#continueBtn').click(addWebPermissions);
        });

        function addWebPermissions() {
            var webitemstreeview = $('#WebItemsToAddTree').data('tTreeView');
            var webitems = [];
            var parent, grandparent;
            var checkedNodes = $('#WebItemsToAddTree :checked').closest('.t-item');
            if (checkedNodes.length > 0) {
                $('#WebItemsToAddTree :checked').closest('.t-item')
                    .each(function (index, node) { // first arg: index, second arg: node
                        parent = $(node).parent().closest('.t-item');
                        grandparent = $(parent).parent().closest('.t-item');
                        if (parent.length > 0 && grandparent.length < 1) {
                            webitems.push({'Text': webitemstreeview.getItemText(node), 'Value': webitemstreeview.getItemValue(node), 'Encoded': false, 'ParentText': webitemstreeview.getItemText(parent)});
                        }
                    });
                $.cookie("userKey", '<%: Model.userKey %>');

                $.ajax({ url: '<%= Url.Action("AddWebItemsForUser", "User") %>',
                    type: 'POST',
                    dataType: 'json',
                    data: $.toJSON(webitems),
                    contentType: 'application/json; charset=utf-8',
                    success: function (result) {
                        if (result.StatusCode == 1) {
                            alert("Web Item(s) successfully added for user.");
                            var specificUrl;
                            var urlFormat;
                            urlFormat = '<%= HttpUtility.UrlDecode(Url.Action("EditUserPermissions", "User", New With { .id = "{0}" })) %>';
                            specificUrl = $.telerik.formatString(urlFormat, '<%: Model.userKey %>');
                            $("#userindexright").load(specificUrl);
                        }
                        else {
                            $("#AddWebItemsErrorField").replaceWith('<div id="AddWebItemsErrorField" class="display-field" style="color:#FF3366; font-size:small;">There was an error while adding the web item(s).</div>');
                        }
                    }
                });
            }
        }

        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);
            });
        }

</script>
<% Using Html.BeginForm("AddWebItemsForUser", "User", FormMethod.Post, New With {.id = "add-webitems-form"})%>
    <div style="padding:10px;">
        <span class="listbox-label">Web Items</span><br />
        <span class="editor-label">Choose web item(s) to add</span><br />
        <% Html.Telerik().TreeView().Name("WebItemsToAddTree").ShowCheckBox(True).HtmlAttributes(New With {.style = "font-size:1em; height:500px; width:350px"}) _
                .ClientEvents(Function(evt) evt.OnChecked("onChecked")) _
                                        .BindTo(CType(Model.webItemsToAdd, IEnumerable(Of TreeViewItem)),
                                        Sub(mappings)
                                            mappings.For(Of TreeViewItem)(
                                            Sub(binding)
                                                binding _
                                                    .ItemDataBound(
                                                        Sub(item, webitem)
                                                            item.Text = webitem.Text
                                                            item.Value = webitem.Value
                                                        End Sub).Children(Function(webitem) webitem.Items)
                                            End Sub)
                                            mappings.For(Of TreeViewItem)(
                                                Sub(binding)
                                                    binding.ItemDataBound(
                                                        Sub(item, childwebitem)
                                                            item.Text = childwebitem.Text
                                                            item.Value = childwebitem.Value
                                                         End Sub).Children(Function(childwebitem) childwebitem.Items)
                                                End Sub)
                                            mappings.For(Of TreeViewItem)(
                                                Sub(binding)
                                                    binding.ItemDataBound(
                                                        Sub(item, grandchilditem)
                                                            item.Text = grandchilditem.Text
                                                            item.Value = grandchilditem.Value
                                                            item.Checkable = False
                                                         End Sub)
                                                End Sub)
                                        End Sub).Render()%>
        <div style="float:none; clear:both; text-align:center">
            <div class="table_menu">
                <br />
                <ul class="left">
                    <li><a href="#" id="continueBtn" class="button add_new"><span><span>Continue</span></span></a></li>
                    <li><a href="#" id="cancelBtn" class="button add_new"><span><span>Cancel</span></span></a></li>
                </ul>
                <br />
                <div></div>
                <div id = "AddWebItemsErrorField"></div>
            </div>
        </div>
    </div>
<% End Using %>

[Dimo]

Hello Donna,

The provided code does not suggest some obvious problem. I suppose you have already debugged both the Controller and the View, and the Checkable() properties are set. If this is the case, I will appreciate if you isolate the issue in a standalone runnable project and send it for further inspection. Please make sure the project contains some dummy datasource and all references / assemblies needed to run. Thank you.

All the best,
Dimo
the Telerik team

[Donna Stewart]

Hi Dimo,

I have created and attached a sample project which shows the issue.  Please let me know if you need anything else.  Again, thank you for your help.

Donna

[Dimo]

Hello Donna,

In your case you don't need three mapping statements in the View. The Checkable property should be set with an IF statement, just like the way I demonstrated in my previous reply.

Html.Telerik().TreeView().Name("WebItemsToAddTree") _
    .ShowCheckBox(True) _
    .HtmlAttributes(New With {.style = "font-size:1em; height:500px; width:350px"}) _
            .ClientEvents(Function(evt) evt.OnChecked("onChecked")) _
            .BindTo(CType(Model.TreeNodes, IEnumerable(Of TreeViewItem)),
            Sub(mappings)
                mappings.For(Of TreeViewItem)(
                Sub(binding)
                    binding _
                        .ItemDataBound(
                            Sub(item, webitem)
                                item.Text = webitem.Text
                                item.Value = webitem.Value
                                If item.Parent IsNot Nothing AndAlso item.Parent.Parent IsNot Nothing Then
                                    item.Checkable = False
                                End If
                            End Sub).Children(Function(webitem) webitem.Items)
                End Sub)
            End Sub).Render()

 

Greetings,
Dimo
the Telerik team

[Donna Stewart]

Hi Dimo,

I'm a dunce.  I totally missed the IF statement in your previous reply.  I've removed the 2 children mapping statements and added the IF and it works now beautifully!  Thank you very much for your patience and help.

Donna