[Solved] Cannot Ajax Bind MVC Grid in IE7

[Steve]

I cannot seem to Ajax bind an MVC Grid which has been loaded as a partial view using jQuery.load. This works absolutely fine in IE9/IE8 but does not bind in IE7.

My JavaScript calls my action method to which returns a partial view containing my Telerik grid:

<%= Html.Telerik().Grid<ProfileMetricUi>()
                .Name(Model.NodeUniqueIdentifier)
                //.ToolBar(commands => { commands.SubmitChanges(); })
                .DataBinding(db => db.Ajax()
                            .Select("_GetPractices", "Profiling", new { selection = ViewData["selection"], AccountId = ((SelectedTreeNode)ViewData["node"]).AccountId, Value = ((SelectedTreeNode)ViewData["node"]).Value })
                            .Update("_SaveChanges", "Profiling"))
                .DataKeys(key => key.Add(k => k.Id))
                .Scrollable()
                .Editable(edit => edit.Mode(GridEditMode.InCell))
                .ClientEvents(events => events.OnDataBinding("Grid_onDataBinding").OnError("Grid_onError").OnRowDataBound("rowDataBound"))
                .Sortable(order => order.OrderBy(f =>
                    {
                        if (Model.SortDescending)
                        {
                            f.Add(fld => fld.Value).Descending();
                        }
                        else
                        {
                            f.Add(fld => fld.Value).Ascending();
                        }
                    }))
                .Columns(column =>
                    {
                        column.Bound(col => col.EntityName)
                            .Sortable(true)
                            .HeaderHtmlAttributes(new { Class = "td-entity" })
                            .HtmlAttributes(new { Class = "td-entity" })
                            .ClientTemplate("<div class='practiceDetail' onClick='javascript: Clicked(this);'><span class='<#= PracticeStyle #>' name='practiceName'><#= EntityName #></span><div class='<#= StyleClass #>'><span style='width:<#= Percentage #>%'></span></div></div>")
                            .ReadOnly(true);
                        column.Bound(col => col.Value)
                            .HeaderHtmlAttributes(new { Class = "td-entity-a" })
                            .HtmlAttributes(new { Class = "td-entity-a" })
                            //.ClientTemplate("<input type='text' value='<#= Value #>' />")
                            .ReadOnly(true);
                        column.Bound(col => col.Profiled)
                            .HeaderHtmlAttributes(new { Class = "td-entity-a select" })
                            .HtmlAttributes(new { Class = "td-entity-a" })
                            //.Format("<input type='radio' />")
                            .Encoded(false)
                            .ClientTemplate("<input type='checkbox' <#= Profiled ? checked='checked' : '' #> />")
                            .Sortable(false)
                            .ReadOnly(false);

                    })

             %>

This successfully returns and then binds on the “_GetPractices” action method. However, in IE7 while the partial view returns ok and the grid displays it shows “No Records” and does not bind.

Following is Javascript to load view:

$('#listMetrics').load('<%= Url.Action("CheckSelectedNode", "Profiling") %>', { Value: nodeValue,
                AccountID: cmbselectedAccountId,
                AccountName: cmbselectedAccountText
            }, FixGrid);

Any ideas?

[Steve]

Ok, I have gotten to the bottom of the problem.

My requirement was that I needed to load one or more grids for display. My partial view for the grid included a html list item (LI) which I appended to a UL in the main page as part of my Ajax Get using jQuery Append. As I mentioned, this works fine in IE8 and 9 but fails in IE7. After much debugging, it turns out that IE7 does not like the use of the jQuery append using list items. If I changed it to a DIV then binding went ahead without a problem.

I really wanted to use list items however (for various reasons I wont go into) and got around the problem by rmeoving the LI markup from the partial view and creating it in JavaScript before appending the returned partial view. Now everything work as expected in IE7, 8 and 9.

You have just got to love IE. That is two days of my life I wont be getting back.

Javascript as follows (callback function on success of jQuery Get):

//append grid
var ul = document.getElementById("listMetrics");
var li = document.createElement("li");

//append LI to UL
ul.appendChild(li);

//append returned partial view to LI
$(li).html(data);