This is a migrated thread and some comments may be shown as answers.

Treeview with "nodeChecked undefned" error

1 Answer 116 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 1
Greg asked on 15 Nov 2012, 02:17 AM
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

1 Answer, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 20 Nov 2012, 11:54 PM
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
Tags
TreeView
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Share this question
or