The Telerik RadGrid's height doesn't grow with the MasterTableView

Question

I've got a RadGrid with a fixed height, which is the same that ten rows ones (360px). But in some cases, the texts shown in the rows have to wrap because of the small cell sizes. Then, the master table view grows correctly, but the grid doesn't. The grid border is drawn over the rows, and it does a really anoying visual effect.

I've tried to fix it via CSS, but no luck. I don't know if there is a RadGrid property that may help me; I tried many, but any of them worked.

This is the code I wrote:

<telerik:RadDock ID="MyRadDock" runat="server" Style="width: auto; height: auto;">
    <ContentTemplate>
        <div>
            <telerik:RadGrid ID="MyRadGrid" runat="server" Height="360px" Style="width: auto;">
                <MasterTableView Width="100%" PageSize="10">
                    <Columns>
                        <!-- ... -->
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
    </ContentTemplate>
</telerik:RadDock>

A pair of screenshots to understand the problem: Before the DataBind() and After the DataBind().

Answer 1

RadGrid height can definitely be tricky. In this case I think you can just remove the Height attribute and it will work as you're expecting.

<telerik:RadDock ID="MyRadDock" runat="server" Style="width: auto; height: auto;">
<ContentTemplate>
    <div>
        <telerik:RadGrid ID="MyRadGrid" runat="server" Style="width: auto;">
            <MasterTableView Width="100%" PageSize="10">
                <Columns>
                    <!-- ... -->
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
    </div>
</ContentTemplate>