[Solved] Rendering issue after programmatic row expansion

[Noah]

Hi all,

I am having an odd issue with my telerik grid not rendering properly.

Here's the set up.

I have a tabstrip control with two tabs. Within each tab I have a telerik grid configured for Ajax binding. One grid contains paged records and is configured with a three level master detail hierarchy, i.e. a grandparent/parent/child relationship. Each record in this grid can be in one of two states, either “Enabled” or “Disabled,” and this grid allows the users to put a given record into one of these states via a custom command column.

The second grid in the other tab is populated based on the actions taken by the user while they are interacting with the grid from the first tab mentioned above. So, if the user “disables” three child level rows in the first grid, when they switch to the second tab, that grid will contain those rows they just disabled. The idea here is to give the user a way of identifying all of the disabled rows easily, especially ones that may be at the bottom of a hierarchy.

For each row in the second grid I have a custom command that, when clicked, will cause the tabstrip control to switch to the first tab and expand the appropriate rows in the grid to reveal the record the user is interested in.

My problem is that, until this morning, everything worked just fine. However now for no apparent reason the grid on the first tab does not render properly in IE after the operation described above.

This application will only be used with Firefox and IE 8/9.

Here is the relevant source code, as well as some screenshots showing the first grid after the programmatic tab switching described above, both in Firefox and IE. It seems like a css issue, but I have no idea on what to do to fix it.

Forgive the lengthy post but I wanted to be as specific as possible. Any help would be greatly appreciated! Thanks!

 

IE version = 9.0.8112.16421

Telerik version = 2011.1.315.235


This is the javascript that does the tab switching

$("a.context-command").unbind('click').click(function () {
            var item = getDataItem($(this));

            item.URL = '<%: Url.Action("LoadPageValues", "Home") %>';
            ajaxCall(function (json) {
                $("#selectedID").val(json.selectedID);
                $("#selectedParentID").val(json.selectedParentID);
                $("#selectedGrandParentID").val(json.selectedGrandParentID);
                var tabStrip = $("#FacLocTabStrip").data("tTabStrip");
                tabStrip.select($(".t-item", tabStrip.element)[0]);
                var grid = $("#all-locations").data('tGrid');
                grid.pageTo(json.pageNum);

            }, item);
        })

Here's the Javascript that does the row expansion

function onRowDataBound(e) {

        var grid = $(this).data('tGrid');

        var row = e.row;

        var dataItem = grid.dataItem(row);
        var selectedID = $("#selectedID").val();
        var selectedParentID = $("#selectedParentID").val();
        var selectedGrandParentID = $("#selectedGrandParentID").val();

        // only expand the appropriate rows based on where
        // the user is within the hierarchy
        if (dataItem.ID == selectedGrandParentID) {
            grid.expandRow(row);
            $("#selectedGrandParentID").attr('value', '');
        } else if (dataItem.ID == selectedParentID) {
            grid.expandRow(row);
            $("#selectedParentID").attr('value', '');
        } else if (dataItem.ID == selectedID) {
            row = $(row);
            row.addClass("t-state-selected");
            $("#selectedID").attr('value', '');
        }
    }

And here is my script registar line within the head section of my masterpage.

<%: Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.webblue.css").Combined(true).Compress(true))%>