This is a migrated thread and some comments may be shown as answers.

Posting checkboxes from treeview to MVC controller

4 Answers 511 Views

TreeView

This is a migrated thread and some comments may be shown as answers.

Christopher asked on 17 Jul 2013, 08:23 PM

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>

<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!

4 Answers, 1 is accepted

Accepted