Asp.NET GridView CSS Template Giydirelim

Yazı hakkında dikkatinize.
İçerikten faydalanmadan önce buradaki uyarıma dikkat etmenizi rica ediyorum.Bu sitedeki içeriklerin büyük çoğunluğu özgün olarak hazırlanmışken, bir kısmıda belirli kaynaklar yardımıyla oluşturulmuştur.Bunlara rağmen kaynağı belli olmayan ama insanların işine yarayan bazı içerikleride haliyle bu sitede paylaşılmakta ve binlerce kişi bu paylaşım sayesinde bu içerikten faydalanmaktadır.

Özellikle bu yazımızda alıntı ve çalıntı ithamları çok olmakta ve bu bir yerden sonra duyarlılık haddinizi aştığınızı göstermektedir.Bu yazıyla alakalı yorumlara aşağıda bakabilirsin.Tüm yorumlar aşağıda yayınlanmıştır.”yuh yani” isimli bir ergen çocuğa yaptığım açıklamayı hakkımda benzer ithamlarda düşünenler için okumalarını söylüyorum ve hakkınızda boş adam değil, adam olmanız için dua ediyorum.

Asp.NET’in çok kullanışlı olan veri kontrollerinden GridView’in var olan hazır tasarımları bazen yaptığımız çalışmalarda göze hitap etmeyebiliyor.Aşağıda benim, genellikle kullandığım bir GridView’e göre tasarlanmış CSS mevcut.Bu CSS ile GridView’i güzelleştirebilirsiniz.

.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;
    line-height: 12px;
 }
.mGrid .pgr a { color: #666; text-decoration: none; }
.mGrid .pgr a:hover { color: #000; text-decoration: none; }

Yukarıdaki CSS’i GridView nesnemize yedirmek için CssClass Attribute’unu kullanmamız yeterli olacaktır.

<asp:GridView ID="gvCustomres" runat="server"
    DataSourceID="customresDataSource"
    AutoGenerateColumns="False"
    GridLines="None"
    AllowPaging="true"
    CssClass="mGrid"
    PagerStyle-CssClass="pgr"
    AlternatingRowStyle-CssClass="alt">
    <Columns>
        <asp:BoundField DataField="CompanyName" HeaderText="Company Name" />
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
        <asp:BoundField DataField="ContactTitle" HeaderText="Contact Title" />
        <asp:BoundField DataField="Address" HeaderText="Address" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
<asp:XmlDataSource ID="customresDataSource" runat="server" DataFile="~/App_Data/data.xml"></asp:XmlDataSource>

Son olarak GridView aşağıdaki gibi gözükmektedir.
Umarım beğenmişsinizdir 🙂

İyi çalışmalar