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

[Solved] Rebing problem in FF

7 Answers 167 Views

Grid

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

This question is locked. New answers and comments are not allowed.

luke asked on 24 May 2010, 01:16 PM

ffrebind.jpg

Hi,

I'm using tree and grid in one view. After clicking tree node I'm launching rebind via Ajax on grid. It works in IE, but not in Opera and FF.

In function:

    
            function onTreeSelect(e) {
 
                    var tv = $("#category-tree").data("tTreeView");
 
                    var item = $(e.item);
 
                    var categoryId = tv.getItemValue(item);
 
                    var ordersGrid = $('#gridProducts').data('tGrid');
 
                    // rebind the related grid
 
                    ordersGrid.rebind({
 
                        categoryId: categoryId
 
                    });
 
                }

$('#gridProducts').data('tGrid') is null. See screen.

What can I do to fix this?

7 Answers, 1 is accepted

answered on 25 May 2010, 11:47 AM

Hi Atanas,

Thanks for replay. Don't know if I understand you correctly, but tree and grid are not part of partial views.

At start grid is empty, becasue nothing is selected in tree. But when I change initial grid request to recive some data still in FF it doesn't load. I can see in firebug error:

uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMViewCSS.getComputedStyle]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://localhost:50125/Scripts/jQuery/jQuery-1.4.2.min.js :: anonymous :: line 117" data: no]

This error also appears in other grids in FF and opera.

Page code:

    
            <asp:content contentplaceholderid="HeadContent" runat="server">
 
            <script type="text/javascript">
 
                function onTreeSelect(e) {
 
                    var tv = $("#category-tree").data("tTreeView");
 
                    var item = $(e.item);
 
                    var categoryId = tv.getItemValue(item);
 
                    var ordersGrid = $('#gridProducts').data('tGrid');
 
                    // rebind the related grid
 
                    ordersGrid.rebind({
 
                        categoryId: categoryId
 
                    });
 
                }
 
                function onDataBinding(e) {
 
                    $('#loadingMask').block({
 
                    message: '<h3><img src="<%= Url.Content("~/Content/img/ajax-loader.gif") %>" />Loading... Please wait... </h3>'
 
                    });
 
                }
 
                function onDataBound(e) {
 
                    $('#loadingMask').unblock();
 
                }
 
            </script>
 
            </asp:content>
 
            <asp:content contentplaceholderid="MainContent" runat="server">
 
               <table>
 
                <tr>
 
                <td style="width:250px">
 
                Category tree
 
                <% 
 
                    Html.Telerik().TreeView()
 
                        .Name("category-tree")
 
                        .DataBinding(binding => binding
 
                                                    .Ajax()
 
                                                    .Enabled(true)
 
                                                    .SelectProductCategoryTree(Model.ProductClassificationSchemeId)
 
                                                    )
 
                        .ClientEvents(events => events
 
                                    .OnSelect("onTreeSelect")
 
                        )
 
                        .DragAndDrop(false)
 
                        .ShowLines(true)
 
                        .Render();
 
                %>
 
            </td>
 
             <td style="width:650px">
 
             <div id="loadingMask">
 
                Products for selected category
 
            <% Html.Telerik().Grid<ProductModelView>()
 
                       .Name("gridProducts")
 
                       .ToolBar(commands => commands
 
                            .Custom()
 
                            .HtmlAttributes(new { id = "addProduct" })
 
                            .Text("Add product")
 
                            .Route(Routes.Default, new { action = "ProductCreatePanel" })
 
                       )
 
                       .ClientEvents(events => events
 
                            .OnDataBinding("onDataBinding")
 
                            .OnLoad("onDataBinding")
 
                            .OnDataBound("onDataBound")
 
                            .OnError("onDataBound")
 
                        )
 
                       .DataKeys(keys => keys.Add(c => c.BaseProductId))
 
                       .Columns(columns =>
 
                                    {
 
                                        columns.Bound(o => o.BaseProductId).Title("Id").Filterable(false).Width(45);
 
                                        columns.Bound(c => c.ThumbImageFileName)
 
                                            .ClientTemplate("<img src='"
 
                                                + Url.Content("~/Images/")
 
                                                + "<#= ThumbImageFileName #>' />")
 
                                            .Title("Thumb");
 
                                        columns.Bound(o => o.TranslatedName).Width("35%").Title("Name");
 
                                        columns.Bound(o => o.BrandName).Title("Brand");
 
                                        columns.Bound(o => o.SupplierName).Title("Supplier");
 
                                        columns.Bound(o => o.ThumbImageFileName).Title("Thumb name");
 
                                        columns.Bound(c => c.BaseProductId).Width(50)
 
                                            .ClientTemplate(Html.EditProductCommandClientTemplate(Url, "BaseProductId", "Edit"))
 
                                            .HeaderHtmlAttributes(new { style = "visibility:hidden;" });
 
                                    })
 
                       .DataBinding(dataBinding =>
 
                                    dataBinding.Ajax()
 
                                        .Select("AjaxOverviewByCategory", "Product", new { categoryId = 0 })
 
                       )
 
                       .Pageable(page => page.PageSize(100))
 
                       .Sortable()
 
                       .Scrollable(scrolling => scrolling.Height(600))
 
                       .Groupable()
 
                       .Filterable()
 
                       .Render();
 
            %>
 
            </div>
 
             </td>
 
            </tr>
 
            </table>

answered on 26 May 2010, 11:39 AM

Hello luke,

I've managed to successfully use the blockUI plugin like this:
<%= Html.Telerik().Grid<Order>()
     .Name("Grid")
     .ClientEvents(events => events.OnDataBinding("onbinding").OnDataBound("onbound"))
%>
    <script type="text/javascript">

    function onbinding() {
        $(this).block();
    }

    function onbound() {
        $(this).unblock();
    }

    </script>

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.