[Solved] Treeview with "nodeChecked undefned" error

[Greg]

folks
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(

 

/&amp;/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>

regards

Greg

[Greg]

I have fixed this by updating to the lastest version and doing the things in this post(my post)

treeview and checkboxes: a Solution

http://www.kendoui.com/forums/mvc/treeview/treeview-and-checkboxes-a-solution.aspx

regards

Greg