Posting checkboxes from treeview to MVC controller

5 posts, 1 answers
  1. Christopher
    Christopher avatar
    8 posts
    Member since:
    Jul 2013

    Posted 17 Jul 2013 Link to this post

    Hi - Just getting started with Kendo and need to post the selected checkboxes from a treeview to an MVC controller.  I was able to get the treeview rendering  with little fuss but am having problems getting the selected checkboxes to post.  The parameter they should map to in my controller action is always null.  Below is what the HTML looks like when my view renders:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>Redacted</title>
        <link href="/Content/bootstrap.css" rel="stylesheet" />
        <link href="/Content/site.css" rel="stylesheet" />
        <script src="/Scripts/jquery-1.9.1.js"></script>
        <script src="/Scripts/jquery.validate.js"></script>
        <script src="/Scripts/jquery.validate.unobtrusive.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
    </head>
    <body>
        <link href="/Assets/css/kendo/kendo.common.min.css" rel="stylesheet" />
        <link href="/Assets/css/kendo/kendo.default.min.css" rel="stylesheet" />
        <script src="/Assets/js/kendo/kendo.core.min.js"></script>
        <script src="/Assets/js/kendo/kendo.userevents.min.js"></script>
        <script src="/Assets/js/kendo/kendo.data.min.js"></script>
        <script src="/Assets/js/kendo/kendo.treeview.min.js"></script>
        <div class="container">
            <h1>Batch Reporting</h1>
            <div class="accordion" id="reports">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-parent="reports" href="#dataExtract">Data Extract</a>
                    </div>
                    <div id="dataExtract" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <form action="/Report/DataExtract" method="post">
                                <div style="height: 300px; overflow-y: scroll">
                                    <div id="treeview"></div>
                                </div>
                                <div>
                                    <br />
                                    <button class="btn  " type="submit">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $("#treeview").kendoTreeView({
                checkboxes: {
                    checkChildren: true,
                    name: "checkedItem[]"
                },
                dataSource: [
                    {
                        "id": 13, "hasChildren": true, "text": "csd", "items": [
                            {
                                "id": 25, "hasChildren": true, "text": "School", "items": [
                                    { "id": 39, "hasChildren": false, "text": "Class 1", "items": null, "expanded": false },
                                    { "id": 48, "hasChildren": false, "text": "Class 2", "items": null, "expanded": false },
                                    { "id": 90, "hasChildren": false, "text": "Class 3", "items": null, "expanded": false },
                                    { "id": 85, "hasChildren": false, "text": "Class 4", "items": null, "expanded": false },], "expanded": false
                            }], "expanded": true
                    }]
            });
        </script>
    </body>
    </html>
    The controller action looks like this:
    public ActionResult DataExtract(string[] checkedItems)
    {
      // Do some really important stuff here...
     
      return RedirectToAction("Index", "Home");
    }
    Any suggestions as to what I need to do to get the array of selected values would be much appreciated.

    Thanks!

  2. Christopher
    Christopher avatar
    8 posts
    Member since:
    Jul 2013

    Posted 17 Jul 2013 Link to this post

    Also just wanted to mention that I'm using v2013.2.716

  3. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    1822 posts
    Member since:
    Sep 2012

    Posted 18 Jul 2013 Link to this post

    Hello Cristopher,

    The name in the checkboxes configuration and the expected parameter on the server need to be the same.

    // JS
    checkboxes: { name: "checkedItems" }


    // C#
    DataExtract(string[] checkedItems)

    Regards,
    Alex Gyoshev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  4. Christopher
    Christopher avatar
    8 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2013 Link to this post

    Ok, so I have the names matching and the checkedItems array is now getting passed into the controller action.  However the checkedItems array doesn't appear to be terribly useful.  If I have a list of say, 10 items and check 5 of them and then post the form, I get an array of 5 strings, each with the value of "on".  I don't see a way to correlate this to the IDs of the selected items.  Am I missing something else?

  5. Answer
    Christopher
    Christopher avatar
    8 posts
    Member since:
    Jul 2013

    Posted 18 Jul 2013 Link to this post

    Found my answer here:  http://stackoverflow.com/questions/13487517/kendo-hierarchical-datasource-for-treeview-filter-to-checked-nodes

    Basically I just needed to setup a template that sets the ID for the checkboxes like so:

    $("#treeview").kendoTreeView({
        checkboxes: {
            checkChildren: true,
            name: "checkedItems",
            template: "<input type='checkbox' name='checkedItems' value='#= item.id #' />"
        },
        dataSource: // Data source ommited
    });

Back to Top