when moving screen small, medium, large view, not hiding / showing column perfectly. in large view column should show all, hence here showing id , name column , other view same.
here code:
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %> <!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="content/bootstrap.min.css" rel="stylesheet" /> </head> <body> <form id="form1" runat="server"> <div> <div id="maincontainer" class="container"> <div class="shadowbox"> <div class="page-container"> <div class="container"> <div class="jumbotron"> <p class="text-danger">responsive gridview in asp.net </p> <span class="text-info">desktop tablet phone different layout </span> </div> <div class="row"> <div class="col-lg-12 "> <div class="table-responsive"> <asp:gridview id="grdcustomer" runat="server" width="100%" cssclass="table table-striped table-bordered table-hover" autogeneratecolumns="false" datakeynames="id" emptydatatext="there no data records display."> <columns> <asp:boundfield datafield="id" headertext="id" readonly="true" sortexpression="id" /> <asp:boundfield datafield="name" headertext="name" sortexpression="name" headerstyle-cssclass="visible-lg" itemstyle-cssclass="visible-lg" /> <asp:boundfield datafield="country" headertext="country" sortexpression="country" itemstyle-cssclass="visible-xs" headerstyle-cssclass="visible-xs" /> <asp:boundfield datafield="salary" headertext="salary" sortexpression="salary" headerstyle-cssclass="visible-md" itemstyle-cssclass="visible-md" /> <%-- <asp:boundfield datafield="address" headertext="address" sortexpression="address" itemstyle-cssclass="hidden-xs" headerstyle-cssclass="hidden-xs" /> <asp:boundfield datafield="city" headertext="city" sortexpression="city" itemstyle-cssclass="hidden-xs" headerstyle-cssclass="hidden-xs" /> <asp:boundfield datafield="region" headertext="region" sortexpression="region" headerstyle-cssclass="visible-md" itemstyle-cssclass="visible-md" /> <asp:boundfield datafield="postalcode" headertext="postalcode" sortexpression="postalcode" headerstyle-cssclass="visible-lg" itemstyle-cssclass="visible-lg" /> <asp:boundfield datafield="country" headertext="country" sortexpression="country" headerstyle-cssclass="visible-md" itemstyle-cssclass="visible-md" /> <asp:boundfield datafield="phone" headertext="phone" sortexpression="phone" headerstyle-cssclass="visible-lg" itemstyle-cssclass="visible-lg" />--%> </columns> </asp:gridview> </div> </div> </div> </div> </div> </div> </div> </div> </form> <script src="scripts/jquery-1.9.1.min.js"></script> <script src="scripts/bootstrap.min.js"></script> </body> </html> i requesting kind help.
to toggle content across viewport breakpoints using bootstrap responsive classes, have use .visible-x-y, where:
xscreen size (i.e.xs,sm,md,lg,xl)ycssdisplayproperty value (i.e.block,inline,inline-block)
your headerstyle-cssclass , itemstyle-cssclass missing "y part".
Comments
Post a Comment