This is a migrated thread and some comments may be shown as answers.

Expand groups on a RadPivotGrid used as ItemTemplate in a RadListView

6 Answers 108 Views

PivotGrid

This is a migrated thread and some comments may be shown as answers.

6 Answers, 1 is accepted

answered on 27 Jan 2015, 11:22 AM

Hi,
sorry for my late reply. Ok here an extract of the code:
This for the main page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="WebApplication2.test" %><br><br><%@ Register Src="~/controls/ClipPlaceHolder.ascx" TagPrefix="uc1" TagName="ClipPlaceHolder" %><br><br><br><!DOCTYPE html><br><br><html xmlns="http://www.w3.org/1999/xhtml"><br><head runat="server"><br> <meta charset="utf-8" /><br> <meta http-equiv="X-UA-Compatible" content="IE=edge" /><br> <title>TEST</title><br> <meta name="description" content="" /><br> <meta name="viewport" content="width=device-width" /><br><br> <script src="Scripts/jquery-2.1.1.js"></script><br> <br></head><br><br><body ng-app="app"><br> <form runat="server"><br> <telerik:RadScriptManager runat="server"></telerik:RadScriptManager><br> <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server"><br> <AjaxSettings><br> <telerik:AjaxSetting AjaxControlID="ConfirmButton"><br> <UpdatedControls><br> <telerik:AjaxUpdatedControl ControlID="RadListViewNavigation" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl><br> </UpdatedControls><br> </telerik:AjaxSetting><br> </AjaxSettings><br> </telerik:RadAjaxManagerProxy><br> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanelInvisible" runat="server" Transparency="100" /><br> <div ng-controller="RootCtrl"><br> <%--<link rel="stylesheet" href="demo/dashboard/style.css" />--%><br><br> <div gridster="gridsterOptions"><br> <ul><br> <telerik:RadListView ID="RadListViewNavigation" AllowPaging="True" runat="server" Visible="True"

<br>                        allowsorting="true" ItemPlaceholderID="placeHolder" DataKeyNames="Id,Title,Row,Column,SizeX,SizeY"><

br><br> <LayoutTemplate><br> <div runat="server" id="placeHolder"></div><br> </LayoutTemplate><br> <ItemTemplate><br> <li class="dashboard-item" data-title="<%# Eval("

Title") %>" data-widgetid="<%# Eval("Id") %>" data-sizex="<%# Eval("SizeX") %>" data-sizey="<%# Eval("SizeY") %>" data-row="<%# Eval("Row") %>" data-column="<%# Eval("Column") %>" gridster-item="widget<%# Eval("Id") %>"><

br> <div class="box"><br> <div class="box-header dragHeader"><br> <h3><%# Eval("Title") %></h3><br> <div class="box-header-btns pull-right"><br> <a title="settings"><i class="glyphicon glyphicon-cog"></i></a><br> <a title="Remove widget" onclick="RemoveItem(this);"><i class="glyphicon glyphicon-trash"></i></a><br> </div><br> </div><br> <div class="box-content"><br> <uc1:ClipPlaceHolder ID="Test" ChartType='<%# Bind("Id") %>' runat="server" /><br> </div><br> </div><br> </li><br> </ItemTemplate><br><br> </telerik:RadListView><br> </ul><br> </div><br> </div><br><br> <asp:Button ID="ConfirmButton" ClientIDMode="Static" runat="server" OnClick="OnButtonSaveClick" Text="Save" OnClientClick="SaveDashboardLayout();" /><br> <asp:Button ID="AddButton" ClientIDMode="Static" runat="server" OnClick="OnButtonAddClick" Text="Add" /><br> </form><br><br> <script type="text/javascript"><br><br> function RemoveItem(sender) {<br> var li = $(sender).closest(".dashboard-item"); <br> li.remove(); <br> }<br><br> function SaveDashboardLayout() {<br> var items = $.find(".dashboard-item");<br><br> var data = [];<br><br> for (var i = 0; i < items.length; i++) {<br><br> var row = $(items[i]).attr("data-row");<br> var col = $(items[i]).attr("data-column");<br> var x = $(items[i]).attr("data-sizeX");<br> var y = $(items[i]).attr("data-sizeY");<br> var id = $(items[i]).attr("data-widgetId");<br> var title = $(items[i]).attr("data-title");<br><br> data.push([id, title, row, col, x, y]);<br><br><br> }<br> $.ajax({<br> type: 'POST',<br> url: '<%= ResolveUrl("~/test.aspx/search") %>',<br> data: '{"data":"' + data + '" }',<br> contentType: 'application/json; charset=utf-8',<br> dataType: 'json'<br> });<br> }<br> <br> </script><br></body><br><br></html>

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.Services;

namespace WebApplication2

{

public partial class test : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

var source = HttpContext.Current.Session["state"]??GetDataSource();

if (!Page.IsPostBack)

{

RadListViewNavigation.DataSource = GetDataSource();

}

else

{

RadListViewNavigation.DataSource = source;

}

RadListViewNavigation.DataBind();

}

private List<Item> GetDataSource()

{

List<Item> items = new List<Item>();

items.Add(new Item { Id = 1,Title="Title1",SizeX=2,SizeY=1,Row=0,Column = 0 });

return items;

}

[WebMethod(EnableSession = true)]

public static void search(string data)

