MVC razor treeview using aciTree

Question

I have an mvc razo application. I want to display a treeview on demand and with checkbox.I tried jquery-treeview wich displayed a tree view without checkbox. So I tried to use an other plugin aciTree of jquery. But it display nothing.

This is the controller TreeView.cs

public virtual ActionResult Index()
    {

        return View();
    }

    [AcceptVerbs(HttpVerbs.Post)]
    public virtual ActionResult GetCollectionWS(string root)
    {
        int? nodeId = (root == "source") ? (int?)null : Convert.ToInt32(root);
        Object[] liste = new Object[100];
        liste = DSClient.Views.Traitement.getTop(nodeId);
        List<testTree> nodes = new List<testTree>();
        for (int i = 0; (i < liste.Length && liste.ElementAt(i) != null);i++ )
        {
            bool leaf = false;
            nodes.Add(new testTree()
            {

                id = Convert.ToString(DSClient.Views.Traitement.GetNodeId(liste.ElementAt(i))),
                checkbox = true,
                label = liste.ElementAt(i).Handle,
                open = false,
                radio = false,
                hasChildren = true
            });
        }
        return Json(nodes);
    }

this is the view

<script type="text/javascript" src="js/jquery.aciPlugin.min.js"></script>
    <script type="text/javascript" src="@Url.Content("~/js /jquery.aciTree.core.js")">   </script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.aciTree.selectable.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.aciTree.checkbox.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/js/jquery.aciTree.radio.js")"></script>
     <div id="tree" class="aciTree"><div>
     <script> $(document).ready(function () {

                // init the tree
                $('#tree').aciTree({
                    jsonUrl: '@Url.Action("GetCollectionWS")',
                    checkbox: true,
                    checkboxName: 'checkbox1[]',


                });                   

              });

            </script>
           <script>
           $(function () {

                var log = $('.log div');

                 // write to log
                $('#tree,#tree-combined').on('acitree', function (event, api, item, eventName, options) {
                if (api.isItem(item)) {
                   log.prepend('<p>' + eventName + ' [' + api.getId(item) + ']</p>');
                  } else {
                 log.prepend('<p>' + eventName + ' [tree]</p>');
                     }
                  });

    $('.clear_log').click(function () {
        $('.log div').html('');
        return false;
    });

});
</script>

Can somone help me please?Or post me usefull link open source please? When I try the breakpoint on the post methode I remarque that doesn't returned to the controller, Only the first methode is executed.

Answer 1

You could try dropping aciTree for jQuery dynatree?

I forked an existing fiddle of knockout + dynatree to enable checkboxes. You should be able to manipulate those through the dynatree API and jQuery itself.

http://jsfiddle.net/richbryant/PWtjZ/

The HTML is fairly straightforward using ko templates -

<!-- ko if: initialized -->
<div data-bind="dynatree: {}">
  <ul style="display:none" data-bind="template: { name: 'itemTmpl', foreach: items }"></ul>
</div>
<!-- /ko -->

<!-- ko ifnot: initialized -->
<span>Loading...</span>
<!-- /ko -->

<script id="itemTmpl" type="text/html">
    <li>
        <span data-bind="text: name"></span>        
        <ul data-bind="template: { name: 'itemTmpl', foreach: children }"></ul>
    </li>
</script>

and the js gets a bit complex because obviously, it needs some testdata to run with. the important bit here is

ko.bindingHandlers.dynatree = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        setTimeout( function() { $(element).dynatree({checkbox: true})}, 0);
    }
};

Hope that helps.