Responsive GridView for Mobile Phone, Tablet and Desktop display in ASP.Net

In order to make the GridView responsive,You can use Footable jQuery plugin which is compatible with Bootstrap design. To use Footable jQuery include the following code inside the form tag- <link href=”https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css”         rel=”stylesheet” type=”text/css” />     <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>     <script type=”text/javascript” src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js”></script>     <script type=”text/javascript”>         $(function () {             $(‘[id*=GridView1]’).footable();         });     </script>   The HTML Markup consists of an ASP.Net GridView. You have to apply the CSS class footable to the GridView.     <asp:GridView ID=”GridView1″ CssClass=”footable” runat=”server” AutoGenerateColumns=”false”         Style=”max-width: 500px”>         <Columns>             <asp:BoundField DataField=”Id” HeaderText=”Id” />             <asp:BoundField DataField=”Name” HeaderText=”Name” />             <asp:BoundField DataField=”Company” HeaderText=”Company” />             <asp:BoundField DataField=”Age” HeaderText=”Age” />         </Columns>     </asp:GridView> You will need to import the following C# namespaces. using System.Data; Imports System.Data;   Binding the Grid View            protected void… Read More

Read More

Export data table to Excel Sheet(CSV) on Button Click

First You have to Create a grid view that will show details which you want to Export <asp:GridView ID=”GridView1″ CssClass=”footable” runat=”server” AutoGenerateColumns=”false”         Style=”max-width: 500px” >         <Columns>             <asp:BoundField DataField=”Id” HeaderText=”Id” />             <asp:BoundField DataField=”Name” HeaderText=”Name” />             <asp:BoundField DataField=”Company” HeaderText=”Company” />             <asp:BoundField DataField=”Age” HeaderText=”Age” />         </Columns>     </asp:GridView> Bind you details to GridView C# Code Behind:- public static DataTable dt; //Declare your dt globle to paas it in another function protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { dt = new DataTable(); dt.Columns.AddRange(new DataColumn[4] { new DataColumn(“Id”), new DataColumn(“Name”), new DataColumn(“Company”), new DataColumn(“Age”) }); dt.Rows.Add(1, “Savan”, “MSOSL”, 23); dt.Rows.Add(2, “Rupesh”, “KLOSJ”, 25); dt.Rows.Add(3, “Rahul”, “JSKL”, 26); GridView1.DataSource = dt; GridView1.DataBind(); } } Create a button that will export you details to Excel <asp:Button ID=”Button1″ runat=”server” Text=”Export” OnClick=”Button1_Click”  /> Call the function on click event C# Code Behind:- protected void Button1_Click(object sender, EventArgs e) {… Read More

Read More

Detect the device (Mobile/Desktop) in asp.Net

Create a page Desktop.aspx Add the following code in aspx page <asp:Label ID=”lblBrowser” runat=”server” Text = “Desktop” /> Add the following code in code behind(aspx.cs) protected void Page_Load(object sender, EventArgs e) { string userAgent = Request.ServerVariables[“HTTP_USER_AGENT”]; Regex OS = new Regex(@”(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino”, RegexOptions.IgnoreCase | RegexOptions.Multiline); Regex device = new Regex(@”1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-“, RegexOptions.IgnoreCase | RegexOptions.Multiline); string device_info = string.Empty; if (OS.IsMatch(userAgent)) { device_info = OS.Match(userAgent).Groups[0].Value; } if (device.IsMatch(userAgent.Substring(0, 4))) { device_info += device.Match(userAgent).Groups[0].Value; } if (!string.IsNullOrEmpty(device_info)) { Response.Redirect(“Mobile.aspx?device_info=” + device_info); //If you open the Desktop.aspx page from Desktop browser then that will automatically redirect to Mobile.aspx// } } Create a Mobile.aspx Page_Load Add the code in Mobile.aspx Page <asp:Label ID=”lblBrowser” runat=”server” Text = “” /> Add the code in code-behind at Mobile.aspx.cs protected void Page_Load(object sender, EventArgs e) { lblBrowser.Text = “You are using a Mobile device. ” + Request.QueryString[“device_info”]; } Snapshot:- This will open if you are using mobile

Read More