[Solved] get_expanded and expandItem do not work correctly

[Nate Pinchot]

I have a grid with a detail table (code below).

If I try to use the expandItem method, it expands the item, but does NOT change the + (plus) image to a - (minus) and if get_expanded is then called on that item it returns false. I am trying to implement a way for the user to click on a row and have the detail rows show. With these methods not working correctly I don't know how it will be possible. Any help would be greatly appreciated.

Here's the grid code

<telerik:RadGrid ID="rgCurrentOrders" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" GridLines="None" PageSize="20" Skin="Telerik">
    <ExportSettings>
        <Pdf FontType="Subset" PaperSize="Letter" />
        <Excel Format="Html" />
    </ExportSettings>
    <PagerStyle Mode="NextPrevAndNumeric" Font-Size="10pt" PageButtonCount="20" />
    <ClientSettings>
        <ClientEvents OnRowClick="rgCurrentOrders_RowClick" OnRowMouseOver="rgCurrentOrders_RowMouseOver" OnRowMouseOut="rgCurrentOrders_RowMouseOut" />
    </ClientSettings>
    <MasterTableView CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst"
        Dir="LTR" Frame="Border" TableLayout="Auto" HierarchyLoadMode="Client" DataKeyNames="order_id">
        <DetailTables>
            <telerik:GridTableView Name="LineItems" DataKeyNames="reference_number" HierarchyLoadMode="Client" Width="100%" runat="server">
                <ParentTableRelation>
                    <telerik:GridRelationFields MasterKeyField="order_id" DetailKeyField="order_id" />
                </ParentTableRelation>
                <Columns>
                    <telerik:GridHyperLinkColumn DataTextField="reference_number" DataNavigateUrlFields="reference_number_link" HeaderText="Ref #" UniqueName="reference_number">
                        <ItemStyle Width="5%" />
                    </telerik:GridHyperLinkColumn>
                    <telerik:GridBoundColumn DataField="web_status_code" HeaderText="Status" UniqueName="web_status_code">
                        <ItemStyle Width="7%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="urgency_description" HeaderText="Urgency" UniqueName="urgency_description">
                        <ItemStyle Width="7%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="manufacturer" HeaderText="Manufacturer" UniqueName="manufacturer">
                        <ItemStyle Width="26%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="model" HeaderText="Model" UniqueName="model">
                        <ItemStyle Width="15%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="part_number" HeaderText="Part Number" UniqueName="part_number">
                        <ItemStyle Width="15%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="work_order_number" HeaderText="WO #" UniqueName="work_order_number">
                        <ItemStyle Width="10%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="equipment_number" HeaderText="Asset Id" UniqueName="equipment_number">
                        <ItemStyle Width="10%" />
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="quantity" HeaderText="Qty" UniqueName="quantity">
                        <ItemStyle Width="5%" />
                    </telerik:GridBoundColumn>
                </Columns>
                <ExpandCollapseColumn Resizable="False" Visible="False">
                    <HeaderStyle Width="20px" />
                </ExpandCollapseColumn>
                <RowIndicatorColumn Visible="False">
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
            </telerik:GridTableView>
        </DetailTables>
        <EditFormSettings>
            <EditColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType">
            </EditColumn>
        </EditFormSettings>
        <Columns>
            <telerik:GridBoundColumn DataField="order_id" HeaderText="Seq #" UniqueName="order_id" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="cust_facility" HeaderText="Facility" UniqueName="cust_facility" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="address_description" HeaderText="Company" UniqueName="address_description" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="company_name" HeaderText="Company" UniqueName="company_name" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="date_entered" HeaderText="Date Entered" UniqueName="date_entered" DataFormatString="{0:d}" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="work_order_number" HeaderText="WO #" UniqueName="work_order_number" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="equipment_number" HeaderText="Asset Id" UniqueName="equipment_number" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="requestor_name" HeaderText="Requestor" UniqueName="requestor_name" CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType" ForceExtractValue="None"></telerik:GridBoundColumn>
        </Columns>
        <ExpandCollapseColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
            Resizable="False" Visible="False">
            <HeaderStyle Width="20px" />
        </ExpandCollapseColumn>
        <RowIndicatorColumn CurrentFilterFunction="NoFilter" FilterListOptions="VaryByDataType"
            Visible="False">
            <HeaderStyle Width="20px" />
        </RowIndicatorColumn>
    </MasterTableView>
