استفاده از پلاگین جی کوئری در Scrollable GridView با سرصفحه های ثابت در ASP.Net UpdatePanel
نسخه 2.0 پلاگین در دسترس است. مسائل ثابت :
1. تنظیم ستون های هدر برای GridView که دارای تعداد بیشتری ستون هستند.
2. تنظیم ستون های هدر هنگام استفاده از CSS خارجی
دانلود ScrollableGridView_2.0 پلاگین جی کوئری
در یکی از مقالات قبلی توضیح دادیم چگونه از استفاده از پلاگین جی کوئری در GridView رونده با سرصفحهای ثابت با Asp.net استفاده کنید . این پلاگین در تمام مرورگرها کار میکند اما با AJAX UpdatePanel سازگار نیست. از این رو یک پلاگین افزونه ای توسعه داده ایم که با ASP.Net AJAX UpdatePanels هم کار خواهد کرد.
کد HTML
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
<asp:BoundField DataField="City" HeaderText="City" />
<asp:BoundField DataField="Country" HeaderText="Country" />
</Columns>
</asp:GridView>
<asp:Button ID="Button1" runat="server" Text="Refresh" />
</ContentTemplate>
</asp:UpdatePanel>
استفاده از پلاگین جی کوئری Scrollable Grid
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#<%=GridView1.ClientID %>').Scrollable({
ScrollHeight: 300,
IsInUpdatePanel: true
});
});
</script>
در بالا JQuery و فایلهای Scrollable Grid plugin JS را ارجاع داده اید. پس از آن شما نیاز به مقداردهی اولیه GridView دارید که می خواهید به عنوان رونده ایجاد کنید.
مولفه ها
ScrollHeight - ارتفاع DIV رونده
Width- عرض DIV رونده ( اختیاری )
IsInUpdatePanel - هنگامی که GridView در AJAX UpdatePanel باشد، این پارامتر باید true باشد.