Selecting detail table rows when selecting master table row (Client side)

[idwaikat]

Hello all

I have the following issue, I searched the demos and the forum and I didn't find what I want:

I have a grid with master table, and this grid have a detailed table which bounded on demand using DetailTableDataBind, ie when the user clicks expand button the detail table appears filled with data.

Also I have GridClientSelectColumn for the master and the detail (all the columns are coded in ASPX page NOT AutoGenerated)

<telerik:GridClientSelectColumn UniqueName="selColumn">
</telerik:GridClientSelectColumn>

what I need is when the user clicks the Select checkbox for the master table, ALL rows in the detail table must be selected, and when the user clears (deselect) the checkbox of the master table, ALL the rows in the detail table must be cleared. Of course this must happen in client side functions or APIs (JavaScript).

Please help me ASAP..

Thanks in advance

Regards..

[Shinu]

Hello,

Give a try with the following client side code in order to select the detail table rows on selecting the MasterTableview row.

ASPX:

  . . .
<ClientSettings>
    <Selecting AllowRowSelect="true" />
    <ClientEvents OnRowSelected="OnRowSelected" OnRowDeselected="OnRowDeselected" OnRowCreated="OnRowCreated" />
</ClientSettings>
  . . .

JavaScript:

<script type="text/javascript">
function OnRowSelected(sender, args)
{
    var mt = sender.get_masterTableView();
    var item = args.get_gridDataItem();
    if(item.get_nestedViews()[0] != null)
    {
        item.get_nestedViews()[0].selectAllItems();
    }
}
function OnRowCreated(sender, args)
{

}
function OnRowDeselected(sender, args)
{
     var mt = sender.get_masterTableView();
    var item = args.get_gridDataItem();
    if(item.get_nestedViews()[0] != null)
    {
        item.get_nestedViews()[0].clearSelectedItems();
    }
}
</script>

Note: get_gridDataItem() is not directly available on the client unless OnRowCreating/OnRowCreated events are hooked up.

-Shinu.

[idwaikat]

Thanks alot Shinu, it worked like charm.

Regards

[idwaikat]

I am trying to select the parent row when selecting the row of the detail table, (you can say the inverse of the above issue)... when selecting, I used the following snippet:

	function rowSelecting(sender, eventArgs) {
	var masterTable = $find("<%= grid.ClientID %>").get_masterTableView();
	var detailTableView = eventArgs.get_tableView();
	if (detailTableView.get_name() == "detailTableLevel2")  //Name of DetailTable
	{
	masterTable.selectItem(detailTableView.get_parentRow());
	}
	if (detailTableView.get_name() == "detailTableLevel3")  //Name of DetailTable
	{
	detailTableView.selectItem(detailTableView.get_parentView().get_parentRow());
	}
	}

A problem appeared that when combining this code with the code you mentioned above, the problem is that selecting a row in the 2nd level selects all the siblings rows for that row, and the same for the 3rd level.

This happen because the function "OnRowSelected" is called when the function "selectItem" is called.

Please let me know if you need more clarification

Thanks in advance.

[idwaikat]

Any help please...

[idwaikat]

Ticket ID is : 235628

waiting response ASAP

[Yavor]

Hello idwaikat,

The ticket in question has been addressed, and a sample is attached. Please, refer to it for additional information.

All the best,
Yavor
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[The Wire]

I, too, am trying to select the parent row when selecting a row in the detail table without selecting all the other detail table rows. 
Can you post the solution in this thread too or how can I view Ticket ID: 235628?

Thanks

[Yavor]

Hi,

Attached to this message, is a small application, handling the required functionality. I hope it gets you started properly!

All the best,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[The Wire]

Perfect, thanks a lot!

[The Wire]

wait, I ran into one issue.  It worked as expected except I can click anywhere in the mastertable row to select that row.  All the detailtable rows in the nestedview of that mastertable row are selected as expected.  But if I click that same mastertable row again to deselect it, I get this error: Error: 'this._owner._selectedItemsInternal[...].id' is null or not an object.  The mastertable row and all detailtable rows under it are deselected after the error occurs.  How can I get rid of this error? or maybe better yet, how can I prevent a user from selecting the row by clicking anywhere in the row?  Instead the user has to click the checkbox to select it.

Thanks

Here is my script:

var RadGrid;
function GridCreated(sender, args) {
    RadGrid = sender;
    var dataItems = RadGrid.get_masterTableView().get_dataItems();
    var detailTables = RadGrid.get_detailTables();

    for (var i = 0; i < RadGrid.get_detailTables().length; i++) {
        var temp = RadGrid.get_detailTables()[0].get_dataItems();
    }

}
function RowSelecting(sender, args) {
    if (args._domEvent.type == "click") {
        var masterTable = RadGrid.get_masterTableView();
        var detailTableView = args.get_tableView();
        if (detailTableView.get_name() == "Template")  //Name of MasterTable
        {
            args.get_gridDataItem().set_expanded(true);
            var nestedView = args.get_gridDataItem().get_nestedViews();
            nestedView[0].selectAllItems();
        }
        else if (detailTableView.get_name() == "TemplateRows")  //Name of DetailTable
        {
            masterTable.selectItem(detailTableView.get_parentRow());
        }
    }
}
function RowDeSelecting(sender, args) {
    if (args._domEvent.type == "click") {
        var masterTable = RadGrid.get_masterTableView();
        var detailTableView = args.get_tableView();
        if (detailTableView.get_name() == "Template")  //Name of MasterTable
        {
            args.get_gridDataItem().set_expanded(false);
            var nestedView = args.get_gridDataItem().get_nestedViews();
            nestedView[0].clearSelectedItems();
        }
    }
}

[Yavor]

Hi,

I double-tested the application in question. Clicking on a master row selected all detail rows, as expected. Clicking on this row again, however, did not produce any errors/exceptions.
Have you altered the original code/setup in any way? If this is the case, you can open a formal support ticket, and supply a small project, reflecting the most recent code which you have, along with the exception which you mentioned. We will review it locally, and advise you further.

All the best,
Yavor
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.