This example demonstrates how to use a page control in a detail row template to switch between detail grids.
Define a master grid and set its SettingsDetail.ShowDetailRow property to true.
settings.SettingsDetail.ShowDetailRow = true;Call the grid's SetDetailRowTemplateContent method and add a page control to the template.
settings.SetDetailRowTemplateContent(container => {
var keyValue = container.KeyValue;
ViewContext.Writer.Write("<div style='padding: 3px 3px 2px 3px'>");
Html.RenderAction("PageControlPartial", new { key = keyValue });
ViewContext.Writer.Write("</div>");
});For every tab page in the page control, call its SetContent method to display the corresponding detail grid.
@Html.DevExpress().PageControl(settings => {
settings.Name = "PageControl" + ViewData["key"];
settings.Width = Unit.Percentage(100);
settings.CallbackRouteValues = new { Controller = "Home", Action = "PageControlPartial", key = ViewData["key"] };
settings.TabPages.Add("Products").SetContent(() => {
Html.RenderAction("ProductsGridViewPartial", new { key = Model.SupplierID });
});
settings.TabPages.Add("Categories").SetContent(() => {
Html.RenderAction("CategoryGridViewPartial", new { key = Model.SupplierID });
});
settings.TabPages.Add("Address").SetContent(() => {
Html.RenderPartial("DetailInformation");
});
}).GetHtml()