{

List <Item> items = new List<Item>();

string[] split = data.Split(',');

int index = 0;

for (int i = 0; i < split.Length; i++)

{

int value = index!=1? Convert.ToInt32(split[i]):-1;

switch (index)

{

case 0:

items.Add(new Item{Id = value});

index++;

break;

case 1:

items[items.Count - 1].Title = split[i];

index++;

break;

case 2:

items[items.Count - 1].Row = value;

index++;

break;

case 3:

items[items.Count - 1].Column = value;

index++;

break;

case 4:

items[items.Count - 1].SizeX = value;

index++;

break;

case 5:

items[items.Count - 1].SizeY = value;

index = 0;

break;

}

HttpContext.Current.Session["state"] = items;

}

protected void OnButtonSaveClick(Object sender, EventArgs e)

{

var x = HttpContext.Current.Session["state"];

}

protected void OnButtonAddClick(object sender, EventArgs e)

{

var source = HttpContext.Current.Session["state"] as List<Item>;

if (source != null)

{

source.Add(new Item

{

Id = source.Count + 1,

Title = "Title" + source.Count + 1,

SizeX = 2,

SizeY = 1,

Row = source.Count + 1,

Column = 0

});

RadListViewNavigation.DataSource = source;

RadListViewNavigation.DataBind();

}

public class Item

{

public int Id { get; set; }

public string Title { get; set; }

public int SizeX { get; set; }

public int SizeY { get; set; }

public int Row { get; set; }

public int Column { get; set; }

}

This for the "placeholder" user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ClipPlaceHolder.ascx.cs" Inherits="WebApplication2.controls.ClipPlaceHolder" %>

<asp:PlaceHolder runat="server" ID="ChartPlaceHolder"></asp:PlaceHolder>

using System;

namespace WebApplication2.controls

{

public partial class ClipPlaceHolder : System.Web.UI.UserControl

{

private int _chartType;

public int ChartType { get { return _chartType; } set { _chartType = value; SetChart(value); } }

protected void Page_Load(object sender, EventArgs e)

{

}

private void SetChart(int type)

{

PivotChartView pivot = LoadControl("~/controls/PivotChartView.ascx") as PivotChartView;

ChartPlaceHolder.Controls.Add(pivot);

}

And this for the pivot user control:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PivotChartView.ascx.cs"  Inherits="WebApplication2.controls.PivotChartView" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2014.3.1209.45, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>

<div id="chartContainer">

<asp:Panel ID="PanelPivotGrid" CssClass="panel-pivotgrid" runat="server" Visible="True">

<telerik:RadAjaxPanel ID="radAjaxPanel2" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

<telerik:RadPivotGrid

AllowFiltering="true"

AllowSorting="true"

ID="RadPivotGrid"

PageSize="20"

runat="server"

ColumnGroupsDefaultExpanded="False"

RowGroupsDefaultExpanded="False"

AggregatesPosition="Columns"

OnNeedDataSource="RadPivotGrid_NeedDataSource">

<PagerStyle AlwaysVisible="true" />

<RowHeaderCellStyle Width="100px" />

<Fields>

<telerik:PivotGridRowField DataField="Category" ZoneIndex="0">

</telerik:PivotGridRowField>

<telerik:PivotGridRowField DataField="ProductName" ZoneIndex="1">

</telerik:PivotGridRowField>

<telerik:PivotGridColumnField DataField="Year">

</telerik:PivotGridColumnField>

<telerik:PivotGridColumnField DataField="Quarter" DataFormatString="Quarter {0}">

</telerik:PivotGridColumnField>

<telerik:PivotGridAggregateField DataField="TotalPrice" Aggregate="Sum" DataFormatString="{0:C}">

</telerik:PivotGridAggregateField>

<telerik:PivotGridAggregateField DataField="Quantity" Aggregate="Sum">

</telerik:PivotGridAggregateField>

</Fields>

</telerik:RadPivotGrid>

</telerik:RadAjaxPanel>

</asp:Panel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

</div>

using System;

using System.Collections.Generic;

using Telerik.Web.UI;

namespace WebApplication2.controls

{

public partial class PivotChartView : System.Web.UI.UserControl

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadPivotGrid_NeedDataSource(object sender, PivotGridNeedDataSourceEventArgs e)

{

List<Order> orders = new List<Order>();

for (int i = 0; i < 10; i++)

{

orders.Add(new Order

{

Year = 2014,

Quarter = 3,

ProductName = "ProductName",

Category = "CategoryName",

TotalPrice = 100,

Quantity = 1,

Discount = 2

});

}

RadPivotGrid.DataSource = orders;

}

public class Order

{

public int Year { get; set; }

public int Quarter { get; set; }

public string ProductName { get; set; }

public string Category { get; set; }

public float TotalPrice { get; set; }

public int Quantity { get; set; }

public int Discount { get; set; }

}

Obviously I can not post the actual code, this is an example. To simulate the behavior you must press the Save button on the page Test.aspx and then click Add. When you click Add another pivotgrid is added to the page, but if I try to expand the group nothing happens ...
Thanks for your support!

answered on 30 Jan 2015, 08:50 AM

Hello ,

Thank you for getting back to us and for the provided code.

Unfortunately the required functionality could not be achieved with RadPivotGrid controls.

The data is lost because the RadPivotGrid creates new controls when it is bound during the postback, so the PivotGrid will get the value from the datasource again which will reset it.
You need to use a control that actually supports data editing like RadGrid or RadListView and not RadPivotGrid control.

Regards,
Maria Ilieva
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Expand groups on a RadPivotGrid used as ItemTemplate in a RadListView

6 Answers, 1 is accepted