Expand groups on a RadPivotGrid used as ItemTemplate in a RadListView

7 posts, 0 answers
  1. ITS
    ITS avatar
    7 posts
    Member since:
    Feb 2014

    Posted 21 Jan 2015 Link to this post

    Hi, 
    here my problem:
    I want to load some RadPivotGrid inside a RadListView according to some parameters in the listview's datasource.
    Everything works fine but when I try to expand groups (or something else that cause a postback) the listview is rebinded and the radpivotgrids are reloaded from scratch.
    I have tried to put pivot grid inside a user control surrounded by a radajaxpanel but even if the the ajax panel fires the loading panel associeted the problem persist.
    Could you help me?
    Do you need an example?

    Thanks 
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 26 Jan 2015 Link to this post

    Hello,

    Can you please post your page markup as well as the related code behind, so that we can get known with your approach, revise it locally and do our best to advise you further?

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alessio
    Alessio avatar
    2 posts
    Member since:
    May 2012

    Posted 27 Jan 2015 in reply to Maria Ilieva Link to this post

    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!
  5. ITS
    ITS avatar
    7 posts
    Member since:
    Feb 2014

    Posted 27 Jan 2015 in reply to Alessio Link to this post

    Sorry,
    in the previous reply I used another account...
  6. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Jan 2015 Link to this post

    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.

     
  7. ITS
    ITS avatar
    7 posts
    Member since:
    Feb 2014

    Posted 31 Jan 2015 in reply to Maria Ilieva Link to this post

    Ok.
    Thank you for your support.
    The problem is that in our scenario i have to connect the pivot to an olap cube. As far as I know the radgrid do not support olap connectio, right? Could you suggest an approach to connect radgrid to a cube?
  8. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 Feb 2015 Link to this post

    Hello ,

    Unfortunately the RadGrid control does not provide an option for binding to OLAP Cube. The scenario you want to achieve is not supported in the current version of the  controls as the PivotGrid still doe snot supports editing.
    I would suggests you to revise your logic and redesign the application to use the ListView and the RadPivotGrid controls separately instead of nested in each other.


    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017