[Solved] Client events not triggering in MVC TreeView

[cforsyth]

Hi All,

I'll try to make this brief.

I am using the JQuery UI Tabs plug-in to render the same partial view for all tabs. It uses Ajax to render the response from the action within the panel below the tabs.

The problem is not the rendering of the tree data, the problem is the client events. Only events for the first one rendered on the page get fired. Realize that the page DOM doesn't contain the data for the partial when the page is rendered. This is added via the JQuery UI Tabs, via AJAX. Then when the user clicks on another tab, another div is generated and another treeview is added.

All tabs render the partial view containing the treeview correctly. The problem is that the client events for all tabs except the first one, do not fire.

This is the markup for the treeview.... (this is in my partial view)

Html.Telerik().TreeView()
    .Name("divCourseTreeView")
    .BindTo(Model.Tree, mappings =>
        {
            // mapping for Course Root type
            mappings.For<CourseTreeItemRootViewModel>(binding =>
                binding.ItemDataBound((item, root) =>
                {
                    item.Selected = true;
                    item.Encoded = false;
                    item.Expanded = true;
                    item.Value = root.ID.ToString();
                    item.Text = Html.RenderCourseRootItem(root);
                })
                .Children(root => root.Children));


            // mapping for Folder type
            mappings.For<CourseTreeItemFolderViewModel>(binding =>
                binding.ItemDataBound((item, folder) =>
                {
                    item.Encoded = false;
                    item.Expanded = true;
                    item.Value = folder.ID.ToString();
                    item.Text = Html.RenderCourseFolderItem(folder);
                })
                .Children(folder => folder.Children));

            // mapping for Activity type
            mappings.For<CourseTreeItemActivityViewModel>(
                binding => binding.ItemDataBound((item, content) =>
                {
                    item.Encoded = false;
                    item.Text = Html.RenderCourseActivityItem(content);
                    item.Value = content.ID.ToString();
                }));

        })
    .ExpandAll(true)
    .HtmlAttributes(new { @class = "jsDivCourseTree" })
    .DragAndDrop(true)
    .ClientEvents(events => events
        .OnNodeDrop("Courses.NodeDrop")
        .OnSelect("Courses.NodeSelect")
        .OnLoad("Courses.TreeLoad")
    )
    .Render();

Thanks for any help you can give.

-Charles

[Atanas Korchev]

Hello Cforsyth,

Probably the initialization script of the treeviews loaded on demand is not executed at all. Since we are not familiar how the jQuery UI tabs work we cannot tell for sure. Another thing to look at is the name of the treeview. It must be globally unique in the page. Names are output as "id" html attributes and need to be unique.

Kind regards,
Atanas Korchev
the Telerik team

[cforsyth]

I've added code to make the names (id's) unique. That didn't solve it.

Is there some way to call the initialization script after ajax loads up a new tree into the DOM?

[Atanas Korchev]

Hello Cforsyth,

We don't know what your implementation is and cannot suggest how to execute the treeview initialization script. I suggest you check the jQuery UI documentation.

A possible workaround is to use the Telerik MVC TabStrip which does this automatically.

Regards,
Atanas Korchev
the Telerik team

[cforsyth]

Thanks for the response. Unfortunately, the site I am adding new features to makes extensive use of JQuery UI Tabs (specifically the styling). It would be too much work for me to use your tab strip at this point because I would have to re-style that to match our designer's style and then update the 20+ places that use tabs. I simply do not have the time to do that.

With that said, I can tap into the "success" or "complete" or even the "loaded" Ajax events when the JQuery UI Tabs plug-in loads the panel containing the HTML representing the tree.

So the question [again] is, does the TreeView have a client-side API that contains an "Initialize()" method (or something like it) that will hook up all the events, or is there some way to hook up (initialize) the individual events such as the OnNodeDrop and OnSelect events?

Thanks for your help.

[cforsyth]

Never mind, I figured it out after reading these pages...

http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html

http://www.telerik.com/community/forums/aspnet-mvc/treeview/treeview-actions-missing-after-ajax-form-update.aspx