</telerik:RadGrid>

Here's the javascript code to reproduce the problem

function rgCurrentOrders_RowClick(sender, eventArgs)
{
    //alert(eventArgs.get_itemIndexHierarchical());

    /*var currentItem = null;

    if (eventArgs.get_itemIndexHierarchical().indexOf(':') > 0)
    {
        var detailTableIndex = eventArgs.get_itemIndexHierarchical().split(':')[0];
        var rowIndex = eventArgs.get_itemIndexHierarchical().split(':')[1].split('_')[1];
        currentItem = sender.get_detailTables()[detailTableIndex].get_dataItems()[rowIndex];
    }
    else
    {
        currentItem = sender.get_masterTableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()];

        alert('currentItem.get_expanded() = ' + currentItem.get_expanded());
        if (!currentItem.get_expanded())
        {
            sender.get_masterTableView().expandItem(eventArgs.get_itemIndexHierarchical());
        }
        else
        {
            alert('collapse');
            sender.get_masterTableView().collapseItem(eventArgs.get_itemIndexHierarchical());
        }
    }*/
    var masterTableView = $find('<%= rgCurrentOrders.ClientID %>').get_masterTableView();
    masterTableView.expandItem(0);
    alert('expanded = ' + masterTableView.get_dataItems()[0].get_expanded());
}

function rgCurrentOrders_RowMouseOver(sender, eventArgs)
{
    var backgroundColor = '';
    var currentRow = null;

    if (eventArgs.get_itemIndexHierarchical().indexOf(':') > 0)
    {
        var detailTableIndex = eventArgs.get_itemIndexHierarchical().split(':')[0];
        var rowIndex = eventArgs.get_itemIndexHierarchical().split(':')[1].split('_')[1];
        currentRow = sender.get_detailTables()[detailTableIndex].get_dataItems()[rowIndex].get_element();
        backgroundColor = '#e6f6e6';
    }
    else
    {
        currentRow = sender.get_masterTableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()].get_element();
        backgroundColor = '#e6eaff';
    }

    if (currentRow != null)
    {
        currentRow.style.cursor = 'pointer';
        currentRow.style.backgroundColor = backgroundColor;
    }
}

function rgCurrentOrders_RowMouseOut(sender, eventArgs)
{
    var currentRow = null;

    if (eventArgs.get_itemIndexHierarchical().indexOf(':') > 0)
    {
        var detailTableIndex = eventArgs.get_itemIndexHierarchical().split(':')[0];
        var rowIndex = eventArgs.get_itemIndexHierarchical().split(':')[1].split('_')[1];
        currentRow = sender.get_detailTables()[detailTableIndex].get_dataItems()[rowIndex].get_element();
    }
    else
    {
        currentRow = sender.get_masterTableView().get_dataItems()[eventArgs.get_itemIndexHierarchical()].get_element();
    }

    if (currentRow != null)
    {
        currentRow.style.backgroundColor = '';
    }
}

Please help.

[Nate Pinchot]

Apparently I was using an old version of the documentation. After installing the most recent hotfix that was uploaded yesterday, I see there is a method called set_expanded. This method now allows the get_expanded method to return the proper value, however the image still does not change. As a side note, the expandItem method still does not work correctly, however, with the set_expanded method this is not an issue for me. I would like to see the image problem corrected however the functionality issue is fixed.

[Yavor]

Hi Nate,

Indeed, the behavior is observed. I have passed the issue on to our developers and they will soon look into it. In the meantime, you can also get a reference to the image and change it. Additional information on this is available in the following sample:
http://www.telerik.com/community/code-library/submission/b311D-mchgd.aspx

I hope this information helps.

Sincerely yours,
Yavor
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center