NestedView client-side

[Soeren]

Hi

I like the nested view model. However I am not a big fan of the small expand/contract button since I think it basically too small and might be a bit hard for the user to understand that it will expand the details for that record.

Is there a way I can allow the user to expand the row by clicking anywhere on it (possible with client-side selection).

Cheers,
Soeren

[Princy]

Hello Soeren,

You can refer the following Code Library which explains how to Expand/Collapse a grid item when double clicking on the row. Use the same approach and instead of the OnRowDblClick client event, add OnRowClick client event.
Expand/collapse hierarchy client-side on double click

Thanks,
Princy.

[Soeren Pedersen]

Thanks Princy

Sorry for the delay in getting back to you.

I had hoped to be able to do this without changing the loadmode to client as the the size of the details for each record is quite high.

Are there really no way of triggering the expand/collapse without reverting to client mode?

Regards,
Soeren

[Mira]

Hello Soeren,

The desired functionality can be achieved with HierarchyLoadMode="ServerOnDemand" or "ServerBind" as well. In these cases you can handle the RowClick event in the following way:

function RowClick(sender, args) {
    if (sender.get_masterTableView() == args.get_tableView()) {
        var masterTable = sender.get_masterTableView();
        masterTable.fireCommand("ExpandCollapse", args.get_itemIndexHierarchical());
    }
}

Additionally, in order to optimize the performance of the grid I recommend that you wrap the controls in the nestedview template in a panel and switch its visibility on expand/collapse. You can see how this is implemented in the Hierarchy with Templates demo.

I hope this helps.

Best wishes,
Mira
the Telerik team

[Soeren]

Ahh perfect.

Thanks very much for your help.

Regards,
Soeren