Hi I have problem getting the checkboxes to return for my Treeview using Dynatree. It works fine if i were to use normal written values but as soon as i get into using a foreach lopp and and C# code (Response.Write) to create values to display i cant seem to get the checkboxes to return. I will put the code below because im pretty sure it would be near impossible to understand or even help me without it.
Basis: for a bit of background i am using this tree view to display countries via Regions - Sub Regions - Countries - Areas within the country. Which is why i have written the view code the way it is.
TREE CODE:
<div>
<input type="text" id="search-criteria"/>
<input type="button" id="search" value="search">
<br class="clear"/>
<br />
</div>
<div id="tree">
<ul>
<li id="key0" title="Select All"><input type="checkbox" id="chb-key0" name="selected_items" value="All" />Select All
<ul>
<% int x = 0;
foreach (var areaOfBusiness in Model.Regions)
{
x = x + 1; %><li id="<% Response.Write("Key" + x); %>" title="Region">
<input type="checkbox" id="<% Response.Write("chb-key" + x); %>" name="<%Response.Write("selected_items" + x); %>" value="<% Response.Write("Item " + x); %>" /><% Response.Write(areaOfBusiness.Text); %><ul>
<% int i = 0;
foreach (var sub in Model.SubRegions)
{
if (sub.RegionId.ToString() == areaOfBusiness.Value)
{
i = i + 1; %><li id="<% Response.Write("Key" + x + "." + i); %>" title="Sub Region">
<input type="checkbox" id="<% Response.Write("chb-key" + x + "." + i); %>" name="selected_items" value="<% Response.Write("Item " + x + "." + i); %>" /><% Response.Write(sub.Name); %><ul>
<% int a = 0;
foreach (var country in Model.AOBCountries)
{
if (country.SubRegionId == sub.Id)
{
a = a + 1; %><li id="<% Response.Write("Key" + x + "." + i + "." + a); %>" title="Sub Region">
<input type="checkbox" id="<% Response.Write("chb-key" + x + "." + i + "." + a); %>" name="selected_items" value="<% Response.Write("Item " + x + "." + i + "." + a); %>" /><% Response.Write(country.Name); %><ul>
<%
//if (Model.ShowAreas == true)
//{
int h = 0;
foreach (var area in Model.Areas)
{
if (area.CountryId == country.Id)
{
h = h + 1; %><li id="<% Response.Write("Key" + x + "." + i + "." + a + "." + h); %>" title="Area">
<input type="checkbox" id="<% Response.Write("chb-key" + x + "." + i + "." + a + "." + h); %>" name="selected_items" value="<% Response.Write("Item " + x + "." + i + "." + a + "." + h); %>" /><% Response.Write(area.Name); %></li>
<% }
//}
} %>
</ul>
</li>
<% }
} %>
</ul>
</li>
<% }
} %>
</ul>
</li>
<% } %>
</ul>
</li>
</ul>
</div>
JAVASCRIPT CODE BEHIND THE TREE:
<script src="../../../Scripts/Tree/jquery.js"></script>
<script src="../../../Scripts/Tree/jquery-ui.custom.js"></script>
<script src="../../../Scripts/Tree/jquery.cookie.js"></script>
<script src="../../../Scripts/Tree/jquery.dynatree.js"></script>
<link href="../../../Scripts/css/ui.dynatree.css" rel="stylesheet" type="text/css" id="skinSheet"/>
<script id="treescript">
$(function () {
$("#tree").dynatree({
// using default options
persist: false,
checkbox: true,
selectMode: 3,
activeVisible: true,
clickFolderMode: 2,
noLink: false,
minExpandLevel: 1,
onActivate: function (node) {
node.data.expander.hide = true; //hide the expanders
node.render(true);
},
//Un/check real checkboxes recursively after selection
onSelect: function (select, dtnode) {
if (select) {
$("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
} else {
$("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
}
// $("#chb-" + dtnode.data.key).attr("checked", select).addClass("hidden");
dtnode.visit(function (dtnode) {
if (select) {
$("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
} else {
$("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
}
}, null, true);
dtnode.toggleExpand();
var input = $("#search-criteria").val().toLowerCase();
$('#areasofbusiness').find($("a")).each(function () {
if ($(this).text().toLowerCase().indexOf(input) > -1) {
$(this).css('background', 'cyan');
if (input == "") {
$(this).css('background', 'none');
}
}
else { $(this).css('background', 'none'); }
});
},
//Hack to prevent appearing of checkbox when node is expanded/collapsed
onExpand: function (select, dtnode) {
$("#tree :checkbox").addClass("hidden");
//$("#chb-" + dtnode.data.key).attr("checked", dtnode.isSelected()).addClass("hidden");
if (dtnode.isSelected()) {
$("#chb-" + dtnode.data.key).attr("checked", "checked").addClass("hidden");
} else {
$("#chb-" + dtnode.data.key).removeAttr("checked").addClass("hidden");
}
},
onClick: function (node, event) {
node.toggleExpand();
var input = $("#search-criteria").val().toLowerCase();
$('#areasofbusiness').find($("a")).each(function () {
if ($(this).text().toLowerCase().indexOf(input) > -1) {
$(this).css('background', 'cyan');
if (input == "") {
$(this).css('background', 'none');
}
}
else { $(this).css('background', 'none'); }
});
event.preventDefault();
},
onDblClick: function (node, event) {
node.toggleSelect();
},
onKeydown: function (node, event) {
if (event.which == 32) {
node.toggleSelect();
return false;
}
}
});
//Hide real checkboxes
$("#tree :checkbox").addClass("hidden");
});
</script>
ADDITIONAL SCRIPTS FOR THE SEARCH:
<script>
$("#search").on("click", function() {
$("a").each(function() {
$(this).css('background', 'none');
});
var input = $("#search-criteria").val().toLowerCase();
$('#areasofbusiness').find($("a")).each(function () {
if ($(this).text().toLowerCase().indexOf(input) > -1) {
$(this).css('background', 'cyan');
if (input == "") {
$(this).css('background', 'none');
}
}
});
});
I would greatly appreciate if anyone can help with this - the only checkbox that will return the checked value is the Select All and I've narrowed this down to possibly being because of the way its written compared to the rest or that it isn't in a foreach loop. Any other checkbox when selected doesn't get the attribute (checked: checked) when you inspect the element which is odd - and its this reason I assume it wont return them on my form collection.
Apologies for the long width of the code.
Aucun commentaire:
Enregistrer un commentaire