{"id":4522,"date":"2015-07-24T05:00:23","date_gmt":"2015-07-24T05:00:23","guid":{"rendered":"http:\/\/ngenioussolutions.com\/blog\/?p=63"},"modified":"2024-04-22T05:03:18","modified_gmt":"2024-04-22T05:03:18","slug":"responsive-gridview-for-mobile-phone-tablet-and-desktop-display-in-asp-net","status":"publish","type":"post","link":"https:\/\/ngenioussolutions.com\/blog\/responsive-gridview-for-mobile-phone-tablet-and-desktop-display-in-asp-net\/","title":{"rendered":"Responsive GridView in ASP.Net (Mobile, Tablet & Desktop)"},"content":{"rendered":"

In order to make the\u00a0<\/span>GridView responsive,You can use Footable jQuery plugin which is compatible with Bootstrap design.<\/h2>\n
To use Footable jQuery include the following code inside the form tag:<\/div>\n
<link href=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-footable\/0.1.0\/css\/footable.min.css”<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 rel=”stylesheet” type=”text\/css” \/><\/span>
\n\u00a0 \u00a0 <script type=”text\/javascript” src=”http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.8.3\/jquery.min.js”><\/script><\/span>
\n\u00a0 \u00a0 <script type=”text\/javascript” src=”https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery-footable\/0.1.0\/js\/footable.min.js”><\/script><\/span>
\n\u00a0 \u00a0 <script type=”text\/javascript”><\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 $(function () {<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 $(‘[id*=GridView1]’).footable();<\/span>
\n\u00a0 \u00a0 \u00a0 \u00a0 });<\/span>
\n\u00a0 \u00a0 <\/script><\/span><\/div>\n

 <\/p>\n

The HTML Markup consists of an ASP.Net GridView. You have to apply the CSS class\u00a0footable<\/u>\u00a0to the GridView.<\/div>\n
<\/div>\n
\n
\n
\u00a0 \u00a0 <asp:GridView ID=”GridView1″ CssClass=”footable” runat=”server” AutoGenerateColumns=”false”<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 Style=”max-width: 500px”><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <Columns><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <asp:BoundField DataField=”Id” HeaderText=”Id” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <asp:BoundField DataField=”Name” HeaderText=”Name” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <asp:BoundField DataField=”Company” HeaderText=”Company” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <asp:BoundField DataField=”Age” HeaderText=”Age” \/><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 <\/Columns><\/div>\n
\u00a0 \u00a0 <\/asp:GridView><\/div>\n<\/div>\n<\/div>\n
<\/div>\n
\n
\n
You will need to import the following C# namespaces.<\/div>\n
<\/div>\n
using<\/span>\u00a0System.Data;<\/span><\/div>\n<\/div>\n
Imports<\/span>\u00a0System.Data;<\/span><\/div>\n
\u00a0<\/span><\/div>\n

Binding the Grid View\u00a0<\/b><\/span><\/h2>\n
\n
\u00a0<\/span><\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 protected void Page_Load(object sender, EventArgs e)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 if (!this.IsPostBack)<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0DataTable dt = new DataTable();<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dt.Columns.AddRange(new DataColumn[4] { new DataColumn(“Id”), new \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 DataColumn(“Name”), new DataColumn(“Company”), new \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 DataColumn(“Age”) });<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dt.Rows.Add(1, “Savan”, “MSOSL”, 23);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dt.Rows.Add(2, “Rupesh”, “KLOSJ”, 25);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 dt.Rows.Add(3, “Rahul”, “JSKL”, 26);<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GridView1.DataSource = dt;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GridView1.DataBind();<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Attribute to show the Plus Minus Button.<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GridView1.HeaderRow.Cells[0].Attributes[“data-class”] = “expand”;<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Attribute to hide column in Phone.<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GridView1.HeaderRow.Cells[2].Attributes[“data-hide”] = “phone”;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GridView1.HeaderRow.Cells[3].Attributes[“data-hide”] = “phone”;<\/div>\n
<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \/\/Adds THEAD and TBODY to GridView.<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n
\u00a0 \u00a0 \u00a0 \u00a0 }<\/div>\n<\/div>\n<\/div>\n
\n

Screenshot<\/b><\/h2>\n

\"\"<\/p>\n

\"\"<\/p>\n

\"\"<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

In order to make the\u00a0GridView responsive,You can use Footable jQuery plugin which is compatible with Bootstrap design. To use Footable jQuery include the following code…<\/p>\n","protected":false},"author":1,"featured_media":8608,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4522","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-others"],"menu_order":0,"_links":{"self":[{"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4522","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=4522"}],"version-history":[{"count":8,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4522\/revisions"}],"predecessor-version":[{"id":10220,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/posts\/4522\/revisions\/10220"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/media\/8608"}],"wp:attachment":[{"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=4522"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=4522"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ngenioussolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=4522"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}