Create div and inside gridview in html
Open css file or style tag
Add media query to decrease the width of screen.
eg:-
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
CSS
---------------
<style>
#grid_div{
width:500px;
overflow:scroll;
}
@media only screen and (min-width:150px) and (max-width:600px) {
#grid_div{
width:150px;
overflow:scroll;
}
}
</style>
JQUERY
------------------
Download 2 jquery files
a) jquery-1.11.2.min.js
b) footable.js
<script src="Jquery/jquery-1.11.2.min.js"></script>
<script src="Jquery/footable.js"></script>
<script type="text/javascript">
$(function () {
$('#<%=church_gridview.ClientID %>').footable({
breakpoints: {
phone: 150,
tablet: 640
}
});
});
</script>
HTML
------------
<div id="grid_div">
<asp:GridView ID="church_gridview" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="church_sqldatasource" PageSize="3" CssClass="footable" AllowPaging="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="return confirm('Are you sure you?');"
CommandName="Delete" CausesValidation="false">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" CausesValidation="false" />
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="church_name" HeaderText="church_name" SortExpression="church_name" />
<asp:BoundField DataField="church_address" HeaderText="church_address" SortExpression="church_address" />
<asp:BoundField DataField="church_ph" HeaderText="church_ph" SortExpression="church_ph" />
<asp:BoundField DataField="church_email" HeaderText="church_email" SortExpression="church_email" />
<asp:BoundField DataField="church_website" HeaderText="church_website" SortExpression="church_website" />
<asp:BoundField DataField="District" HeaderText="District" SortExpression="District" />
</Columns>
</asp:GridView>
</div>
Code Behind
--------------------
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gridview_bind_responsive();
}
}
public void gridview_bind_responsive()
{
church_gridview.DataBind();
church_gridview.UseAccessibleHeader = true;
church_gridview.HeaderRow.TableSection = TableRowSection.TableHeader;
TableCellCollection cells = church_gridview.HeaderRow.Cells;
cells[0].Attributes.Add("data-hide", "expand");
cells[1].Attributes.Add("data-class", "expand");
cells[2].Attributes.Add("data-hide", "phone,tablet");
cells[3].Attributes.Add("data-hide", "expand");
cells[4].Attributes.Add("data-hide", "phone,tablet");
cells[8].Attributes.Add("data-hide", "phone,tablet");
cells[7].Attributes.Add("data-hide", "phone,tablet");
cells[6].Attributes.Add("data-hide", "phone,tablet");
cells[5].Attributes.Add("data-hide", "phone,tablet");
}
Open css file or style tag
Add media query to decrease the width of screen.
eg:-
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
</head>
CSS
---------------
<style>
#grid_div{
width:500px;
overflow:scroll;
}
@media only screen and (min-width:150px) and (max-width:600px) {
#grid_div{
width:150px;
overflow:scroll;
}
}
</style>
JQUERY
------------------
Download 2 jquery files
a) jquery-1.11.2.min.js
b) footable.js
<script src="Jquery/jquery-1.11.2.min.js"></script>
<script src="Jquery/footable.js"></script>
<script type="text/javascript">
$(function () {
$('#<%=church_gridview.ClientID %>').footable({
breakpoints: {
phone: 150,
tablet: 640
}
});
});
</script>
HTML
------------
<div id="grid_div">
<asp:GridView ID="church_gridview" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="church_sqldatasource" PageSize="3" CssClass="footable" AllowPaging="True">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="return confirm('Are you sure you?');"
CommandName="Delete" CausesValidation="false">Delete</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ShowEditButton="True" CausesValidation="false" />
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="church_name" HeaderText="church_name" SortExpression="church_name" />
<asp:BoundField DataField="church_address" HeaderText="church_address" SortExpression="church_address" />
<asp:BoundField DataField="church_ph" HeaderText="church_ph" SortExpression="church_ph" />
<asp:BoundField DataField="church_email" HeaderText="church_email" SortExpression="church_email" />
<asp:BoundField DataField="church_website" HeaderText="church_website" SortExpression="church_website" />
<asp:BoundField DataField="District" HeaderText="District" SortExpression="District" />
</Columns>
</asp:GridView>
</div>
Code Behind
--------------------
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
gridview_bind_responsive();
}
}
public void gridview_bind_responsive()
{
church_gridview.DataBind();
church_gridview.UseAccessibleHeader = true;
church_gridview.HeaderRow.TableSection = TableRowSection.TableHeader;
TableCellCollection cells = church_gridview.HeaderRow.Cells;
cells[0].Attributes.Add("data-hide", "expand");
cells[1].Attributes.Add("data-class", "expand");
cells[2].Attributes.Add("data-hide", "phone,tablet");
cells[3].Attributes.Add("data-hide", "expand");
cells[4].Attributes.Add("data-hide", "phone,tablet");
cells[8].Attributes.Add("data-hide", "phone,tablet");
cells[7].Attributes.Add("data-hide", "phone,tablet");
cells[6].Attributes.Add("data-hide", "phone,tablet");
cells[5].Attributes.Add("data-hide", "phone,tablet");
}
No comments:
Post a Comment