Force Client-side Expanded Rows to be Selected

[Rich Coleman]

Is there an example out there that would show me how to force all client-side expanded rows to be selected (meaning, display that row with the rgSelectedRow class) and then when it's collapsed, it of course needs to not be selected.

I already have it set to auto expand and select on rowclick but it needs also auto select/unselect when I use the expand/collapse arrows too (client-side).

TIA!

[Iana Tsolova]

Hello Rich,

When the HierarchyLoadMode is set to Client for the grid MasterTableView, the OnHierarchyExpanded and OnHierarchyCollapsed client-side event are fire for the grid when item is expanded/collapsed. You can handle them and there mark the item as selected/non-selected through the set_selected() property.

Give it a try and let me know if you need further assistance.

All the best,
Iana
the Telerik team

[Rich Coleman]

Yes, that works great....

function OnHierarchyExpanded(sender, args) {
         args.get_gridDataItem().set_selected(true);
}

function OnHierarchyCollapsed(sender, args) {
         args.get_gridDataItem().set_selected(false);
}

<ClientSettings AllowGroupExpandCollapse="True" Selecting-AllowRowSelect="true" EnableRowHoverStyle="true" ClientEvents-OnRowClick="ExpandDetails">
            <ClientEvents OnHierarchyExpanded="OnHierarchyExpanded" OnHierarchyCollapsed="OnHierarchyCollapsed" />
</ClientSettings>

But my ExpandDetails function from the RowClick event messes it all up now for some reason:

function ExpandDetails(sender, eventArgs) {
                var rowIndex = eventArgs.get_itemIndexHierarchical();
                if (rowIndex.indexOf(':') != -1) {
                    rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);
                }
                var tableView = eventArgs.get_tableView();
                var row = tableView.get_dataItems()[rowIndex];
                if (tableView.getCellByColumnUniqueName(row, "ExpandColumn")) {
                    if (row.get_expanded() == false) {
                        row.set_expanded(true);
                        row.set_selected(true);
                        imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
                        imageButton.className = "rgCollapse";
                    }
                    else {
                        row.set_expanded(false);
                        row.set_selected(false);
                        imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
                        imageButton.className = "rgExpand";
                    }
                }
            }

If I click the ExpandCollapse column icon, it works perfectly, but if I click the row to expand/collapse, the selection gets out of sync with the row expand/collapse-state.

[Iana Tsolova]

Hi Rich,

What happens if you set the UseClientSelectColumnOnly property in the grid ClientSettings Selecting setting to true?

Greetings,
Iana
the Telerik team

[Rich Coleman]

I tried it and it doesn't change the behavior at all. 

[Iana Tsolova]

Hi Rich,

Try removing the code for setting the items as selected in the ExpandDetails method.

Greetings,
Iana
the Telerik team

[Rich Coleman]

Nope - still behaves exactly the same as I initially described.

[Iana Tsolova]

Hi Rich,

When client-side selection is enabled for the grid, items are selected on row click. Therefore on row click you cannot deselect item and that is why the selection goes out of sync. To overcome that issue, you should set the UseClientSelectColumnOnly property as I suggested. But for this property to have effect, you should also have a GridClientSelectColumn in the Columns collection.

Please find the attached sample and let me know if it works for you.

All the best,
Iana
the Telerik team