ASP.NET GridView Forms on BootStrap

Meddling with .Net Forms Gridview with BootStrap 3, bootpag, and fontawesome.
Have fun !!! :)
Useful Links:
http://techbrij.com/asp-net-gridview-twitter-bootstrap-responsive-design
http://stackoverflow.com/questions/22420602/simple-script-to-apply-bootstrap-pagination-style-in-asp-net-gridview
http://getbootstrap.com/css/#responsive-utilities

Target: Desktop

Target: Tablet

Target: Mobile

Webform1.aspx

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no" />
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/font-awesome.css" rel="stylesheet" />
<script src="js/jquery-1.11.2.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/bs.pagination.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" CssClass="table-responsive">
<asp:GridView ID="grdMain" runat="server"
AllowPaging="true" PageSize="3" OnPageIndexChanging ="grdMain_PageIndexChanging" PagerStyle-CssClass="bs-pagination"
AutoGenerateColumns="false" DataKeyNames="UserID" OnRowCommand="grdMain_RowCommand"
CssClass="table table-hover table-striped grdViewTable">
<Columns>
<asp:BoundField DataField="UserID" HeaderText="UserID" SortExpression="UserID" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" ItemStyle-CssClass="hidden-md" HeaderStyle-CssClass="hidden-md" />
<asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" HeaderStyle-CssClass="visible-lg" ItemStyle-CssClass="visible-lg" />
<asp:BoundField DataField="EmailAddress" HeaderText="EmailAddress" SortExpression="EmailAddress" ItemStyle-CssClass="hidden-xs" HeaderStyle-CssClass="hidden-xs"/>
<asp:TemplateField HeaderStyle-CssClass="sorting_disabled" >
<ItemTemplate>
<div class="form-inline">
<asp:LinkButton ID="gvlnkEdit" CommandName="editRecord" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' CssClass="btn btn-info" runat="server">
<i class="fa fa-floppy-o" title="save"></i>
</asp:LinkButton>
<asp:LinkButton ID="gvlnkDelete" CommandName="deleteRecord" CommandArgument='<%#((GridViewRow)Container).RowIndex%>' CssClass="btn btn-info" runat="server">
<i class="fa fa-trash" title="delete"></i>
</asp:LinkButton>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="rowStyle" />
<HeaderStyle CssClass="headerStyle" />
<FooterStyle CssClass="footerStyle" />
<PagerStyle HorizontalAlign ="Center" />
<PagerSettings Mode="NumericFirstLast" PageButtonCount="4" FirstPageText="First" LastPageText="Last" />
</asp:GridView>


<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center" id="H1">
<asp:Label ID="Label1" runat="server" Text="View/Edit Record"></asp:Label>
</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<div class="form-horizontal">
<div class="form-group">
<label for="txtUserID" class="col-lg-2 control-label" >User ID</label>
<div class="col-lg-10">
<asp:TextBox ID="txtUserID" runat="server" disabled="disabled"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="txtUserID" class="col-lg-2 control-label">LastName</label>
<div class="col-lg-10">
<asp:TextBox ID="txtLastName" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="txtUserID" class="col-lg-2 control-label">FirstName</label>
<div class="col-lg-10">
<asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
</div>
</div>
<div class="form-group">
<label for="txtUserID" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<asp:TextBox ID="txtEmailAddress" runat="server"></asp:TextBox>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<asp:LinkButton ID="lnkSave" CssClass="btn btn-info" runat="server">
Save <i class="fa fa-floppy-o" title="save"></i>
</asp:LinkButton>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>

</div>

</div>



<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-center" id="H2">
<asp:Label ID="Label2" runat="server" Text="Delete Record"></asp:Label>
</h4>
</div>
<div class="modal-body">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:HiddenField ID="hf_DeleteID" runat="server" />
<h5 class="danger">Are you sure you want to delete the record?</h5>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div class="modal-footer">
<asp:LinkButton ID="lnkDelete" CssClass="btn btn-info" runat="server">
Delete <i class="fa fa-trash" title="delete"></i>
</asp:LinkButton>
<button type="button" class="btn btn-info" data-dismiss="modal">Cancel</button>
</div>
</div>

