Select partial ROW of GridView by using JavaScript and select a column of table by using JQUERY

Select a part of ROW of Grid View by using JavaScript

The problem statement was to select only some part of a row on selection of check box.

I have added client side code while creating rows of grid view. Please refer screenshot below where

m_rowIndex is declared as

privateintm_rowIndex = 0;


This index will identify row uniquely.

Here I have a custom control for creating such kind of grid view, as my page was going to contain any variable number of gridviews.

So to identify selected gridview, I am passing anidentifier for each gridview while creating them.

Now to select partial row, write code on client side in JavaScript:

<%@ControlLanguage="C#"AutoEventWireup="true"CodeBehind="CustomGrd.ascx.cs"Inherits="FTC.CustomGrd"%>

<scriptlanguage="javascript"type="text/javascript">

vargridViewCtlId = 'grdCustom';

vargridViewCtl = null;

varcurSelRow = null;

functiongetGridViewControl() {

if (null == gridViewCtl) {

gridViewCtl = getElementsByClassName('CustomGrid', null, null);

        }

    }

functiongetElementsByClassName(searchClass, domNode, tagName) {

if (domNode == null) domNode = document;

if (tagName == null) tagName = '*';

var el = new Array();

var tags = domNode.getElementsByTagName(tagName);

vartcl = " " + searchClass + " ";

for (i = 0, j = 0; i <tags.length; i++) {

var test = " " + tags[i].className + " ";

if (test.indexOf(tcl) != -1)

el[j++] = tags[i];

        }

return el;

    }

functiononGridViewRowSelected(rowIdx, grdIdx) {

varselGrid = getSelectedGrid(grdIdx);

varselRow = selGrid.rows[rowIdx];

if (curSelRow != null) {

curSelRow.cells[1].bgColor = '#ffffff';

curSelRow.cells[2].bgColor = '#ffffff';

        }

if (null != selRow) {

curSelRow = selRow;

curSelRow.cells[1].bgColor = '#5CB3FF';

curSelRow.cells[2].bgColor = '#5CB3FF';

checkSelectedRow(selGrid, rowIdx);

        }

    }

functioncheckSelectedRow(selGrid, rowIdx) {

for (i = 1; i <selGrid.rows.length; i++) {

if (i == rowIdx) {

selGrid.rows[i].cells[2].children[0].checked = true;

            }

else {

selGrid.rows[i].cells[2].children[0].checked = false;

            }

        }

    }

functiongetSelectedGrid(grdIdx) {

getGridViewControl();

if (null != gridViewCtl) {

returngridViewCtl[grdIdx]

        }

returnnull;

    }

</script>

<asp:GridViewID="grdCustom"runat="server"AutoGenerateColumns="False"GridLines="Both"

OnRowCreated="grdCustom_RowCreated"ShowHeader="false"OnDataBound="grdCustom_DataBound"

BackColor="White"Width="150px"CssClass="CustomGrid">

<Columns>

</Columns>

</asp:GridView>

Select a column of table by using JQUERY

The problem statement was to select a complete column on selection of any cell present in that column.  This can be done by using JQuery.

Created a gridview having following properties:

Now to select a complete column, add path for JQuery. Once that is done, use following JQuery code to select complete column: