GridTemplateColumn client-side

[Paul Haines]

We're in the process of converting our website from the old RadControls ASP.NET suite to the new "prometheus" one. On the whole it's gone relatively easy, except for one rather awkward function that we needed.

Basically, we have a RadGrid with a GridTemplateColumn, (plus others but they don't affect this), that contains a RadComboBox. What we needed was when the user presses the [enter] in one RadComboBox, it needs to select a default option in that control and then set focus to the RadComboBox on the following row, (if there is one of course). [This is done client-side for speed reasons, via each RadComboBox's ClientKeyPressing event].
After some research we've updated most of the javascript, except for two aspects;
1) Finding the grid row's index for the RadComboBox that received the [enter] button. The javascript we're currently using is;
             var intRowIndex = pobjCombo.get_inputDomElement().parentNode.parentNode.parentNode.rowIndex - 1;
Where "pobjCombo" is the RadComboBox control that the event's being raised for.

2) Setting focus to the RadComboBox in the next row. Currently we have the following to focus onto the next row's control, which was supplied by someone from telerik;
        var objNextRow = objGrid.get_masterTableView().get_dataItems()[intNextRowIndex];
        // a) Find the necessary cell within this next row.
        var objCell = objNextRow.get_element().cells[intCellIndex];
        // b) Locate the correct combo-box within this cell, which will depend on the type of node this is for.
        var objControl;
        if (objCell.childNodes[0].nodeName == "DIV")
        {
            objControl = objCell.childNodes[0].childNodes[1].childNodes[0];
        }
        else
        {
            objControl = objCell.childNodes[1].childNodes[2].childNodes[0];
        }
        // c) Make sure this new control has focus.
        objControl.focus();
Notes: "intNextRowIndex" is the row's index that we want to select its RadComboBox for, "objGrid" is the RadGrid we're processing for, and "intCellIndex" is the column's index containing the GridTemplateColumn. The latter two of these we're able to find without issue, (for the first see point (1)).

Could you please amend the included javascript code we've been using for the new ASP.NET AJAX RadControls suite.

Paul H

[Iana Tsolova]

Hi Paul,

I followed your scenario and prepared a sample project for you. Please try it on your end and let me know if this works for you and if any issues arise.

Kind regards,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Paul Haines]

Thank you for the response. I only really have one question/problem regarding the following javascript fragment;
if (nextRow.get_element().childNodes[0].tagName == "TD")
{
    nextComboID = nextRow.get_element().childNodes[1].childNodes[0].id;
}
else
{
    nextComboID = nextRow.get_element().childNodes[2].childNodes[1].id;
}

Could you explain what the numbers, ('0', '1' and '2'), mean in each situation.
I'm not sure whether these are anything to do with the column indices? As in our situation, the columns list can vary slightly, (there's an optionally displayed data-bound column before the templated ones, plus another one that's always displayed).
How would the column's position affect the attached javascript code? Especially if the event handler applies to two separate columns, (of the same structure).

Aside from this issue, I have been able to successfully integrate your sample code into our application.

Once more, thank you.
Paul Haines

[Iana Tsolova]

Hello Paul,

Straight to your questions:

- nextRow - this is an object of time GridDataItem
- nextRow.get_element() - this represents the HTML TableRow element - <tr> for the current grid item. Then this <tr> has a number of childNodes, these are mainly the row cell. Indeed in IE the <tr> childNodes are all of type table cells. But in FF there might be additional first and last childNodes and usually the second child item is the first cell. Therefore:
- (nextRow.get_element().childNodes[0].tagName == "TD") - checks if the fist <tr> childNode represents the first cell in this row. And if it is true, then this is the cell for the first grid column.
- nextRow.get_element().childNodes[1] or nextRow.get_element().childNodes[2] - is the second column in the grid for the current row
- nextRow.get_element().childNodes[1].childNodes[0] or nextRow.get_element().childNodes[2].childNodes[1] - this represents the HTML element of the combo box.

Let me know if this helps.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Paul Haines]

So, just in case I've misunderstood your explanation, can I just confirm that the following generalised code fragment would provide the RadComboBox's id for the ith column, (being a calculated number based on certain conditions);

if (nextRow.get_element().childNodes[0].tagName == "TD")
{
    nextComboID = nextRow.get_element().childNodes[i].childNodes[0].id;
}
else
{
    nextComboID = nextRow.get_element().childNodes[i + 1].childNodes[1].id;
}

With the first "0" being a fixed value, regardless of which column is required, and the "+ 1" required for firefox support, and the other numbers as in your sample code.
Thanks for the help,
Paul

[Iana Tsolova]

Hello Paul,

Yes, your observations are right. The preceding code will retrieve the combobox in the first, second, etc. column when i is 0,1,etc. correspondingly.

Let me know if any issues arise.

Greetings,
Iana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.