Expand/Collapse 在 Telerik RadGrid 中不工作
Expand/Collapse not working in Telerik RadGrid
我正在使用带有 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?还有什么方法可以使嵌套网格可以滚动吗?
我无法从服务器端执行 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 函数。
我正在使用带有 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?还有什么方法可以使嵌套网格可以滚动吗?
我无法从服务器端执行 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 函数。