1. <asp:GridView ID="gvCustomres" runat="server" 2. DataSourceID="customresDataSource" 3. AutoGenerateColumns="False" 4. GridLines="None" 5. AllowPaging="true" 6. CssClass="mGrid" 7. PagerStyle-CssClass="pgr" 8. AlternatingRowStyle-CssClass="alt"> 9. <Columns> 10.

<asp:BoundField DataField="CompanyName" HeaderText="Company Name" /> 11. <asp:BoundField DataField="ContactName" HeaderText="Contact Name" /> 12. <asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" /> 13. <asp:BoundField DataField="Address" HeaderText="Address" /> 14. <asp:BoundField DataField="City" HeaderText="City" /> 15. <asp:BoundField DataField="Country" HeaderText="Country" /> 16. </Columns> 17. </asp:GridView> 18. <asp:XmlDataSource ID="customresDataSource" runat="server" DataFile="~/App_Data/data.xml"></as p:XmlDataSource>

The CSS to provide the custom look is very short and you can change the view and create new looks really easy.
view plaincopy to clipboardprint?

1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28.

.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; } .mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #717171; } .mGrid th { padding: 4px 2px; color: #fff; background: #424242 url(grd_head.png) repeat-x top; border-left: solid 1px #525252; font-size: 0.9em; } .mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; } .mGrid .pgr { background: #424242 url(grd_pgr.png) repeat-x top; } .mGrid .pgr table { margin: 5px 0; } .mGrid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff;

29. line-height: 12px; 30. } 31. .mGrid .pgr a { color: #666; text-decoration: none; } 32. .mGrid .pgr a:hover { color: #000; text-decoration: none; }