[Solved] htmlfile: Type mismatch when performing showColumn(index) on master table view

[William]

I have radgrid with client-side databinding that I wish to show/hide columns on (via javascript) for real estate reasons.

In general, the showing and hiding of columns works until the grid is rebound while the grid is in it's collapsed (7 columns hidden) view.  After rebinding, when trying to re-show hidden columns, I encounter a javascript error "htmlfile: Type mismatch."  inside a call to _removeRestoreCol(this,a,c) when attempting to c.appendChild(this._hiddenCols[g].col); - (This, of course, is from the stack call from within a ScriptResource file.)

I have found that in some cases after the first rebind, the show/hide functions properly but after subsequent rebinds I encounter the Type mismatch error.

I am seeing this error in IE7 but not in Chrome or IE8.  I am using the 2012 Q3 release.

Any assistance in debugging, suggestions for fixes, or alternate approaches to showing/hiding would be much appreciated.

My grid markup:

<telerik:RadGrid ID="SequenceGrid" runat="server" AllowPaging="True"
    PageSize="10" GridLines="None" AllowFilteringByColumn="false"
    AllowSorting="True" Skin="Sunset" TabIndex="13" AllowMultiRowSelection="true" >
    <PagerStyle AlwaysVisible="true" Position="Bottom" />
    <MasterTableView AutoGenerateColumns="False" DataKeyNames="id, testCaseGroupInd" ClientDataKeyNames="id, TCStatusColor, StatusColor, Tags, testCaseGroupInd, SeqName" Width="100%"> <%--TableLayout="Fixed"--%>
        <Columns>
            <telerik:GridBoundColumn DataField="id" HeaderText="ID" SortExpression="id"
                UniqueName="id">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" Width="50px" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="SeqName" HeaderText="Name" SortExpression="SeqName"
                UniqueName="Sequence">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="TestCaseStatus" HeaderText="Test Case / Group Status" SortExpression="TestCaseStatus"
                UniqueName="test_case_status">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Uploaded" HeaderText="Uploaded"
                 UniqueName="upload_status">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CreatedBy" HeaderText="Created By" SortExpression="CreatedBy"
                UniqueName="created_by">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ModifiedBy" HeaderText="Last Modified By" SortExpression="ModifiedBy"
                UniqueName="last_modified_by">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Project" HeaderText="Project" SortExpression="project"
                UniqueName="project">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn HeaderText="Tags" DataField="id" UniqueName="tag_link" SortExpression="Tags" >
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ExecutionTime" HeaderText="Scheduled Run Time" SortExpression="ExecutionTime"
                UniqueName="execution_time">
                <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" ForeColor="White" />
            </telerik:GridBoundColumn>
            <telerik:GridButtonColumn Display="false" HeaderStyle-Width="20px" UniqueName="AddToGroup" ButtonType="ImageButton" CommandName="AddToGroup"
                Text="Add to Group" ImageUrl="~/Images/AddRecord.png" >
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings AllowColumnsReorder="false" AllowRowsDragDrop="True" >
        <Selecting AllowRowSelect="True" EnableDragToSelectRows="True" />
        <%--<Scrolling AllowScroll="true" EnableVirtualScrollPaging="true" UseStaticHeaders="true" />--%>
        <DataBinding SelectMethod="GetDataAndCount" Location="AutomationDeck.svc"
             SortParameterType="String" FilterParameterType="String" />
        <ClientEvents OnDataBound="SequenceGrid_OnDataBound" OnDataBinding="SequenceGrid_OnDataBinding"
            OnRowContextMenu="RowContextMenu" OnDataBindingFailed="SequenceGrid_OnDataBindingFailed"
            OnCommand="SequenceGrid_Command" OnRowDropping="GroupItemsGrid_onRowDropping" OnRowDragStarted="GroupItemsGrid_OnRowDragStarted" />
    </ClientSettings>
</telerik:RadGrid>

The javascript that performs the showing/hiding is as follows:

function collapse() {

     var SeqGrid = $telerik.findGrid("<%= SequenceGrid.ClientID %>");
     SeqGrid.get_masterTableView().hideColumn(2);
     SeqGrid.get_masterTableView().hideColumn(3);
     SeqGrid.get_masterTableView().hideColumn(4);
     SeqGrid.get_masterTableView().hideColumn(5);
     SeqGrid.get_masterTableView().hideColumn(6);
     SeqGrid.get_masterTableView().hideColumn(7);
     SeqGrid.get_masterTableView().hideColumn(8);
     SeqGrid.get_masterTableView().showColumn(9);
}

 function expand() {

     var SeqGrid = $telerik.findGrid("<%= SequenceGrid.ClientID %>");
     SeqGrid.get_masterTableView().hideColumn(9);
     SeqGrid.get_masterTableView().showColumn(2);
     SeqGrid.get_masterTableView().showColumn(3);
     SeqGrid.get_masterTableView().showColumn(4);
     SeqGrid.get_masterTableView().showColumn(5);
     SeqGrid.get_masterTableView().showColumn(6);
     SeqGrid.get_masterTableView().showColumn(7);
     SeqGrid.get_masterTableView().showColumn(8);
 }

[Martin]

Hello William,

I would suggest that you assemble a small runnable sample that demonstrates the issue you encounter and send all the related code (binding logic, custom command handlers etc.). Please also include step by step instructions about how to replicate the problem. Once I have an example to run and code to inspect, I would be able to provide more to the point resolution.

Regards,
Martin
Telerik

[Umer Hayat]

hello william

did you find solution of it,i am facing the same problem.

Regards
Umer Hayat

[William]

Hi Umer-
Our temporary work-around is to show the columns, rebind, and then immediately return them to their original hidden state.  With our current project deadlines, I've not had time to sanitize an example project (removing proprietary content) to post as Martin requested.

[Martin]

Hello Guys,

Note that with the Q2 2013 SP1 release (2013.2.717) our developers isolated and fixed an issue in IE7 that seems related to the problem this thread was opened for. Since I don't have code to run I can't be 100% sure that this is the same issue. However just for testing purposes I would recommend that you try the new bits.

Here is the full list of the Q2 2013 SP1 release notes.

Regards,
Martin
Telerik