Metastom 9 - Editable Grid, Add Row, Auto Select First Inputbox

Hi all,

does anyone know a possibility on how to auto select the first input field (row) within an editable grid, after clicking the Add button?

Many of the people that are involved in our processes does not realize that they need to select the created row manually... ;-(

Is the Grid Control also derived from "Telerik" Webcontrols? Perhaps there is an option within their Client SDK.

Thanks a lot.

Bjoern

Find more posts tagged with

BPM

Comments

Bjoern Nettingsmeier

I found no proper/supported solution to highlight the row and deselect the actual row, but with some javascript calls it works. (see below)

var cont = document.getElementById(editGridName+"_Editor_GridData");

var gridRows = cont.getElementsByTagName("tr");

gridRows[yourRowNumber].click();

And now the functionality to focus a column:

var grid = $find("yourgridname");

grid.set_row(yourRowNumber);

grid.set_col(yourColumnNumber);

grid.$2_45(yourRowNumber, yourColumnNumber, null); //Uhhhha black box

Another interesting question is how to react on the "add row" event of the editable grid. Our current solution is to poll the number of rows by a client script in a very short intervall. If the client script recognizes that a new row has been added to the grid it simply uses the calls above to highliht it and focus the column. To get the number of rows of a grid you can use the default script functions that ship with metastorm.

Cheers

Bjoern

Kevin Manuel

Bjoern,

Let's hope that a future release will include automatically setting focus on the first editable column in an editable grid when the add row button is pressed. In the mean time here is the code I created to do what you described. Use at your own risk because as you know commands that are not documented and supported are subject to change in future releases potentially breaking this functionality.

Note: This code applies to a V9.x editable grid

You can initialize the grid by adding the following to the form load client script:

EditGridAddButton_setFocus('Grid1'); //arugument value is the grid's Name property

Add these functions to a client script object:

function EditGridAddButton_setFocus(gridName)
{ //This function should be called on form load to add an event to the editable grid's ADD button
var gridObj = $find(gridName);
var gridAddBtnObj = document.getElementById(gridObj.get_addButtonId());
//timeout needed to allow the row to be created before getting the count
gridAddBtnObj.onclick = function() { setTimeout('EditGridAddButton_onClick("' + gridName + '")','0'); };
}

function EditGridAddButton_onClick(gridName)
{ //This function gets the count of rows and sets focus to the first editable column of the last row
var gridRow = getRowCount(gridName) - 1;
EditGrid_setFocus(gridName, gridRow)
}

function EditGrid_setFocus(gridName, gridRow)
{ //This function sets focus to the first editable column of a row in an editable grid
var gridObj = $find(gridName);
gridObj.set_row(gridRow);
gridObj.set_col(-1);
gridObj.tabulate(true);
}

Alex Fredricks

Kevin code works like a champ. Thanks kevin