Expand/Collapse 在 Telerik RadGrid 中不工作

Question

我正在使用带有 NestedViewTemplate 的 Telerik RadGrid 在我的 MVC 应用程序中显示数据。以下是我的代码

<telerik:RadGrid ID="rgNutritionLog" runat="server" OnInit="rgNutritionLog_Init" 
        OnNeedDataSource="rgNutritionLog_NeedDataSource" OnPreRender="rgNutritionLog_PreRender" OnItemCommand="rgNutritionLog_ItemCommand" OnItemDataBound="rgNutritionLog_ItemDataBound"OnItemCreated="rgNutritionLog_ItemCreated">
        <GroupingSettings CaseSensitive="false" />
        <HeaderStyle Width="120px" CssClass="tableHeader" />
        <ClientSettings AllowColumnsReorder="true" AllowExpandCollapse="true">
            <Selecting AllowRowSelect="true" />
            <Scrolling AllowScroll="true" UseStaticHeaders="true" FrozenColumnsCount="1" />
            <ClientEvents OnGridCreated="GridCreated" OnHeaderMenuShowing="HeaderMenuShowing" />
        </ClientSettings>
        <HeaderContextMenu OnClientItemClosed="OnClientItemClosed" OnItemCreated="HeaderContextMenu_ItemCreated"
            OnClientItemOpening="OnClientItemOpening" BackColor="AliceBlue" BorderColor="Black">
        </HeaderContextMenu>
        <MasterTableView AllowFilteringByColumn="true" ShowFooter="false" ClientDataKeyNames="ID"
            DataKeyNames="ID" TableLayout="Fixed">
            <Columns>
                <telerik:GridBoundColumn DataField="ID" HeaderText="ID"
                    ShowFilterIcon="false" UniqueName="intFunctionalTestId" SortExpression="ID"
                    FilterControlWidth="100px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                    Visible="false">
                    <HeaderStyle Width="120px" />
                </telerik:GridBoundColumn>
                <telerik:GridTemplateColumn DataField="AthleteName" HeaderText="Athlete Name"
                    ShowFilterIcon="false" UniqueName="AthleteName" SortExpression="AthleteName"
                    FilterControlWidth="100px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"
                    Visible="true">
                    <ItemTemplate>
                        <%#Eval("AthleteName") %>
                    </ItemTemplate>
                    <HeaderStyle Width="120px" />
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjProposed" HeaderText="Proposed Energy Including Dietary Fibre (Kj)" ShowFilterIcon="true"
                    UniqueName="EnergyIncludingDietaryKjProposed" SortExpression="EnergyIncludingDietaryKjProposed" FilterControlWidth="80px"
                    AutoPostBackOnFilter="false" CurrentFilterFunction="NoFilter">
                    <HeaderStyle Width="120px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjActual" HeaderText="Actual Energy Including Dietary Fibre (Kj)" ShowFilterIcon="true"
                    UniqueName="EnergyIncludingDietaryKjActual" SortExpression="EnergyIncludingDietaryKjActual" FilterControlWidth="80px"
                    AutoPostBackOnFilter="false" CurrentFilterFunction="NoFilter">
                    <HeaderStyle Width="120px" />
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="CarbohydrtProposed" HeaderText="Proposed Carbohydrates (g)" ShowFilterIcon="true"
                    UniqueName="CarbohydrtProposed" SortExpression="CarbohydrtProposed" FilterControlWidth="80px"
                    AutoPostBackOnFilter="false" CurrentFilterFunction="NoFilter">
                    <HeaderStyle Width="120px" />
                </telerik:GridBoundColumn>
          </Columns>
            <NestedViewSettings>
                <ParentTableRelation>
                    <telerik:GridRelationFields DetailKeyField="ID" MasterKeyField="ID" />
                </ParentTableRelation>
            </NestedViewSettings>
            <NestedViewTemplate>
                <div style="overflow-y: scroll;">
                    <fieldset style="padding: 2px;">
                        <telerik:RadGrid ID="rgAssignedDetails" AutoGenerateColumns="false" runat="server"
                            AllowSorting="true" OnNeedDataSource="rgAssignedDetails_NeedDataSource">
                            <ClientSettings AllowColumnsReorder="true">
                            </ClientSettings>
                            <MasterTableView>
                                <Columns>
                                    <telerik:GridBoundColumn DataField="Meal" HeaderText="Meal" UniqueName="Meal">
                                        <HeaderStyle Width="150px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjProposed" HeaderText="Proposed Energy Including Dietary Fibre (Kj)"
                                        UniqueName="EnergyIncludingDietaryKjProposedMeal">
                                        <HeaderStyle Width="120px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="EnergyIncludingDietaryKjActual" HeaderText="Actual Energy Including Dietary Fibre (Kj)"
                                        UniqueName="EnergyIncludingDietaryKjActual">
                                        <HeaderStyle Width="120px" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="CarbohydrtProposed" HeaderText="Proposed Carbohydrates (g)"
                                        UniqueName="CarbohydrtProposed">
                                        <HeaderStyle Width="120px" />
                                    </telerik:GridBoundColumn>
                            </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>

有什么建议吗？

我该怎么做Expand/Collapse？还有什么方法可以使嵌套网格可以滚动吗？

Answer 1

我无法从服务器端执行 expand/collapse 所以我使用 javascript 执行了以下是解决方案

   var imageButtonPath = null;

    function RowClicked(sender, eventArgs) {
        var grid = sender;

        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);
                imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
                imageButton.className = "rgCollapse";
            }
            else {
                row.set_expanded(false);
                imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
                imageButton.className = "rgExpand";
            }
        }
        GridCreated(sender, eventArgs)
    }

我在行点击事件中调用了这个 javascript 函数。

Expand/Collapse 在 Telerik RadGrid 中不工作

Expand/Collapse not working in Telerik RadGrid

asp.net-mvc

telerik-grid

radgrid