[Solved] Bug: Q2010.1.518 TreView don't work together with Grid on the same page

[ANDrew St.]

TreeView and Grid with AJAX don't work together on the same page. After adding command column in grid events in TreeView don't fire and it dont work. TreeView with LoadOnDemand support. 

[Michiel Peeters]

Dear Andrew,

Do you mean that the treeview loads up a grid or are they both seperatly on the page? Or has the grid the treeview loaded? Try to describe your problem as detailed as possible. Anyway maybe the scriptregistrar of Telerik does not load the correct scripts. You maybe need to set those manually.

Kind regards,
Michiel Peeters

[ANDrew St.]

When click on TreeView item populated data in the grid. But after  i added in grid:
columns.Command(commands => {commands.Edit();});.
TreeView populate root node and does not react to any events.

[Michiel Peeters]

Dear Andrew St,

Is it possible that you can provide the code snippits?

Kind regards,
Michiel Peeters

[ANDrew St.]

This code work on version 2010.1.309 but from 416 and higher dosen't work.

 <h2><%= Html.Encode(((DiscountTemplateModel)ViewData["Template"]).TemplateName) %></h2>
    <%= Html.Hidden("discountId", ViewData["ActionID"].ToString()) %>
    <%= Html.Hidden("templateId", ViewData["ActionID"].ToString()) %>
    <div style="width: 390px; float: left;">
        <div style="width: 100%; height: 820px; overflow: auto; border:  solid #333 1px; padding: 5px;">
            <%= Html.Telerik().TreeView()
                    .Name("tvTemplates")
                    .BindTo(Model, (item, discount) =>
                    {
                        // bind initial data - can be omitted if there is none
                        item.LoadOnDemand = discount.ChildsCount > 0;
                        item.Text = discount.DiscountName;
                        item.Value = discount.DiscountId.ToString();
                        item.Selected = true;
                    })
                    .DataBinding(dataBinding => dataBinding
                            .Ajax().Select("_treeDiscounts", "BaseDiscount", new { area = "", dic = ViewData["ActionId"], type = "template" })
                    )
                    .ClientEvents(events => events
                            .OnSelect("onSelectTreeItem")
                    )
            %>
        </div>
    </div>
    <div style="margin: 0 0 0 405px; width: auto;">
        <h3 id="gridHeader"><%= Html.Encode(ViewData["GridHeader"]) %></h3>
        <%= Html.Telerik().Grid<ObjectDiscountModel>()
                .Name("Discounts")
                .Localizable("en-US")
                .DataKeys(dataKeys => dataKeys.Add(c => c.DiscountId))
                .Columns(columns =>
                {
                    columns.Bound(c => c.DiscountName);
                    columns.Bound(c => c.Number).Width(60);
                    columns.Bound(c => c.ParentMultiplier).Title("Parent Mult.").Width(60).HtmlAttributes(new { style = "text-align: right;" });
                    columns.Bound(c => c.SelfMultiplier).Width(70).HtmlAttributes(new { style = "text-align: right;" });
                    columns.Command(commands =>
                    {
                        commands.Edit();
                    }).Width(180).Title("Commands");
                    columns.Bound(c => c.ParentId).Hidden(true).HeaderHtmlAttributes(new { style = "display: none; width: 0pt;" }).HtmlAttributes(new { style = "display: none; width: 0pt;" });
                    columns.Bound(c => c.DiscountId).Width(0).HeaderHtmlAttributes(new { style = "display: none; width: 0pt;" }).HtmlAttributes(new { style = "display: none; width: 0pt;" });
                })
                .DataBinding(dataBinding =>
                                {
                                    dataBinding.Ajax()
                                       .Select("_subDiscounts", "BaseDiscount", new { area = "", discountId = ViewData["DiscountId"], dic = ViewData["ActionId"], type = "template" })
                                       .Update("_saveMultiplier", "BaseDiscount", new { area = "", dic = ViewData["ActionId"], type = "template" });
                    })
                .Selectable()
                .Scrollable(scrolling => scrolling.Height(350))
                .ClientEvents(events => events.OnRowSelected("onRowSelected"))
        %>
        <h3 id="gridProductHeader" style="margin: 0px 0;">Products</h3>
        <%= Html.Telerik().Grid<DiscountProductModel>()
                .Name("Products")
                .DataKeys(dataKeys => dataKeys.Add(c => c.ProductId))
                .Columns(columns =>
                {
                    columns.Bound(c => c.PartNo).Width(80);
                    columns.Bound(c => c.Description);
                    columns.Bound(c => c.ParentMultiplier).Title("Parent Mult.").Width(60).HtmlAttributes(new { style = "text-align: right;" });
                    columns.Bound(c => c.SelfMultiplier).Width(70).HtmlAttributes(new { style = "text-align: right;" });
                    columns.Command(commands =>
                    {
                        commands.Edit();
                    }).Width(180).Title("Commands");
                    columns.Bound(c => c.DiscountId).Width(0).HeaderHtmlAttributes(new { style = "display: none; width: 0pt;" }).HtmlAttributes(new { style = "display: none; width: 0pt;" });
                })
                .Scrollable(scrolling => scrolling.Height(300))
                .Sortable()
                .DataBinding(dataBinding =>
                    {
                        dataBinding.Ajax()
                            .Select("_discountProducts", "BaseDiscount", new { area = "", discountId = 0, type="template", objectId = ViewData["templateId"] })
                            .Update("_saveProductMultiplier", "BaseDiscount", new { area = "", type = "template", objectId = ViewData["templateId"] });
                    })
        %>
    </div>
    <script type="text/javascript">
        function treeView() {
            return $('#tvTemplates').data('tTreeView');
        }

        function onSelectTreeItem(e) {
            var discountGrid = $('#Discounts').data('tGrid');
            var productGrid = $('#Products').data('tGrid');
            var item = $(e.item);
            var tv = treeView();
            var discountId = $.parseJSON(unescape(tv.getItemValue(item)));
            var templateId = $('#templateId').attr('value');
            $('#discountId').attr('value', discountId);
            $('#gridHeader').text(tv.getItemText(item));
            discountGrid.rebind({
                discountId: discountId,
                templateId: templateId
            });
            productGrid.rebind({
                discountId: 0,
                objectId: 0
            });
        }

        function onRowSelected(e) {
            if (e.row.children[0].children.length > 0)
                return;
            var grid = $('#Products').data('tGrid');
            var discountId = e.row.lastChild.innerHTML;

            // update ui text
            $('#discountId').attr('value', discountId);
            $('#gridProductHeader').text(e.row.firstChild.innerHTML);
            // rebind the related grid
            var templateId = $('#templateId').attr('value');
            grid.rebind({
                discountId: discountId,
                objectId: templateId
            });
        }
    </script>