Sign In| Join
Get Help:Ask a Question in our Forums|Report a Bug|More Help Resources
Last post Jan 14, 2013 05:34 PM by twlikol
Member
631 Points
629 Posts
Jan 01, 2013 03:43 PM|LINK
I tried few CSS ways to freeze first two columns of a GridView but these solutions have compatibility issues with different browser versions.
Is there any jQuery way to freeze the first two columns of a GridView control?
All-Star
65619 Points
11118 Posts
Jan 02, 2013 02:37 AM|LINK
Refer this
http://forums.asp.net/t/1120278.aspx
http://forums.asp.net/t/1654937.aspx/1
http://forums.asp.net/t/1559317.aspx/1
30184 Points
4906 Posts
Jan 02, 2013 03:10 AM|LINK
Hi,
By freeze what you mean?
Contributor
3832 Points
651 Posts
Jan 02, 2013 03:28 AM|LINK
Please refer
http://forums.asp.net/t/1773368.aspx/1
http://www.c-sharpcorner.com/UploadFile/sapnabeniwal/scrollable-gridview-with-a-fixed-header-using-jquery-in-asp/
88 Points
20 Posts
Jan 02, 2013 04:53 AM|LINK
maybe you can try my solution, it's base on jQuery.
Supported Browsers
looking more in website: http://gridviewscroll.aspcity.idv.tw/
Jan 02, 2013 05:41 AM|LINK
Try this-
http://delicious.com/anupdg/gridview+header+footer
Jan 05, 2013 12:49 PM|LINK
@twlikol:
Looks impressive. But the downloaded file demonstrates using an HTML table. What changes are needed in a GridView tag?
<asp:GridView ID="GridView1"........>
Jan 05, 2013 12:52 PM|LINK
asteranup Hi, Try this- http://delicious.com/anupdg/gridview+header+footer
Can you provide any sample on how to fix (freeze) first two columns of a GridView?
Jan 05, 2013 12:58 PM|LINK
You don't need change anything in your GridView, just apply the script!
Jan 06, 2013 07:13 AM|LINK
twlikol You don't need change anything in your GridView, just apply the script!
I copied the jQuery and CSS references and the Script tag containing GridView1 code.
But when I open the page, the GridView has no CSS. The first two columns are also not frozen.
Below is the HTML code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewScroll.aspx.cs" Inherits="LearnjQuery.GridViewScroll" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <script type="text/javascript" src="gridviewScroll.min.js"></script> <link href="GridviewScroll.css" rel="stylesheet" /> <style type="text/css"> BODY,TD { font-family: Arial, Tahoma, Arial, Verdana; font-weight: normal; font-size: 12px; color: #333333; } </style> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:sqldatasource ID="Sqldatasource1" runat="server" ConnectionString="<%$ ConnectionStrings:inventoConnectionString %>" SelectCommand="SELECT * FROM [SupplierMaster]"></asp:sqldatasource> <asp:gridview ID="Gridview1" runat="server" DataSourceID="Sqldatasource1" Width="200px" AutoGenerateColumns="False" DataKeyNames="SupplierIdPK" PageSize="2"> <Columns> <asp:BoundField DataField="SupplierIdPK" HeaderText="SupplierIdPK" ReadOnly="True" SortExpression="SupplierIdPK" /> <asp:BoundField DataField="SupplierName" HeaderText="SupplierName" SortExpression="SupplierName"/> <asp:BoundField DataField="SupplierAddress" HeaderText="SupplierAddress" SortExpression="SupplierAddress" /> <asp:BoundField DataField="SupplierCity" HeaderText="SupplierCity" SortExpression="SupplierCity" /> <asp:BoundField DataField="SupplierPhones" HeaderText="SupplierPhones" SortExpression="SupplierPhones" /> <asp:BoundField DataField="SupplierEmail" HeaderText="SupplierEmail" SortExpression="SupplierEmail" /> <asp:BoundField DataField="SupplierTIN" HeaderText="SupplierTIN" SortExpression="SupplierTIN" /> </Columns> </asp:gridview> </div> </form> <script type="text/javascript"> $(document).ready(function () { gridviewScroll(); }); function gridviewScroll() { gridView1 = $('#GridView1').gridviewScroll({ width: 300, height: 100, railcolor: "#F0F0F0", barcolor: "#CDCDCD", barhovercolor: "#606060", bgcolor: "#F0F0F0", freezesize: 1, arrowsize: 30, varrowtopimg: "Images/arrowvt.png", varrowbottomimg: "Images/arrowvb.png", harrowleftimg: "Images/arrowhl.png", harrowrightimg: "Images/arrowhr.png", headerrowcount: 2, railsize: 16, barsize: 8 }); } </script> </body> </html>
rpk2006
Member
631 Points
629 Posts
Is there a jQuery way to freeze first two columns of a GridView control?
Jan 01, 2013 03:43 PM|LINK
I tried few CSS ways to freeze first two columns of a GridView but these solutions have compatibility issues with different browser versions.
Is there any jQuery way to freeze the first two columns of a GridView control?
chetan.sarod...
All-Star
65619 Points
11118 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 02, 2013 02:37 AM|LINK
Refer this
http://forums.asp.net/t/1120278.aspx
http://forums.asp.net/t/1654937.aspx/1
http://forums.asp.net/t/1559317.aspx/1
Senior Software Engineer,
Approva Systems Pvt Ltd, Pune, India.
asteranup
All-Star
30184 Points
4906 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 02, 2013 03:10 AM|LINK
Hi,
By freeze what you mean?
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
senthilwaits
Contributor
3832 Points
651 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 02, 2013 03:28 AM|LINK
Please refer
http://forums.asp.net/t/1773368.aspx/1
http://www.c-sharpcorner.com/UploadFile/sapnabeniwal/scrollable-gridview-with-a-fixed-header-using-jquery-in-asp/
Senthil Kumar Sundaram
twlikol
Member
88 Points
20 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 02, 2013 04:53 AM|LINK
maybe you can try my solution, it's base on jQuery.
Supported Browsers
looking more in website: http://gridviewscroll.aspcity.idv.tw/
http://gridviewscroll.aspcity.idv.tw/
asteranup
All-Star
30184 Points
4906 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 02, 2013 05:41 AM|LINK
Hi,
Try this-
http://delicious.com/anupdg/gridview+header+footer
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
rpk2006
Member
631 Points
629 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 05, 2013 12:49 PM|LINK
@twlikol:
Looks impressive. But the downloaded file demonstrates using an HTML table. What changes are needed in a GridView tag?
<asp:GridView ID="GridView1"........>
rpk2006
Member
631 Points
629 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 05, 2013 12:52 PM|LINK
Can you provide any sample on how to fix (freeze) first two columns of a GridView?
twlikol
Member
88 Points
20 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 05, 2013 12:58 PM|LINK
You don't need change anything in your GridView, just apply the script!
http://gridviewscroll.aspcity.idv.tw/
rpk2006
Member
631 Points
629 Posts
Re: Is there a jQuery way to freeze first two columns of a GridView control?
Jan 06, 2013 07:13 AM|LINK
I copied the jQuery and CSS references and the Script tag containing GridView1 code.
But when I open the page, the GridView has no CSS. The first two columns are also not frozen.
Below is the HTML code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewScroll.aspx.cs" Inherits="LearnjQuery.GridViewScroll" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> <script type="text/javascript" src="gridviewScroll.min.js"></script> <link href="GridviewScroll.css" rel="stylesheet" /> <style type="text/css"> BODY,TD { font-family: Arial, Tahoma, Arial, Verdana; font-weight: normal; font-size: 12px; color: #333333; } </style> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:sqldatasource ID="Sqldatasource1" runat="server" ConnectionString="<%$ ConnectionStrings:inventoConnectionString %>" SelectCommand="SELECT * FROM [SupplierMaster]"></asp:sqldatasource> <asp:gridview ID="Gridview1" runat="server" DataSourceID="Sqldatasource1" Width="200px" AutoGenerateColumns="False" DataKeyNames="SupplierIdPK" PageSize="2"> <Columns> <asp:BoundField DataField="SupplierIdPK" HeaderText="SupplierIdPK" ReadOnly="True" SortExpression="SupplierIdPK" /> <asp:BoundField DataField="SupplierName" HeaderText="SupplierName" SortExpression="SupplierName"/> <asp:BoundField DataField="SupplierAddress" HeaderText="SupplierAddress" SortExpression="SupplierAddress" /> <asp:BoundField DataField="SupplierCity" HeaderText="SupplierCity" SortExpression="SupplierCity" /> <asp:BoundField DataField="SupplierPhones" HeaderText="SupplierPhones" SortExpression="SupplierPhones" /> <asp:BoundField DataField="SupplierEmail" HeaderText="SupplierEmail" SortExpression="SupplierEmail" /> <asp:BoundField DataField="SupplierTIN" HeaderText="SupplierTIN" SortExpression="SupplierTIN" /> </Columns> </asp:gridview> </div> </form> <script type="text/javascript"> $(document).ready(function () { gridviewScroll(); }); function gridviewScroll() { gridView1 = $('#GridView1').gridviewScroll({ width: 300, height: 100, railcolor: "#F0F0F0", barcolor: "#CDCDCD", barhovercolor: "#606060", bgcolor: "#F0F0F0", freezesize: 1, arrowsize: 30, varrowtopimg: "Images/arrowvt.png", varrowbottomimg: "Images/arrowvb.png", harrowleftimg: "Images/arrowhl.png", harrowrightimg: "Images/arrowhr.png", headerrowcount: 2, railsize: 16, barsize: 8 }); } </script> </body> </html>