Christopher
Top achievements
Rank 1
Rank 1
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:
The controller action looks like this:
Any suggestions as to what I need to do to get the array of selected values would be much appreciated.
Thanks!
<!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>public ActionResult DataExtract(string[] checkedItems){ // Do some really important stuff here... return RedirectToAction("Index", "Home");}Thanks!
4 Answers, 1 is accepted
0
Christopher
Top achievements
Rank 1
Rank 1
answered on 17 Jul 2013, 08:24 PM
Also just wanted to mention that I'm using v2013.2.716
0
Hello Cristopher,
Alex Gyoshev
Telerik
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)
Alex Gyoshev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Christopher
Top achievements
Rank 1
Rank 1
answered on 18 Jul 2013, 02:12 PM
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?
0
Accepted
Christopher
Top achievements
Rank 1
Rank 1
answered on 18 Jul 2013, 02:45 PM
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:
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});