My company has paid for a 3 license copy of KendoUI
I am posting here and not under the company registered user name as no one monitors that email
I am using
2012.2.710 release (because I can't upgrade
I am getting an error when the treeview is rendered.There error is(see attachment for screen shot):
Unhandled exception at line 8, column 374994 in http://localhost:3407/Scripts/KendoUI/kendo.web.min.js
0x800a138f - Microsoft JScript runtime error: 'f[...].uid' is null or not an object
Browser is IE8. Must use this version : 1.4 billion(and counting) Chinese can't be wrong!!
Here is the Treeview code:
@
using DnB.Connect.Mvc.Common.BaseTypes;
@
using DnB.ConnectEntityModel;
@model DnB.Connect.Mvc.Common.BaseTypes.
CategoryEdit
<
script type="text/javascript">
function nodeChecked(e) {
//remember whether e is checked
var isChecked = e.checked;
//select all items
var allCheckboxes = $('#CategoryTreeView').find("li").find('> div > .t-checkbox :checkbox:checked')
//alert('after find');
//remove all checks
$.each(allCheckboxes,
function (index, checkbox) {
$(checkbox).attr(
'checked', false);
});
//alert('after check removal');
//put e back as you found it
e.checked = isChecked;
var catDesc = '';
var catId = 0;
if (isChecked) {
catDesc = $($(e.item)[0]).find(
'span.t-in')[0].innerHTML;
catDesc = catDesc.replace(
/&/g, '&');
catId = $($(e.item)[0]).find(
'input[name="itemValue"]')[0].value;
$(
'#CategoryID').val(catId);
$(
'#CategoryName').val(catDesc);
}
var span = $("#CatError").remove();
}
</
script>
<
div id="catTreeModal" class="reveal-modal">
<h3>Select Category</h3>
<a class="small nice blue radius button bump close-reveal-modal">Done</a>
@*
@(Html.Telerik().TreeView().Name("CategoryTreeView")
.ShowCheckBox(true)
.ShowLines(true)
.ClientEvents(e => e.OnChecked("nodeChecked"))
.BindTo(@Model.CategoryList, (item, cat) =>
{
item.Text = cat.CategoryDetails.FirstOrDefault().Name;
item. Value = cat.CategoryID.ToString();
item.LoadOnDemand = cat.CategoryChild.Any();
})
.DataBinding(dataBinding => dataBinding
.Ajax().Select("CategoryLoadChildren", "Base"))
)
*@
@(Html.Kendo().TreeView()
.Name(
"CategoryTreeView") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget.
.Events(e => e.Select(
"nodeChecked"))
.BindTo(@Model.CategoryList, mapping => mapping
.For<
Category>(binding => binding
.Children(c => c.CategoryChild)
.ItemDataBound((item, c) => item.Text = c.CategoryDetails.FirstOrDefault().Name)
)
)
.DataSource(source => {
source.Read(read =>
{
read.Action(
"CategoryLoadChildren", "Base");
});
})
.CheckboxTemplate(
"<input type='checkbox' />")
)
</
div>
<
script id="itemInfoTemplate" type="text/kendo-ui-template">
# var name = "checkedCategory"; /* modify this to change the argument name */ #
# var arrayItem = name + "[" + index + "]"; #
<input type="hidden" name="#= name #.Index" value="#= index #" />
<input type="hidden" name="#= arrayItem #.Id" value="#= item.id #" />
<input type="hidden" name="#= arrayItem #.Name" value="#= item.Name #" />
</
script>
<
script type="text/javascript">
function getNodeIndex(node) {
return node.parentsUntil(".k-treeview", ".k-item").map(function () {
return $(this).index();
}).toArray().reverse().join(
":");
}
$(document).ready(
function () {
var itemInfoTemplate = kendo.template($("#itemInfoTemplate").html());
var treeview = $("#CategoryTreeView");
treeview.on(
"change", ":checkbox", function (e) {
var checkbox = $(this),
dataItem = treeview.data(
"kendoTreeView").dataItem(checkbox.closest(".k-item")),
index = getNodeIndex(checkbox);
checkbox.nextAll().remove();
if (checkbox.is(":checked")) {
checkbox.after(itemInfoTemplate({
item: dataItem,
index: index
}));
}
});
});
</
script>
@using DnB.Connect.Mvc.Common.BaseTypes;
@using DnB.ConnectEntityModel;
@model DnB.Connect.Mvc.Common.BaseTypes.CategoryEdit
<
script
type
=
"text/javascript"
>
function nodeChecked(e) {
//remember whether e is checked
var isChecked = e.checked;
//select all items
var allCheckboxes = $('#CategoryTreeView').find("li").find('> div > .t-checkbox :checkbox:checked')
//alert('after find');
//remove all checks
$.each(allCheckboxes, function (index, checkbox) {
$(checkbox).attr('checked', false);
});
//alert('after check removal');
//put e back as you found it
e.checked = isChecked;
var catDesc = '';
var catId = 0;
if (isChecked) {
catDesc = $($(e.item)[0]).find('span.t-in')[0].innerHTML;
catDesc = catDesc.replace(/&/g, '&');
catId = $($(e.item)[0]).find('input[name="itemValue"]')[0].value;
$('#CategoryID').val(catId);
$('#CategoryName').val(catDesc);
}
var span = $("#CatError").remove();
}
</
script
>
<
div
id
=
"catTreeModal"
class
=
"reveal-modal"
>
<
h3
>Select Category</
h3
>
<
a
class
=
"small nice blue radius button bump close-reveal-modal"
>Done</
a
>
@*@(Html.Telerik().TreeView().Name("CategoryTreeView")
.ShowCheckBox(true)
.ShowLines(true)
.ClientEvents(e => e.OnChecked("nodeChecked"))
.BindTo(@Model.CategoryList, (item, cat) =>
{
item.Text = cat.CategoryDetails.FirstOrDefault().Name;
item. Value = cat.CategoryID.ToString();
item.LoadOnDemand = cat.CategoryChild.Any();
})
.DataBinding(dataBinding => dataBinding
.Ajax().Select("CategoryLoadChildren", "Base"))
)*@
@(Html.Kendo().TreeView()
.Name("CategoryTreeView")
.Events(e => e.Select("nodeChecked"))
.BindTo(@Model.CategoryList, mapping => mapping
.For<
Category
>(binding => binding
.Children(c => c.CategoryChild)
.ItemDataBound((item, c) => item.Text = c.CategoryDetails.FirstOrDefault().Name)
)
)
.DataSource(source => {
source.Read(read =>
{
read.Action("CategoryLoadChildren", "Base");
});
})
.CheckboxTemplate("<
input
type
=
'checkbox'
/>")
)
</
div
>
<
script
id
=
"itemInfoTemplate"
type
=
"text/kendo-ui-template"
>
# var name = "checkedCategory"; /* modify this to change the argument name */ #
# var arrayItem = name + "[" + index + "]"; #
<
input
type
=
"hidden"
name
=
"#= name #.Index"
value
=
"#= index #"
/>
<
input
type
=
"hidden"
name
=
"#= arrayItem #.Id"
value
=
"#= item.id #"
/>
<
input
type
=
"hidden"
name
=
"#= arrayItem #.Name"
value
=
"#= item.Name #"
/>
</
script
>
<
script
type
=
"text/javascript"
>
function getNodeIndex(node) {
return node.parentsUntil(".k-treeview", ".k-item").map(function () {
return $(this).index();
}).toArray().reverse().join(":");
}
$(document).ready(function () {
var itemInfoTemplate = kendo.template($("#itemInfoTemplate").html());
var treeview = $("#CategoryTreeView");
treeview.on("change", ":checkbox", function (e) {
var checkbox = $(this),
dataItem = treeview.data("kendoTreeView").dataItem(checkbox.closest(".k-item")),
index = getNodeIndex(checkbox);
checkbox.nextAll().remove();
if (checkbox.is(":checked")) {
checkbox.after(itemInfoTemplate({
item: dataItem,
index: index
}));
}
});
});
</
script
>
Greg