تغییر ظاهر Grid View

[jaykob]

سلام

به چه شکل می شه نما یا همون ظاهر Grid View را تغییر داد که یک جورایی سفارشی کرد به طور مثال خطوط ما بین را خذف یا رنگ های دلخواه گذاشت ؟

Edit Themplats را دیدم داخلش اما متوجه و نحوه کارکردش نشدم .

با تشکر

[Mostafa_Dindar]

سلام ,

شما میتونید به صورت Inline ظاهر GridView رو تغیر بدید , ولی گزینه بهتر استفاده از Theme (http://msdn.microsoft.com/en-us/library/ykzx33wh.aspx)است .

EditItemTemplate میتوانید هرآنچه Html MarkUp را که بخواهید درآن جای دهید , برای آشنایی بیشتر به این لینک (http://quickstarts.asp.net/QuickStartv20/aspnet/doc/ctrlref/data/gridview.aspx)مراجعه کنید .

موفق باشید

[actros]

سلام
به چه شکل می شه نما یا همون ظاهر Grid View را تغییر داد که یک جورایی سفارشی کرد به طور مثال خطوط ما بین را خذف یا رنگ های دلخواه گذاشت ؟
Edit Themplats را دیدم داخلش اما متوجه و نحوه کارکردش نشدم .
با تشکر


اگه بخای یلخی کار کنی می تونی تو قسمت Style ظاهرش رو تغییر بدی.(حالا چه از طریق منوی Properties چه از منوی Edit Columns)
ولی اگه بخای اصل DRY:Don't Reapet Youslef رو اجرا کنی پیشنهاد می کنم استایل دادن GridView (و هر کنترلی دیگری) رو ازطریق Skin اجرا کنی.
با این کار تمام GridView های درون سایت این استایل رو به ارث خواهند برد.
برای این کار کافیه مراحل زیر رو اجرا کنی (من فرض می کنم هیچی از Skin نمی دونی)
1- روی نام سایت در Solution Explorer کلیک راست و Add ASP.NET Folder-->Theme رو انتخاب می کنی.
2- یه فایل Skin درون پوشه Theme1 می ندازی.
3- هرچی داخل فایل Skin بود پاک و کد زیر رو بهش اضافه میکنی.(من اینجا 5 مورد رو تغییر دادم.شما می تونی هر آیتمی که خواستی تغییر بدی)


<asp:GridView runat="server" CssClass="GridView">
<HeaderStyle CssClass="GridViewHeaderStyle" />
<PagerStyle CssClass="GridViewPagerStyle" />
<SortedAscendingHeaderStyle CssClass="GridViewSortedAscendingHeaderStyle" />
<SortedDescendingHeaderStyle CssClass="GridViewSortedDescendingHeaderStyle" />
<AlternatingRowStyle CssClass ="GridViewAlternatingRowStyle" />
</asp:GridView>4- حالا یه فایل CSS داخل تو همین پوشه بنداز و CSS کلاسهائی که تو skin ازش استفاده کردی رو تعریف و مقداردهی کن(می تونی درون CSS اصلی سایت تعریف کنی ولی جدا باشه مدیریتش راحت تره)

*
{
font-family: Verdana, Arial, Sans-Serif;
}

body
{
font-size: 80%;
}

.GridView, .GridView a
{
color: #000;
text-decoration: none;
}

.GridViewHeaderStyle th, .GridViewPagerStyle
{
background-color: #BCD1FE;
background-repeat: no-repeat;
background-position: 0 5px;
text-align: left;
}

.GridViewAlternatingRowStyle
{
background-color: #00CCFF;
}

.GridViewSortedAscendingHeaderStyle, .GridViewSortedDescendingHeaderStyle
{
padding-left: 20px;
}

.GridViewSortedAscendingHeaderStyle
{
background-image: url(Images/SortAscending.png);
}

.GridViewSortedDescendingHeaderStyle
{
background-image: url(Images/SortDescending.png);
}

a.aspNetDisabled
{
color: #CCC;
}

.ErrorMessage
{
color: Red;
font-weight: bold;
}


البته من برای قشنگتر شدن کار دو تا عکس کوچک برای نمایش جهت مرتب سازی (صعودی نزولی) گذاشتم.مشخصه که باید عکسهارو تو سایتت داشته باشی + یه سری خورده کاری دیگه.
5-در آخر باید کد زیر رو به system.Web تو Web.config اضافه کنی:

<system.web>
<pages theme=”Theme1”></pages>
</system.web>حالا اگه نخای یه GridView ئی از این تم استفاده کنه خاصیّت EnableTheming اش رو False می کنی.

Hope it helps

[jaykob]

با تشکر راهنمایی خیلی خوبی بود

یک کم راهنمایی می کنید که به چه شکل می تونم خطوط دور GridView رو بر دارم به طور مثال یک ستون باشه که کنار هر رکورد یک عکس باشه که اون رو بلدم بزارم فقط بلد نیستم کادر دور رو بر دارم یک چیزی توی مایه های اخرین اخبار سایت ها که دیده می شه می خوام بسازم .

ممنون

[actros]

با تشکر راهنمایی خیلی خوبی بود

یک کم راهنمایی می کنید که به چه شکل می تونم خطوط دور GridView رو بر دارم به طور مثال یک ستون باشه که کنار هر رکورد یک عکس باشه که اون رو بلدم بزارم فقط بلد نیستم کادر دور رو بر دارم یک چیزی توی مایه های اخرین اخبار سایت ها که دیده می شه می خوام بسازم .

ممنون

مسلما باید تغییراتی در قسمت Border Style کنترل بوجود بیاری.
برای مثال با اعمال کد زیر در Skin حاشیه دور سر ستون و ستونها برداشته میشه (اگه footer داشته باشی باید برای اون هم CSS Class تعریف کنی)


<asp:GridView runat="server" CssClass="GridView">
<HeaderStyle CssClass="GridViewHeaderStyle" />
<RowStyle CssClass ="GridViewRowStyle" />
<AlternatingRowStyle CssClass ="GridViewRowStyle" />
</asp:GridView>و در CSS:


.GridViewHeaderStyle
{
border-style: hidden;
background-color: #6699FF;
}
.GridViewRowStyle,.GridViewAlternatingRowStyle
{
border-style: hidden ;
}
اگه قبلا این کلاسها رو تعریف کردی خصوصیات border رو بهشون اضافه کن.

به نظر من بهتره از ListView استفاده کنی.خصوصا وقتی که عکس داری.
GridView رکوردها رو خطی نشون میده و وقتی عکس داشته باشی قسمت زیادی از صفحه خالی می مونه.ولی ListView یا حتی DataList کنترل کامل در نحوه چیدمان اجزا در اختیارت می گذارن.

از ListView استفاده کن و اگه میخای همه رکوردات یه استایل داشته باشن همون اول <AlternatingItemTemplate> اش رو حذف کن ( + هر Template ئی که بهش نیاز نداری)

Hope This Helps