|
In one of my previous article Select row in a Gridview, I explained how to select cell or row in a gridview without postback. In this article we will explore how to select cell or row or column in a gridview without postback.
In above image, Click on any cell selects the corresponding header and row number.
In above image, click on row number selects the entire row.
In above image, click on column header selects entire column.
Let's write some code to achieve above functionality.
Step 1: Add a gridview and five hidden fields.
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="False" CellPadding="5"
Font-Name="verdana" Font-Size="10pt" onselectstart="return false;" BorderStyle="Solid" OnRowDataBound="gvEmployee_RowDataBound">
<RowStyle BackColor="#99CCFF" />
<Columns>
<asp:BoundField DataField="id" ItemStyle-VerticalAlign="Top" ItemStyle-Width="20px" />
<asp:BoundField DataField="empid" HeaderText="EmpId" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="name" HeaderText="Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="address" HeaderText="Address" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
<asp:BoundField DataField="age" HeaderText="Age" ItemStyle-VerticalAlign="Top" ItemStyle-Width="120px" />
</Columns>
<HeaderStyle HorizontalAlign="Left" BackColor="#003366" ForeColor="#ffffff" Font-Bold="true" Font-Size=".75em"/>
</asp:GridView>
<asp:HiddenField ID="hidCellId" runat="server" />
<asp:HiddenField ID="hidColumnIds" runat="server" />
<asp:HiddenField ID="hidColumnRowIds" runat="server" />
<asp:HiddenField ID="hidColumnId" runat="server" />
<asp:HiddenField ID="hidFirstCellId" runat="server" />
hidCellId will be used to store all the cellids so that on previous selected cell can be reverted back to original color on selection of any new cell
hidColumnIds will be used to store all the columnid so that previous selected column can be reverted back to original color on selection of any new coloumn
hidColumnRowIds will be used to deselect previously selected rows when other column header is selected.
hidColumnId will be used to select the column header on selection of any cell.
hidFirstCellId will be used to select row number on selection of any cell.
Step 2: Add FillColor, FillRowColor, FillColumnColor javascript methods in the aspx page.
< script language="javascript" type="text/javascript">
function FillColor(cellid, firstcellid, columnId) {
document.getElementById('<%=hidColumnId.ClientID%>').value = columnId;
var clearCellColor = document.getElementById('hidCellId').value.split(',');
for (i = 0; i < clearCellColor.length; i++) {
document.getElementById(clearCellColor[i]).bgColor = "#99CCFF"; //Row Background Color
document.getElementById(clearCellColor[i]).style.color = "Black";
}
var clearColumnColor = document.getElementById('hidColumnIds').value.split(',');
for (i = 0; i < clearColumnColor.length; i++) {
document.getElementById(clearColumnColor[i]).bgColor = "#003366"; //Header Background Color
document.getElementById(clearColumnColor[i]).style.color = "#ffffff";
}
document.getElementById(cellid).bgColor = "Maroon";
document.getElementById(firstcellid).bgColor = "Maroon";
document.getElementById(cellid).style.color = "White";
document.getElementById(firstcellid).style.color = "White";
document.getElementById('<%=hidFirstCellId.ClientID%>').value = firstcellid;
document.getElementById(columnId).style.color = "White";
document.getElementById(columnId).bgColor = "Maroon";
}
function FillRowColor(rowCellIds) {
var clearCellColor = document.getElementById('hidCellId').value.split(',');
for (i = 0; i < clearCellColor.length; i++) {
document.getElementById(clearCellColor[i]).bgColor = "#99CCFF"; //Row Background Color
document.getElementById(clearCellColor[i]).style.color = "Black";
}
var getRowCellId = rowCellIds.split(',');
for (i = 0; i < getRowCellId.length; i++) {
if (i == 0) {
document.getElementById('<%=hidFirstCellId.ClientID%>').value = getRowCellId[i];
}
document.getElementById(getRowCellId[i]).bgColor = "Maroon";
document.getElementById(getRowCellId[i]).style.color = "White";
}
var clearColumnColor = document.getElementById('hidColumnIds').value.split(',');
for (i = 0; i < clearColumnColor.length; i++) {
document.getElementById(clearColumnColor[i]).bgColor = "#003366"; //Header Background Color
document.getElementById(clearColumnColor[i]).style.color = "#ffffff";
}
}
function FillColumnColor(columnRowCellIds, columnHeaderId) {
var clearColumnColor = document.getElementById('hidColumnRowIds').value.split(',');
for (i = 0; i < clearColumnColor.length; i++) {
document.getElementById(clearColumnColor[i]).bgColor = "#99CCFF"; //Row Background Color
document.getElementById(clearColumnColor[i]).style.color = "Black";
}
var clearColumnColor = document.getElementById('hidColumnIds').value.split(',');
for (i = 0; i < clearColumnColor.length; i++) {
document.getElementById(clearColumnColor[i]).bgColor = "#003366"; //Header Background Color
document.getElementById(clearColumnColor[i]).style.color = "#ffffff";
}
var getRowCellId = columnRowCellIds.split(',');
for (i = 0; i < getRowCellId.length; i++) {
document.getElementById(getRowCellId[i]).bgColor = "Maroon";
document.getElementById(getRowCellId[i]).style.color = "White";
}
if (document.getElementById('<%=hidColumnId.ClientID%>').value != '') {
var clmnId = document.getElementById('<%=hidColumnId.ClientID%>').value;
document.getElementById(clmnId).bgColor = "#003366"; //Header Background Color
document.getElementById(clmnId).style.color = "#ffffff";
}
if (document.getElementById(columnHeaderId) != null) {
document.getElementById(columnHeaderId).bgColor = "Maroon";
document.getElementById(columnHeaderId).style.color = "White";
}
var firstCellId = document.getElementById('<%=hidFirstCellId.ClientID%>').value;
document.getElementById(firstCellId).bgColor = "#99CCFF"; //Row Background Color
document.getElementById(firstCellId).style.color = "Black";
}
</script>
Step 3: Write below code to beind gridview with data in codebehind cs file.
protected void Page_Load(object sender, EventArgs e)
{
gvEmployee.DataSource = GetData();
gvEmployee.DataBind();
}
private DataTable GetData()
{
DataTable table = new DataTable();
table.Columns.Add("id", typeof(string));
table.Columns.Add("empid", typeof(string));
table.Columns.Add("name", typeof(string));
table.Columns.Add("address", typeof(string));
table.Columns.Add("age", typeof(string));
table.Rows.Add(1, 100, "John", "NY", 25);
table.Rows.Add(2, 200, "Kate", "NJ", 30);
table.Rows.Add(3, 300, "George", "California", 49);
table.Rows.Add(4, 400, "Michael", "Kentucky", 35);
table.Rows.Add(5, 500, "Geo", "Washington", 36);
table.Rows.Add(6, 100, "John", "NY", 25);
table.Rows.Add(7, 200, "Kate", "NJ", 30);
table.Rows.Add(8, 300, "George", "California", 49);
table.Rows.Add(9, 400, "Michael", "Kentucky", 35);
table.Rows.Add(10, 500, "Geo", "Washington", 36);
return table;
}
Step 4: Add gvEmployee_RowDataBound method in codebehind cs file.
protected void gvEmployee_RowDataBound(Object sender, GridViewRowEventArgs e)
{
StringBuilder sbRowCellIds = new StringBuilder();
TableCell[] arrHeaderColumnID = new TableCell[gvEmployee.Columns.Count];
if (Session["ColumnID"] == null)
{
if (e.Row.RowType == DataControlRowType.Header)
{
for (int i = 0; i < gvEmployee.Columns.Count; i++)
{
if (hidColumnIds.Value.Length == 0)
{
hidColumnIds.Value = e.Row.Cells[i].ClientID;
}
else
{
hidColumnIds.Value = hidColumnIds.Value + "," + e.Row.Cells[i].ClientID;
}
arrHeaderColumnID[i] = e.Row.Cells[i];
}
}
Session["ColumnID"] = arrHeaderColumnID;
}
arrHeaderColumnID = (TableCell[])Session["ColumnID"];
StringBuilder[] str = new StringBuilder[gvEmployee.Columns.Count];
if (Session["ColumRowIds"] != null)
{
str = (StringBuilder[])Session["ColumRowIds"];
}
if (e.Row.RowType == DataControlRowType.DataRow)
{
string strcolumnHeaderId = string.Empty;
for (int i = 0; i < gvEmployee.Columns.Count; i++)
{
e.Row.Cells[i].Attributes.Add("onclick", "FillColor('" + e.Row.Cells[i].ClientID + "','" + e.Row.Cells[0].ClientID + "','" + arrHeaderColumnID[i].ClientID + "')");
if (i != 0)
{
if (str[i] == null)
{
str[i] = new StringBuilder();
}
if (str[i].Length == 0)
{
str[i].Append(e.Row.Cells[i].ClientID);
}
else
{
str[i].Append(",");
str[i].Append(e.Row.Cells[i].ClientID);
}
if (hidColumnRowIds.Value.Length == 0)
{
hidColumnRowIds.Value = str[i].ToString();
}
else
{
hidColumnRowIds.Value = hidColumnRowIds.Value + "," + str[i].ToString();
}
strcolumnHeaderId = arrHeaderColumnID[i].ClientID;
arrHeaderColumnID[i].Attributes.Add("onclick", "FillColumnColor('" + str[i].ToString() + "','" + strcolumnHeaderId + "')");
}
if (hidCellId.Value.Length == 0)
{
hidCellId.Value = e.Row.Cells[i].ClientID;
}
else
{
hidCellId.Value = hidCellId.Value + "," + e.Row.Cells[i].ClientID;
}
if (sbRowCellIds.ToString().Length == 0)
{
sbRowCellIds.Append(e.Row.Cells[i].ClientID);
}
else
{
sbRowCellIds.Append(",");
sbRowCellIds.Append(e.Row.Cells[i].ClientID);
}
}
if (Session["ColumRowIds"] == null)
{
Session["ColumRowIds"] = str;
}
e.Row.Cells[0].Attributes.Add("onclick", "FillRowColor('" + sbRowCellIds.ToString() + "')");
}
}
Step 5: Clear sessions of page unload.
protected void Page_Unload(object sender, EventArgs e)
{
Session["ColumnID"] = null;
Session["ColumRowIds"] = null;
}
Live Demo
This ends the article of selecting cell, row and column without postback.
|