Treeview with "nodeChecked undefned" error

2 posts, 0 answers
  1. Greg
    Greg avatar
    19 posts
    Member since:
    Jun 2012

    Posted 14 Nov 2012 Link to this post

    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
  2. Greg
    Greg avatar
    19 posts
    Member since:
    Jun 2012

    Posted 20 Nov 2012 Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top