توضیحات و دانلود

GridView با اسکرول در ASP.NET
0 0
GridView با اسکرول در ASP.NET

با سلام در بسیاری از موارد, نیاز به GridView است که دارای نوارهای پیمایش بدون صفحه بندی است. هیچ روش پیش فرضی برای اضافه کردن نوارهای پیمایش به GridView وجود ندارد اگر از حد مشخصی بیشتر باشد.

بنابراین، ما باید از خواص HTML و CSS عنصر DIV استفاده کنیم.

در این مقاله،  توضیح خواهیم داد که چگونه GridView  قابل پیمایش کند و هدرها را ثابت کند.

برای شروع با استفاده از یک GridView برای نمایش سوابق جدول مشتری پایگاه NorthWind استفاده کنید.

کد HTML GridView در صفحه aspx در زیر نشان داده شده است

<asp:GridView ID="GridView1" runat="server"

    AutoGenerateColumns = "false" Font-Names = "Arial" ShowHeader = "false"

    Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" >

   <Columns>

    <asp:BoundField ItemStyle-Width = "150px" DataField = "CustomerID" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "City" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "Country" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "PostalCode" />

   </Columns>

</asp:GridView>

همانطور که در بالا ذکر شد، چهار ستون وجود دارد

1. CustomerID

2. City

3. Country

4. PostalCode

آنها را به GridView با استفاده از BoundField محدود می کنیم همچنین متوجه خواهید شد که header را غیرفعال کرده اید، و تنظیم آن برای Property of GridView ShowHeader اشتباه است.

هنگامی که این کار انجام می شود، پروژه را اجرا کنید و در شکل زیر متوجه خواهید شد که GridView تمام آن را در یک صفحه نشان می دهد از آنجا که صفحه بندی فعال نیست

حالا باید یک هدر با استفاده از جدول HTML برای GridView ایجاد کنید؛ زیرا راه آسان این است که یک منبع مشاهده صفحه HTML را کپی کنید و تگ  جدول HTML را کپی کرده تا هدر را با همان شیوه ای که برای GridView استفاده می شود، ایجاد کنید. شکل زیر را ببینید

با استفاده از هدر جدول GridView،  هدر را برای GridView  ایجاد کنید

<div style ="background-image:url(nav_03.gif);background-repeat:repeat-x;

height:30px;width:600px; margin:0;padding:0">

<table cellspacing="0" cellpadding = "0" rules="all" border="1" id="tblHeader"

 style="font-family:Arial;font-size:10pt;width:600px;color:white;

 border-collapse:collapse;height:100%;">

    <tr>

       <td style ="width:150px;text-align:center">CustomerID</td>

       <td style ="width:150px;text-align:center">City</td>

       <td style ="width:150px;text-align:center">Country</td>

       <td style ="width:150px;text-align:center">PostalCode</td>

    </tr>

</table>

</div>

جدول HTML را در div نگهداری کرده و عرض TABLE و DIV را همانند GridView قرار دهید.  متوجه خواهید شد که جدول HTML نیز دارای چهار ستون با عرض مشابه با ستون های GridView محسوب می شود

GridView با Header قرار داده شده  به شرح زیر است

حالا قسمت نهایی که ارتفاع GridView را ثابت می کند و تنظیم یک اسکرول را می دهد. برای این که شما باید GridView را در یک DIV با ارتفاع ثابت و عرضی همانطور که در زیر نشان داده شده است، قرار دهید.

<div style ="height:200px; width:617px; overflow:auto;">

<asp:GridView ID="GridView1" runat="server"

    AutoGenerateColumns = "false" Font-Names = "Arial" ShowHeader = "false"

    Font-Size = "11pt" AlternatingRowStyle-BackColor = "#C2D69B" >

   <Columns>

    <asp:BoundField ItemStyle-Width = "150px" DataField = "CustomerID" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "City" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "Country" />

    <asp:BoundField ItemStyle-Width = "150px" DataField = "PostalCode" />

   </Columns>

</asp:GridView>

</div>

همانطوری که در بالا از GridView متوجه شدید  DIV با ارتفاع 200px و عرض بیشتر از GridView محصور شده است. عرض DIV  به منظور قرار دادن اسکرول عمودی بزرگتر از GridView است. همچنین زمانیکه اسکرول افقی فعال می شود، می تواند کمتر از آن باشد.

 با استفاده از CSS  مقدار overflow را در تگ DIV به مقدار auto تنطیم کنید که نشان می دهد اسکرول در  GridView بیش از 200px ارتفاع دارد.


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :