You can add OTHERS textbox in the grid and hide it, once selected OTHERS show it.
lets say that you have dropdown list in the grid with the followings options:
Code: Select all<select id="Items">
<option value="testItemA">Test Item A</option>
<option value="testItemB">Test Item B</option>
<option value="others">OTHERS</option>
</select>
Your code should be:
Code: Select all
var gridId = "#gridId"; //set to the ID of the grid
var gridItems = "Items"; //set to the ID of the field in grid
var gridItemsIndex = 2; //set to column number in grid of the DROPDOWN that has the OTHERS option
var gridOthersIndex = 3; //set to column number in grid of the OTHERS text field
$(gridId).hideColumn(gridOthersIndex);
$(gridId).getControl(1, gridOthersIndex).hide();
$(gridId).onAddRow(function(aNewRow, oGrid, rowIndex ) {
$(gridId).getControl(rowIndex, gridOthersIndex).hide();
UpdateShowHideOthers(rowIndex);
});
function UpdateShowHideOthers(rowIndex) {
$("#form\\[gridId\\]\\["+rowIndex+"\\]\\["+gridItems+"\\]").change( function() {
setTimeout(function() {
updateSelectedItem();
},0);
});
}
function updateSelectedItem() {
var numRows = $(gridId).getNumberRows();
hasShowOthers = false;
for (var i=1; i <= numRows; i++) {
var getVal = $(gridId).getValue(i, gridItemsIndex);
if(getVal == 'others') {
$(gridId).getControl(i, gridOthersIndex).show();
hasShowOthers = true;
} else {
$(gridId).getControl(i, gridOthersIndex).hide();
}
}
if(hasShowOthers) {
$(gridId).showColumn(gridOthersIndex);
} else {
$(gridId).hideColumn(gridOthersIndex);
}
}
UpdateShowHideOthers(1);