C# : row-clickable GridView and get and set gridview rows using JavaScript

Complete C# code:

----------------

using System;

using System.ComponentModel;

using System.Configuration;

using System.Web.UI;

using System.Web.UI.WebControls;

namespace CustomGridView

{

/// <summary>/// Summary description for ClickableGridView/// </summary>publicclass ClickableGridView : GridView

{

publicstring RowCssClass

{

get

{

string rowClass = (string)ViewState["rowClass"];

if (!string.IsNullOrEmpty(rowClass))

return rowClass;

elsereturnstring.Empty;

}

set

{

ViewState["rowClass"] = value;

}

}

publicstring HoverRowCssClass

{

get

{

string hoverRowClass = (string)ViewState["hoverRowClass"];

if (!string.IsNullOrEmpty(hoverRowClass))

return hoverRowClass;

elsereturnstring.Empty;

}

set

{

ViewState["hoverRowClass"] = value;

}

}

privatestaticreadonlyobject RowClickedEventKey = newobject();

publicevent GridViewRowClicked RowClicked;

protectedvirtualvoid OnRowClicked(GridViewRowClickedEventArgs e)

{

if (RowClicked != null)

RowClicked(this, e);

}

protectedoverridevoid RaisePostBackEvent(string eventArgument)

{

if (eventArgument.StartsWith("rc"))

{

int index = Int32.Parse(eventArgument.Substring(2));

GridViewRowClickedEventArgs args = new GridViewRowClickedEventArgs(Rows[index]);

OnRowClicked(args);

}

elsebase.RaisePostBackEvent(eventArgument);

}

protectedoverridevoid PrepareControlHierarchy()

{

base.PrepareControlHierarchy();

for (int i = 0; i < Rows.Count; i++)

{

string argsData = "rc" + Rows[i].RowIndex.ToString();

Rows[i].Attributes.Add("onclick", Page.ClientScript.GetPostBackEventReference(this, argsData));

if (RowCssClass != string.Empty)

Rows[i].Attributes.Add("onmouseout", "this.className='" + RowCssClass + "';");

if (HoverRowCssClass != string.Empty)

Rows[i].Attributes.Add("onmouseover", "this.className='" + HoverRowCssClass + "';");

}

}

}

publicclass GridViewRowClickedEventArgs : EventArgs

{

private GridViewRow _row;

public GridViewRowClickedEventArgs(GridViewRow aRow)

: base()

{

_row = aRow;

}

public GridViewRow Row

{

get

{ return _row; }

}

}

publicdelegatevoid GridViewRowClicked(object sender, GridViewRowClickedEventArgs args);

}

I am having following example to access gridview rows and columns using JAVA Script. You

can call setCellValue to set the value of selected row/column cell.

<script language="javascript" type="text/javascript">

var gridViewCtlId = '<%=ctlGridView.ClientID%>';

var gridViewCtl = null;

var curSelRow = null;

var curRowIdx = -1;

function getGridViewControl()

{

if (null == gridViewCtl)

{

gridViewCtl = document.getElementById(gridViewCtlId);

}

}

function onGridViewRowSelected(rowIdx)

{

var selRow = getSelectedRow(rowIdx);

if (null != selRow)

{

curSelRow = selRow;

var cellValue = getCellValue(rowIdx, 0);

alert(cellValue);

}

}

function getSelectedRow(rowIdx)

{

return getGridRow(rowIdx);

}

function getGridRow(rowIdx)

{

getGridViewControl();

if (null != gridViewCtl)

{

return gridViewCtl.rows[rowIdx];

}

return null;

}

function getGridColumn(rowIdx, colIdx)

{

var gridRow = getGridRow(rowIdx);

if (null != gridRow)

{

return gridRow.cells[colIdx];

}

return null;

}

function getCellValue(rowIdx, colIdx)

{

var gridCell = getGridColumn(rowIdx, colIdx);

if (null != gridCell)

{

return gridCell.innerText;

}

return null;

}

function setCellValue(rowIdx, colIdx)

{

var gridCell = getGridColumn(rowIdx, colIdx);

gridCell.innerText = "Your value";

}

</script>

Regards