</div>

</div>


</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="grdMain"/>
</Triggers>
</asp:UpdatePanel>

</form>
</body>

</html>

Webform1.aspx.cs

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using WebControlsProject;

namespace WebControlsProject
{
public partial class WebForm1 : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

if (!Page.IsPostBack) {
BindGrid();
}
}

private void BindGrid()
{
grdMain.DataSource = GetDataTable();
grdMain.DataBind();
}

public List<UserInfo> GetDataTable()
{
return new List<UserInfo>() {
new UserInfo(1, "Colborn1","Bucio","luffy.bucio@gmail.com")
,new UserInfo(2, "Tefhanne2","Bucio","tefhanne143337@gmail.com")
,new UserInfo(3, "Colborn3","Bucio","luffy.bucio@gmail.com")
,new UserInfo(4, "Tefhanne4","Bucio","tefhanne143337@gmail.com")
,new UserInfo(5, "Colborn5","Bucio","luffy.bucio@gmail.com")
,new UserInfo(6, "Tefhanne6","Bucio","tefhanne143337@gmail.com")
,new UserInfo(7, "Tefhanne7","Bucio","tefhanne143337@gmail.com")
,new UserInfo(8, "Colborn8","Bucio","luffy.bucio@gmail.com")
,new UserInfo(9, "Tefhanne9","Bucio","tefhanne143337@gmail.com")
,new UserInfo(10, "Colborn10","Bucio","luffy.bucio@gmail.com")
,new UserInfo(11, "Tefhanne11","Bucio","tefhanne143337@gmail.com")
,new UserInfo(12, "Tefhanne12","Bucio","tefhanne143337@gmail.com")
,new UserInfo(13, "Colborn13","Bucio","luffy.bucio@gmail.com")
,new UserInfo(14, "Tefhanne14","Bucio","tefhanne143337@gmail.com")
,new UserInfo(15, "Colborn15","Bucio","luffy.bucio@gmail.com")
,new UserInfo(16, "Tefhanne16","Bucio","tefhanne143337@gmail.com")
};
}

protected void grdMain_RowCommand(object sender, GridViewCommandEventArgs e)
{
int index;

if (e.CommandName.Equals("editRecord"))
{
index = Convert.ToInt32(e.CommandArgument);

int ID = Convert.ToInt32(grdMain.DataKeys[index].Value.ToString());
var clickedRecord = from users in GetDataTable()
where users.UserID == ID
select users;

foreach (var d in clickedRecord.ToList())
{
txtUserID.Text = d.UserID.ToString();
txtLastName.Text = d.LastName.ToString();
txtFirstName.Text = d.FirstName.ToString();
txtEmailAddress.Text = d.EmailAddress.ToString();
}

System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("$('#editModal').modal({");
sb.Append(" backdrop: 'static',");
sb.Append(" keyboard: false");
sb.Append("});");
ScriptManager.RegisterStartupScript(Page, this.GetType(), "clientscript", sb.ToString(), true);
}

if (e.CommandName.Equals("deleteRecord"))
{
index = Convert.ToInt32(e.CommandArgument);
int ID = Convert.ToInt32(grdMain.DataKeys[index].Value.ToString());
hf_DeleteID.Value = ID.ToString();
//
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("$('#deleteModal').modal({");
sb.Append(" backdrop: 'static',");
sb.Append(" keyboard: false");
sb.Append("});");
ScriptManager.RegisterStartupScript(Page, this.GetType(), "clientscript", sb.ToString(), true);
}
}

protected void grdMain_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
grdMain.PageIndex = e.NewPageIndex;
BindGrid();
}

}

}

ASP.NET GridView Forms on BootStrap

Sunday, January 11, 2015

3 comments: