Get Checked Nodes in a POST Query
Environment
Product | Progress® Kendo UI® TreeView for jQuery |
Description
When the user tries to select a TreeView node, it seems that all TreeView nodes are checked while in the POST
query after the form is submitted, only one entry is visible and it is impossible to distinguish the checked nodes and to list them in the POST
as part of the form data.
Cause
- If the
checkboxes.checkChildren
property is set totrue
, the TreeView checks all child nodes. To enable the TreeView to check only the current node, setcheckboxes.checkChildren
tofalse
or remove it. - Checkboxes participate in the
POST
of a<form>
through theirname
property— if a checkbox is checked, itsname
is present in thePOST
data.
Solution
Apply either of the following approaches:
- Use JavaScript to loop through the nodes on the client and collect the checked ones. Then put them in a hidden field, or serialize or send them to the server. For the full implementation of this approach, refer to the example on collecting the checked TreeView nodes.
- Distinguish checkboxes by generating unique names with the
checkbox.template
.
The following example demonstrates a template that mimics the default TreeView template with classes for appearance and an aria-label
attribute for accessibility.
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
.Template("<span class='k-checkbox-wrapper'><input class='k-checkbox' name='checkedFiles#=item.id#' type='checkbox' value='true' #= item.checked ? 'checked' : '' # aria-label='#=item.text#' /></span>")
)
The following example demonstrates the jQuery initialization.
<form>
<input type="submit" value="post me" />
<div id="treeview"></div>
</form>
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
template: "<span class='k-checkbox-wrapper'><input class='k-checkbox' name='checkedFiles#=item.id#' type='checkbox' value='true' #= item.checked ? 'checked' : '' # aria-label='#=item.text#' /></span>"
},
dataSource: [{
id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{
id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html", checked: true },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{
id: 6, text: "New Website", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
]
},
{
id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
]
}
]
}]
});
</script>
The following example demonstrates the ASP.NET MVC syntax.
<form>
<input type="submit" value="submit form" />
@(Html.Kendo().TreeView()
.Name("treeview")
.Checkboxes(checkboxes => checkboxes
.Name("checkedFiles")
.CheckChildren(true)
.Template("<span class='k-checkbox-wrapper'><input class='k-checkbox' name='checkedFiles#=item.id#' type='checkbox' value='true' #= item.checked ? 'checked' : '' # aria-label='#=item.text#' /></span>")
)
.Items(treeview =>
{
treeview.Add().Text("My Documents").Id("1")
.SpriteCssClasses("rootfolder")
.Expanded(true)
.Items(root =>
{
root.Add().Text("Kendo UI Project").Id("2")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(project =>
{
project.Add().Text("about.html").Id("3").SpriteCssClasses("html").Checked(true);
project.Add().Text("index.html").Id("4").SpriteCssClasses("html");
project.Add().Text("logo.png").Id("5").SpriteCssClasses("image");
});
root.Add().Text("New Website").Id("6")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(item =>
{
item.Add().Text("mockup.jpg").Id("7").SpriteCssClasses("image");
item.Add().Text("Research.pdf").Id("8").SpriteCssClasses("pdf");
});
root.Add().Text("Reports").Id("9")
.Expanded(true)
.SpriteCssClasses("folder")
.Items(reports =>
{
reports.Add().Text("February.pdf").Id("10").SpriteCssClasses("pdf");
reports.Add().Text("March.pdf").Id("11").SpriteCssClasses("pdf");
reports.Add().Text("April.pdf").Id("12").SpriteCssClasses("pdf");
});
});
})
)
</form>