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?

enter image description here

Thank you!

now i'm working on validation. it means that there should be at least one inner checkbox checked. can anyone help with integration in mvc 3 (jquery) client side validation? — drunkcamel, Jul 08 '11 at 05:52

score 2 · Accepted Answer · answered Jul 06 '11 at 13:53

2

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.

answered Jul 06 '11 at 13:53

Steve Wortham

21,740
5
68
90

That is a very good jQuery plugin! Thank you very much! Now i just need to implement handle logic with MVC! – drunkcamel Jul 06 '11 at 14:47

score 1 · Answer 2 · edited May 23 '17 at 12:19

1

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.

edited May 23 '17 at 12:19

Community

1
1

answered Jul 06 '11 at 13:52

Muhammad Adeel Zahid

17,474
14
90
155

score 0 · Answer 3 · answered Jul 06 '11 at 13:35

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>

oh, i'm very sorry. i need this checkbox list for mvc. the idea with webforms is clear but with mvc + using some js(jquery) and/or ajax postbacks to drilldown and show info it's not so obvious. but thanks anyway! — drunkcamel, Jul 06 '11 at 13:42

score 0 · Answer 4 · answered Dec 07 '11 at 17:35

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

ASP.NET MVC3 Drilldown Checkboxlist

4 Answers4