Expand/Collapse RadGrid Edit Template using JavaScript

[johnv]

Hey Telerik Community,

I have been asked to implement Expand/Collapse row editing using the OnRowClick client event (ex: click the row once it expands, click the row again it collapses). I have the row expand working nicely.

Ex. Expand:

function RowClick(sender, eventArgs) {
    sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
}

What is its counterpart for collapsing the row using the same click event? I imagine it will have some decision logic, but am not sure what the editItem should do or what the decision tree should contain.

Ex. Expand/Collapse?:

function RowClick(sender, eventArgs) {
    if(?????)
    {
        sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());
    }
    else
    {
        sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical()).????;
    }
}

Has anyone performed this same task? If so what was the solution?

Thanks in advance,

John

[Shinu]

Hello John,


You could access the grid row's indexes using "sender._editIndexes" property in OnRowClick event. Now check EditIndexes values with the clicked row index, if it matches then close the editform using cancelUpdate method.

I hope this suggestion helps.


-Shinu.

[johnv]

Thanks for the clues. It turned out to be exactly what I suspected with the simple addition of your solution. Works great.

function RowClick(sender, eventArgs) {

    var masterTable = sender.get_masterTableView();

    if (sender._editIndexes[0] == eventArgs.get_itemIndexHierarchical()) {

        masterTable.cancelUpdate(eventArgs.get_itemIndexHierarchical());

    }

    else {

        masterTable.editItem(eventArgs.get_itemIndexHierarchical());

    }

}