مقدمه
کنترل DataGrid پیچیده ترین کنترلی است که در NET Framework. وجود دارد. با استفاده از این کنترل امکان فرمت دهی و نمایش، مرتبسازی و صفحه بندی رکوردهای جداول بانک اطلاعاتی فراهم میشود. در اینجا میخواهیم با استفاده از قابلیتهای این کنترل روشی را برای نشان دادن تصاویر در آن بررسی کنیم. هر کدام از این تصاویر قرار است در رکورد مربوط به خود در کنترل DataGrid نمایش داده شوند. هر رکورد دادههای دیگری را نیز شامل میشود که همه آنها در جدول products واقع در پایگاه داده products.mdb قرار دارند. هر رکورد شامل ستونی به نام ImageName (از نوع داده Text) میباشد که نام تصویر مربوط به رکورد را شامل میشود.
تعریف ستون برای کنترل DataGrid
وقتی که یک منبع داده مانند یک DataSet را به کنترل DataGrid مقید (Bind) میکنیم، خود کنترل همه کارها را انجام میدهد و همه رکوردها را به طور خودکار نمایش میدهد. ولی اگر بخواهیم ستونهای کنترل DataGrid را تحت کنترل خود درآورده و فقط ستونهای دلخواه را نمایش دهیم باید خودمان برای کنترل DataGrid ستون تعریف کنیم. قبل از اینکه بتوانیم ستونی را برای DataGrid تعریف کنیم، لازم است که خصوصیت AutoGenerateColumns آنرا برابر False قرار دهیم. پس از انجام این کار میتوانیم شروع به تعریف ستون برای کنترل DataGrid نماییم. کنترل DataGrid پنج نوع ستون را میشناسد که عبارتند از:
• BoundColumn: نوع پیش فرض ستونها که رکوردها را نمایش میدهد.
• HyperLinkColumn: که رکوردها را به صورت یک Hyperlink نمایش میدهد.
• TemplateColumn: که رکوردها را با استفاده از یک الگوی مشخص نمایش میدهد.
• ButtonColumn: که کنترلهایی از نوع Button را نمایش میدهد.
• EditCommandButton: که فرامین ویرایش همانند Edit، Update و Cancel را نمایش میهد.
در نمونه کدی که همراه مقاله میتوانید آنرا دریافت کنید، کنترل DataGrid را به صورت زیر تعریف کرده ایم :
<asp:Datagrid id=”dg” runat=”server” AutoGenerateColumns=”False” BorderColor=”Black” Font-Size=”10″ Font-Name=”Arial” BackColor=”#C6C3FF” Headerstyle-Font-Size=”12″ Headerstyle-Font-Bold=”True” Headerstyle-Font-Name=”Arial” Headerstyle-Forecolor=”#0F0F0F” Headerstyle-BackColor=”#8482C6″ cellspacing=”0″ cellpadding=”0″ GridLines=”Both”>
<columns>
<asp:BoundColumn HeaderStyle-HorizontalAlign=”Center” DataField=”ProdName” HeaderText=”ProdName”></asp:BoundColumn>
<asp:TemplateColumn HeaderStyle-HorizontalAlign=”Center”>
<HeaderTemplate>
Images
</HeaderTemplate>
<ItemTemplate>
<div align=”center”>
<img src=’/prodimages/<%# Container.DataItem(“ImageName”) %>’ border=”0″ />
</div>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField=”Comments” HeaderText=”Comments”></asp:BoundColumn>
</columns>
</asp:Datagrid>
در کدهای مربوط به کنترل DataGrid سه ستون برای آن تعریف شده است. ستون اول از نوع BoundColumn، ستون دوم از نوع TemplateColumn و ستون سوم هم دوباره از نوع BoundColumn تعریف شدهاند. در ستونهایی که از نوع BoundColumn میباشند، انتساب نام فیلد جدول بانک اطلاعاتی به خصوصیت DataField ستون، برای نمایش دادن دادههای آن فیلد در ستون DataGrid کافی میباشد. کدهای زیر مربوط به تعریف ستون اول این DataGrid میباشد.
<asp:BoundColumn HeaderStyle-HorizontalAlign=”Center” DataField=”ProdName” HeaderText=”ProdName”></asp:BoundColumn>
تعریف ستون TemplateColumn برای کنترل DataGrid
وقتی که میخواهیم اختیارات بیشتری را در تعیین فرمت یک ستون داشته باشیم ستونی از نوع TemplateColumn را به تعریف میکنیم. ستونی که از نوع TemplateColumn برای کنترل DataGrid تعریف میشود، میتواند الگوهای زیر را داشته باشد:
• HeaderTemplate: تعیین کنندة فرمت متنی است که در بالای ستون نمایش داده میشود.
• ItemTemplate: تعیین کنندة فرمت آیتمهای اصلی ستون میباشد.
• EditItemTemplate: تعیین کنندة فرمت آیتمی است که به قصد ویرایش انتخاب شده است.
• FooterTemplate: تعیین کنندة فرمت آیتمی است که پایین ستون نمایش داده میشود.
در کد مربوط به تعریف کنترل DataGrid از دو الگوی HeaderTemplate و ItemTemplate استفاده شده است. در داخل HeaderTemplate کلمه Images نوشته شده است که موقع اجرا در بالای ستون نمایش داده میشود. کار اصلی برای نمایش تصاویر در داخل الگوی ItemTemplate انجام شده است. در اینجا با کدهای HTMLی که در زیر دوباره آنها را مشاهده میکنید توانستهایم تصاویر مربوط به رکوردها را نمایش دهیم.
<div align=”center”>
<img src=’/prodimages/<%# Container.DataItem(“ImageName”) %>’ border=”0″ />
</div>
در اینجا با استفاده از تگ <img> تصاویر را از داخل پوشه prodimages نمایش دادهایم. نام تصاویر با استفاده از عبارت <%# Container.DataItem(“ImageName”) %> تعیین میشود که این عبارت مقدار ستون ImageName برای هر رکورد را باز میگرداند.
تمام کد مربوط به صفحه و همچنین پایگاه داده products.mdb را میتوانید در بالای همین صفحه دریافت نمایید
دیدگاه خود را بیان کنید.
باید وارد سایت شده باشید برای دیدگاه دادن