I am using a gridview binded to datatable , now i want that when a user gets focus on any textbox inside a gridview , that only particular cell increases its width , for e.g if it was initially 150px , it must expand to 200px , then when a user loses focus (blur in terms of jquery) that particular textbox must set its width to default .... here's my gridview rendered format , i copied from page source :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1" cellspacing="0" class="table table-bordered" id=
"ProjectsGrid" rules="all" style=
"color:Black;background-color:White;border-style:Groove;border-collapse:collapse;">
<tbody>
<tr class="customGridViewHeader" style="color:Black;">
<th scope="col">#</th>
<th scope="col">Project Name</th>
<th scope="col">No of Users</th>
<th scope="col">Block</th>
<th scope="col">Section</th>
<th scope="col">Suburb</th>
<th scope="col">State</th>
<th scope="col">Post Code</th>
<th scope="col">Unit No</th>
<th scope="col">Street No & Name</th>
<th scope="col"> </th>
</tr>
<tr>
<td><label class="control-label">Project <span id=
"ProjectsGrid_ID_0">1</span></label></td>
<td><input class="form-control" id="ProjectsGrid_PName_GRID_0"
name="ProjectsGrid$ctl02$PName_GRID" type="text"></td>
<td><input class="form-control" id="ProjectsGrid_NUsers_GRID_0"
name="ProjectsGrid$ctl02$NUsers_GRID" type="text"></td>
<td><input class="form-control" id="ProjectsGrid_Block_GRID_0"
name="ProjectsGrid$ctl02$Block_GRID" type="text"></td>
<td><input class="form-control" id=
"ProjectsGrid_Section_GRID_0" name=
"ProjectsGrid$ctl02$Section_GRID" type="text"></td>
<td><input class="form-control" id="ProjectsGrid_Suburb_GRID_0"
name="ProjectsGrid$ctl02$Suburb_GRID" type="text"></td>
<td><input class="form-control" id="ProjectsGrid_State_GRID_0"
name="ProjectsGrid$ctl02$State_GRID" type="text"></td>
<td><input class="form-control" id="ProjectsGrid_PCode_GRID_0"
name="ProjectsGrid$ctl02$PCode_GRID" type="text"></td>
<td><input class="form-control" id="ProjectsGrid_Unum_GRID_0"
name="ProjectsGrid$ctl02$Unum_GRID" type="text"></td>
<td><input class="form-control" id=
"ProjectsGrid_Stno_Name_GRID_0" name=
"ProjectsGrid$ctl02$Stno_Name_GRID" type="text"></td>
<td><input class="btn btn-danger btn-block" id=
"ProjectsGrid_Del_GRID_0" name="ProjectsGrid$ctl02$Del_GRID"
type="submit" value="Delete"> <input class=
"btn btn-info tooltips" data-original-title="" id=
"AddGridAddBTN" name="ProjectsGrid$ctl02$AddGridAddBTN" style=
"width:100%;" title="" type="submit" value="Add Row"> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
