Databound event doesn't fire

2 posts, 0 answers
  1. Dietmar
    Dietmar avatar
    13 posts
    Member since:
    May 2012

    Posted 03 Dec 2013 Link to this post

    Hi,

    I'm using a TreeView like in this  example. It is located in the left pane of a two pane splitter, if that matters. All events fire as they should, except the DataBound one. I already tried to modify the example code, that comes with kendo. It does not work here, too.

    My TreeView code:
    @(Html.Kendo().TreeView()
        .Name("MyTreeView")
        .BindTo(Model, mappings => mappings.For<TreeViewNode>(binding => binding
            .ItemDataBound((item, node) =>
                {
                    item.Text = node.Name;
                    item.Id = node.Value.ToString();
                    item.Expanded = ViewData[ViewBag.ExpandedCookie] != null &&
                                    ((string[])ViewData[ViewBag.ExpandedCookie]).Contains(item.Id);
     
                    //item.HtmlAttributes["data-selectable"] = node.Selectable;
     
                    if (node.AddOnly)
                        item.HtmlAttributes["data-addOnly"] = true;
                    else
                        item.HtmlAttributes["data-addOnly"] = false;
     
                    if (!node.Selectable)
                    {
                        item.HtmlAttributes["style"] = "color: #888";
                    }
                    else
                        item.HtmlAttributes["style"] = "color: black";
                })
            .Children(parent => parent.Childs))).HtmlAttributes(new { @class = "k-group" }).Events(e => e
                .Select("onSelect")
                .Expand("updateTreeViewState")
                .Collapse("updateTreeViewState")
                .DragStart("onNodeDragStart")
                .DataBound("onTreeDataBound")
                .Drop("onNodeDrop")).DragAndDrop(true)
        )

    And the javascript code:
    function onTreeDataBound(e) {
        alert("databound");
    }
     
    // select event as an example (this works)
    function onSelect(e) {
        var dataItem = this.dataItem(e.node);
        $("#ID").val(dataItem.id);
     
        if ($(e.item).attr("data-selectable") == "0" || dataItem.id == "0")
            e.preventDefault();
        else
            // request server for partial view for details and refresh right pane of splitter
            getSplitter("#outerSplitter").ajaxRequest("#right-pane", "/" + getArea() + "/" + getController() + "/Details", { id: dataItem.id });
     
        // update statusbar to default
        $("#lblStatus").text("Ready");
        $("#lblStatus").css('color', 'black', 'font-weight ', 'normal')
        //}
    }
    Am I missing something here?

    Best Regards

    Dietmar
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 05 Dec 2013 Link to this post

    Hi,

    Basically current behavior is expected as currently the TreeView is bind to the data on the server side. Please note that the DataBound event is triggered only after binding data on the client side. 

    Regards,
    Vladimir Iliev
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top