Question about working with Hierarchy in client-side

[IT Services]

Hi,

I have a RadGrid with 3 tier Hierarchies using Master and DetailTable setup.

     Master -> 1st Tier Detail Table -> 2nd Tier Detail Table

Each Tier has GridClientSelectColumn.

What I am trying to do is :
Step 1) Only the GridClientSelectColumn of MasterTableView is enabled after data-binding. 
Step 2 ) When the user check the checkbox to select the row in MasterTableView, the checkbox of the corresponding rows in 1st Tier Detail Table become enabled.  When the user select a row in 1st Tier Detail Table, the checkbox of the corresponding rows in 2nd Tier Detail Table become enabled.
Step 3) When uncheck(de-select) a row, all the checkboxs of underneath Detail Table would be clear and become disabled.

I already finish the Step 1.  Is this possible be implement the other steps by RadGrid Client-side APIs? and how?

Thanks

[Veli]

Hi,

Yes, implementing this is quite straightforward in RadGrid. You just have to use the client-side OnRowSelected & OnRowDeselected client events:

<ClientSettings>
    <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
    <ClientEvents OnRowSelected="gridRowSelected" OnRowDeselected="gridRowDeselected" />
</ClientSettings>

function gridRowSelected(sender, args)
{
    args.get_tableView().get_dataItems();
    var item = $find(args.get_id());
    setSelectedRecursive(item, true);
}

function gridRowDeselected(sender, args)
{
    args.get_tableView().get_dataItems();
    var item = $find(args.get_id());
    setSelectedRecursive(item, false);
}

function setSelectedRecursive(item, selected)
{
    var nestedTables = item.get_nestedViews();
    for (var i = 0; i < nestedTables.length; i++)
    {
        var nestedTable = nestedTables[i];
        var childItems = nestedTable.get_dataItems();

        for (var j = 0; j < childItems.length; j++)
        {
            var childItem = childItems[j];
            childItem.set_selected(selected);

            setSelectedRecursive(childItem, selected);
        }
    }
}

Attaching a test page to demonstrate.

Veli
the Telerik team

[IT Services]

Thanks for your help.

It almost complete my work.  However, initially, I make the rows in the DetailsTable are disabled.

When the user select a row in MasterView, I would need to enabled the corresponding rows in DetailsTable.

So, I modified the suggested codes a bit but it doesn't work any more.  Do you know what's wrong?

function setSelectedRecursive(item, selected)
{
    var nestedTables = item.get_nestedViews();
    for (var i = 0; i < nestedTables.length; i++)
    {
        var nestedTable = nestedTables[i];
        var childItems = nestedTable.get_dataItems();

        for (var j = 0; j < childItems.length; j++)
        {
            var childItem = childItems[j];
            childItem.set_selected(selected);
            childItem.set_enabled(selected);   //  this is the new line I added.

            setSelectedRecursive(childItem, selected);
        }
    }
}

[Veli]

You need to enable/disable the select checkbox itself, not the entire table row. To do that, you can use the following javascript in addition to the previous sample:

function setSelectedRecursive(item, selected)
{
    var nestedTables = item.get_nestedViews();
    for (var i = 0; i < nestedTables.length; i++)
    {
        var nestedTable = nestedTables[i];
        var childItems = nestedTable.get_dataItems();

        for (var j = 0; j < childItems.length; j++)
        {
            var childItem = childItems[j];
            childItem.set_selected(selected);
            setSelectCheckBoxAvailablity(childItem.get_element(), selected);

            setSelectedRecursive(childItem, selected);
        }
    }
}

function setSelectCheckBoxAvailablity(tableRow, enabled)
{
    var selectCheckBox = $telerik.findElement(tableRow, "SelectColumnSelectCheckBox");
    if (enabled)
    {
        selectCheckBox.removeAttribute("disabled");
        selectCheckBox.parentNode.removeAttribute("disabled");
    }
    else
    {
        selectCheckBox.setAttribute("disabled", "disabled");
        selectCheckBox.parentNode.setAttribute("disabled", "disabled");
    }
}

Modified test page is attached.

Veli
the Telerik team

[IT Services]

Thanks