Telerik RadGrid design corruption

Question

I have a RadGrid in an aspx file and when I bind data it seems like below instead of column based structure.

Build Project Result:

Edit Sil StackOverFlow Example Sir Alex Ferguson - 1 Edit Delete StackOverFlow Example Sir Alex Ferguson - 2 Edit Delete StackOverFlow Example Sir Alex Ferguson - 3 Edit Delete StackOverFlow Example Sir Alex Ferguson - 4 Edit Delete StackOverFlow Example Sir Alex Ferguson - 5 Edit Delete StackOverFlow Example Sir Alex Ferguson - 6 Edit Delete StackOverFlow Example Sir Alex Ferguson - 7 Edit Delete StackOverFlow Example Sir Alex Ferguson - 8 Edit Delete StackOverFlow Example Sir Alex Ferguson - 9 Edit Delete

Code

<telerik:RadGrid ID="radUsers" ShowStatusBar="true" AllowPaging="True" HeaderStyle-Height="20px"
CommandItemStyle-Height="20px" Culture="en-En" runat="server" AllowSorting="True"
GridLines="None" Width="100%" PageSize="40" CellSpacing="0" Skin="Hay" OnExcelMLExportRowCreated="radUsers_ExcelMLExportRowCreated"
OnExcelMLExportStylesCreated="radUsers_ExcelMLExportStylesCreated" OnItemDataBound="radUsers_ItemDataBound"
OnNeedDataSource="radUsers_NeedDataSource"
OnPageIndexChanged="radUsers_PageIndexChanged" MasterTableView-SortExpressions="true">
    <ExportSettings IgnorePaging="true" HideStructureColumns="true" ExportOnlyData="true"
    FileName="Users" OpenInNewWindow="true" Pdf-AllowPrinting="True">
        <Excel Format="ExcelML" />
    </ExportSettings>
    <ClientSettings AllowGroupExpandCollapse="True" ReorderColumnsOnClient="True" AllowDragToGroup="True" AllowColumnsReorder="True">
        <Resizing AllowRowResize="false" EnableRealTimeResize="True" ResizeGridOnColumnResize="True"
        AllowColumnResize="true"></Resizing>
        <Scrolling AllowScroll="False" UseStaticHeaders="True" />
        <Selecting AllowRowSelect="True" />
    </ClientSettings>
    <MasterTableView Width="80%" DataKeyNames="ID" ClientDataKeyNames="ID" AutoGenerateColumns="False"
    CommandItemDisplay="Top" GroupLoadMode="Client">
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Groupable="true">
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Groupable="true">
        </ExpandCollapseColumn>

        <Columns>
            <telerik:GridBoundColumn DataField="ACode" FilterControlAltText="Filter ACode column"
                HeaderText="Av. Code" SortExpression="ACode" UniqueName="ACode"
                ItemStyle-Width="80px" HeaderStyle-Width="80px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="UserType" FilterControlAltText="Filter UserType column"
                HeaderText="User Type" SortExpression="UserType" UniqueName="UserType"
                ItemStyle-Width="140px" HeaderStyle-Width="140px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Company" FilterControlAltText="Filter Company column"
                HeaderText="Company" SortExpression="Company" UniqueName="Company"
                ItemStyle-Width="210px" HeaderStyle-Width="210px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="UserName" FilterControlAltText="Filter UserName column"
                HeaderText="User Name" SortExpression="UserName" UniqueName="UserName"
                ItemStyle-Width="140px" HeaderStyle-Width="140px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="NameSurname" FilterControlAltText="Filter NameSurname column"
                HeaderText="Name Surname" SortExpression="NameSurname" UniqueName="NameSurname"
                ItemStyle-Width="140px" HeaderStyle-Width="140px">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="Status" FilterControlAltText="Filter Durum column" HeaderText="Status" SortExpression="Status" UniqueName="Status" ItemStyle-Width="110px" HeaderStyle-Width="110px">
            </telerik:GridBoundColumn>
            <telerik:GridTemplateColumn ItemStyle-Width="70px" HeaderStyle-Width="70px" UniqueName="Edit" HeaderText="">
                <ItemTemplate>
                    <asp:Literal ID="ltrEdit" runat="server"></asp:Literal>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridTemplateColumn ItemStyle-Width="40px" HeaderStyle-Width="40px" UniqueName="Delete" HeaderText="" Visible="true">
                <ItemTemplate>
                    <asp:Literal ID="ltrDelete" runat="server"></asp:Literal>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
        <SortExpressions>
            <telerik:GridSortExpression FieldName="NameSurname" SortOrder="None" />
        </SortExpressions>
        <EditFormSettings>
            <EditColumn FilterControlAltText="Filter EditCommandColumn column">
            </EditColumn>
        </EditFormSettings>
        <CommandItemSettings ShowExportToExcelButton="true" ShowAddNewRecordButton="false" />
    </MasterTableView>
    <FilterMenu EnableImageSprites="False">
    </FilterMenu>
    <PagerStyle Mode="NumericPages"></PagerStyle>
</telerik:RadGrid>
<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true" Skin="Hay">
    <Windows>
        <telerik:RadWindow ID="UserListDialog" runat="server" Title="User Info" Height="510px"
        Width="650px"  ReloadOnShow="true" ShowContentDuringLoad="false"
        Modal="true" KeepInScreenBounds="true" />
    </Windows>
</telerik:RadWindowManager>

Answer 1

Some Telerik users have found that setting CommandItemdisplay in the grid's definition will cause the skin to not render properly. This will display the grid as just text like you are seeing. Please try changing the setting for this property.

Also double check your path to the "Hay" skin files do correctly resolve to the correct images and CSS files.

Check this thread for more info.