چطور برای ردیف‌های یک GridView در ASP.net حالت Hover بگذاریم

GridView ابزار قدرتمدنی برای نمایش حجم زیادی از اطلاعات است که بی تردید در بسیاری از موارد کارگشااست، شرکتهای مختلف GridViewهای مختلفی را با قابلیتهای متفاوتی برای استفاده آماده کرده‌اند که از آن میان می‌توان به GridView فوق‌العاده ی شرکت XCEED که رابط WPF دارد اشاره کرد. مایکرسافت هم بطور پیش فرض در دات نت یک GridView قرار داده که امکانات خوبی دارد و نقطه ضعف این ابزار صرفا مربوط به ابزارها و قابلیتهای کلاینتی است.

برای مثال اگر شما بخواهید وقتی کاربر ماوس را روی ردیف‌های این جدول ببرد، رنگ پس‌رمینه تغییر کند، بی شک GridView دات نت این قابلیت را نخواهد داشت. اما نکته قابل ذکر آن است که بخاطر eventهای خوبی که این لیست دارد، براحتی می‌توان قابلیت‌های جدید و منحصربه فردی را به آن اضافه کرد. امروز نحوه ایجاد Hover برای Row های یک GridView را بررسی خواهیم کرد.

نمونه ای از یک GridView در Asp که خاصیت Hover به آن اضافه شده است

نمونه ای از یک GridView در Asp که خاصیت Hover به آن اضافه شده است

راه‌های زیاد و متفاوتی برای این کار وجود دارد که با یک جستجوی ساده در Google قابل مشاهده و دسترسی است. اما مزیت راه اشاره شده در اینجا آن است که از مشخصات خود RowStyle و AlternatingRowStyle برای تغییر استفاده می‌کند و برای تغییر پس زمینه ، شما لازم نیست که در Mouse Over کلیه مشخصات دلخواه را تنظیم و مقادیر تنظیم شده را در Mouse Out دوباره به حالت قبل بازگردانید .

برای این کار در Event ی با نام OnRowCreated ( زمانی که ردیف ایجاد می‌شود ) قطعه کد زیر را بنویسید

protected void grdList_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add(“onmouseover”, “this.originalstyle=this.style.backgroundColor;this.style.backgroundColor=’#FFFFbe'”);
e.Row.Attributes.Add(“onmouseout”, “this.style.backgroundColor=this.originalstyle;”); 
}
}

و در UI صفحه ، جایی که GridView را تعریف کردید، این event را در لیست فراخوانی‌های GridView اضافه کنید ، یعنی باید داشته باشید : OnRowCreated=grdList_RowCreated
 در نهایت با انجام کارهای بالا، کار تمام است. همانطور که در قطعه کد بالا ملاحظه می‌کنید از یک تکه کد جاوا اسکریپت برای اضافه کردن خاصیت Hover به GridView استفاده شده و همانطور که ملاحظه می‌کنید، هنگامیکه ماوس از روی ردیف کنار می‌رود، تمام خاصیت‌های قبلی ردیف ( چه در RowStyle و چه در AlternateRowStyle ) به جای خودشان بازگردانده می‌شوند.

تمرین : ‌برای بهینه کردن قطعه کد بالا، آن را طوری تغییر دهید که بجای گرفتن یک رنگ در کد-بیهاند، یک Class  را از CSS بخواند.

10 Responses to چطور برای ردیف‌های یک GridView در ASP.net حالت Hover بگذاریم

  1. Masoud says:

    به این میگن یه Hover با طعم قرمه سبزی :دی

    راستی از رنگ بندی Gridview خیلی خوشم میاد.کلا خودشم قشنگ شده.تبریک !!!

    Good job!

  2. مسعود says:

    سلام

    ممنون از مطلبی که نوشتی
    من یه سوال در مورد گرید ویو دارم. می خواستم بدونم که چطور و با چه کدی می تونیم دکمه یUpdate رو customize کنم ؟
    چون من اطلاعات خروجی از یک FreeTextBox رو تو گرید ویو نشون دادم و برای ویرایششون لازمه که دوباره توی FreeTextBox نشون داده بشن.
    ممنون میشم اگه کدی برای مثال داشته باشید.

  3. مسعود says:

    منظورم از دکمه ی update همون Edit هستش راستی

  4. Masoud says:

    این مسعود دومیه من نیستم ها !

    دی !

  5. ابراهیم says:

    سلام

    خسته نباشید

    من از این تکه برنامه شما در صفحه خودم استفاده کردم. اما وقتی صفحه Run می شه، به کد جاوا ایراد می گیره. اما من دقیقا از کد شما استفاده کردم.

    ممنون می شم اگه راهنمایی کنید

    با تشکر

  6. لطف کنید و متن پیغام خطا رو اینجا بزارید تا بررسی کنم که مشکل از کجاست.
    در حالت عادی مشکلی نباید پیش بیاد

  7. حسام says:

    علت دادن خطا اینست :
    باید در موقع کپی کردن ، دابل کوتیشن ها رو اصلاح کنید.
    مثلا : “onmouseover” باید بشه : “onmouseover”

    موفق باشید

  8. Pingback: چگونه برای ردیف‌های یک GridView در ASP.net حالت Hover بگذاریم » کاوشگر

  9. محسن says:

    سلام و ممنون از کد خوبتون
    سینگل کوتیشن هم باید عوض بشه تا کد درست اجرا بشه

  10. hedayati says:

    سلام
    من دانشجوی it ترم 4 هستم و باید تا اخر این هفته پروزه ام رو تحویل بدم و نیاز به grid view دارم که عکس اون رو در وب سایت شما دیدم چطور می تونم این grid view رو بسازم که در کنار هر ردیف یک check box دارد و هم لینک select و در پایین آن دکمه حذف و ….
    درست مثل عکسی که در مطلب”چطور برای ردیف‌های یک GridView در ASP.net حالت Hover بگذاریم” گذاشتید

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: