在网格中显示图像

时间:2013-04-05 08:35:32

标签: asp.net css telerik-grid

我使用的是RadGrid,在这个网格中有一些带有ImageUrl的按钮。在IE8中我有一些问题正确(水平)显示它们而不是像这样

enter image description here

所以我认为我应该改变按钮的宽度,但后来发生的事情我真的不知道为什么会发生这种情况......我只是将宽度从20px更改为30px

enter image description here

有人可以帮助我如何改变它,这是正常的,就像在其他浏览器中一样(横向两个图像......

我的代码

 <telerik:RadGrid ID="rgGrid" runat="server" DataSourceID="SqlDataSource1" 
          AllowSorting="True" AllowPaging="True" PageSize="20" 
          AllowFilteringByColumn="True" ShowStatusBar="True" Width="100%" 
          CellSpacing="0" GridLines="None" OnItemCommand="rgGrid_ItemCommand">
     <MasterTableView AutoGenerateColumns="False" DataKeyNames="OrganisationId">
         <NoRecordsTemplate>
             Can't find Organisations to display
         </NoRecordsTemplate>
       <Columns>
           <telerik:GridBoundColumn DataField="OrganisationId" DataType="System.Int32" 
               FilterControlAltText="Filter OrganisationId column"
               HeaderText="OrganisationId" ReadOnly="True" SortExpression="OrganisationId" 
               UniqueName="OrganisationId" Visible="false">
           </telerik:GridBoundColumn>
           <telerik:GridBoundColumn DataField="OrganisationName" FilterControlAltText="Filter 
                    OrganisationName column" HeaderText="Name" ItemStyle-Width="60px" 
                    SortExpression="OrganisationName" UniqueName="OrganisationName">
               <ItemStyle Width="60px" />
           </telerik:GridBoundColumn>
           <telerik:GridBoundColumn DataField="CountryName" FilterControlAltText="Filter 
                    CountryName column" HeaderText="Country" ItemStyle-Width="60px" 
                    SortExpression="CountryName" UniqueName="CountryName">
                <ItemStyle Width="60px" />
           </telerik:GridBoundColumn>
           <telerik:GridTemplateColumn UniqueName="DeleteColumn" ItemStyle-Width="20px" 
                    AllowFiltering="false"ItemStyle-HorizontalAlign="Right"  >
              <ItemTemplate>
                 <telerik:RadButton ID="btnEdit" CommandName="Edit" runat="server" 
                      Width="30px" ToolTip="View Details" Height="20px" 
                      CommandArgument='<%# DataBinder.Eval(Container.DataItem, "OrganisationId")%>'>
                      <Image ImageUrl="~/Resources/Images/Grid/edit-app.png" 
                          IsBackgroundImage="true" />
                 </telerik:RadButton>
                 <telerik:RadButton ID="btnDelete" CommandName="Delete" runat="server" 
                      Width="20px" ToolTip="Delete Vacation"
                      Height="20px" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "OrganisationId")%>'>
                 <Image ImageUrl="~/Resources/Images/Grid/delete-app.png" 
                        IsBackgroundImage="true" />
               </telerik:RadButton>
           </ItemTemplate>
       </telerik:GridTemplateColumn>
    </Columns>
  </MasterTableView>
  </telerik:RadGrid>

感谢您的帮助和快速回答!!

1 个答案:

答案 0 :(得分:1)

首先让一个班级成像:

<Image ImageUrl="~/Resources/Images/Grid/edit-app.png" 
IsBackgroundImage="true" CssClass="someclass" />

添加css

.someclass {
   background-repeat: no-repeat;
}

因为它被渲染为背景图像。