ASP.NET MVC3 Drilldown Checkboxlist

Question

Can anyone help with advices or ready solution how to implement such a checkbox list as on the screen below?

Thank you!

Answer 1

You might check out the checkboxtree jQuery plugin. Behind the scenes the markup will be composed of nested unordered lists and regular checkboxes. Should make it easy to integrate into an MVC solution.

Answer 2

check out this question which is exactly discussing the same problem. I have personally used Dynatree and it works ok for me. You can also explore telerik's treeview if you are interested in telerik controls.

Answer 3

Edit note: I see you have asp.net and mvc 2 checked. This solution is for asp.net.

What it looks like is a treeview with a checkboxs. This is a default control of ASP.net. To get the scroll bars you can place it inside of a div and set the height with css. Likewise for the syling of the treeview itself, you can use css to style it.

The focus here in the Treeview is the ShowCheckBoxes property. You can enable checkboxes on all nodes, leaf, parent, etc. So modify this property as needed. You can of course bind data to the treeview if you need to.

<asp:TreeView ID="tv" runat="server" ShowCheckBoxes="All">
    <Nodes>
        <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
        <asp:TreeNode Text="New Node" Value="New Node">
            <asp:TreeNode Text="New Node" Value="New Node">
                <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
                <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="New Node" Value="New Node">
                <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
            </asp:TreeNode>
            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
        </asp:TreeNode>
        <asp:TreeNode Text="New Node" Value="New Node">
            <asp:TreeNode Text="New Node" Value="New Node"></asp:TreeNode>
        </asp:TreeNode>
    </Nodes>

</asp:TreeView>

Answer 4

I wrote a series on hierarchical data , in particular using MVC 3 and Razor to nicely render "trees". Using this approach may just clean-up where your validation logic goes and it makes for a nice way to separate out the view logic which renders the tree and the view logic which defines each 'node" in the tree. Hope it helps