RadHtmlChart remember series toggles state

3 posts, 1 answers
  1. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 18 Aug 2014 Link to this post

    Hi,

    I have RadHtmlChart inside a RadDock. I've got a refresh button on the RadDock command that refreshes the grid. When you click on the chart series it toggles the bars visibility.

    If the user hide a series then clicks the refresh button on the dock, the hidden series is shown again.

    Is it possible to maintain the visibilty toggle state after a postback? Using the RadPersistenceFramework perhaps?

    Thanks in advance,

    Matt
  2. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Aug 2014 Link to this post

    Hi Matt,

    RadHtmlChart renders entirely on the client, so a postback that includes it is expected to reset its state (the series are only hidden via JavaScript and their state does not travel to the server).

    The RadPersistenceFramework is designed to store certain settings between page visits rather than postbacks and I do not believe it would be suitable for such a task.

    What I can suggest is using the legendItemClick event (http://docs.telerik.com/kendo-ui/api/dataviz/chart#events-legendItemClick) to store the hidden series in a hidden field that can survive postbacks and then when the page loads, to traverse the series and hide them again. If necessary, you can store those hidden field values in custom settings of a persistence manager.

    Here is a small example I prepared for you:

    the chart + hidden field container that makes the DOM traversal easier

    <div class="chartHolder">
        <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400px" Height="400px">
            <PlotArea>
                <Series>
                    <telerik:ColumnSeries Name="first">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="1" />
                            <telerik:CategorySeriesItem Y="2" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="second">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="3" />
                            <telerik:CategorySeriesItem Y="4" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="third">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="5" />
                            <telerik:CategorySeriesItem Y="6" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                    <telerik:ColumnSeries Name="fourth">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="7" />
                            <telerik:CategorySeriesItem Y="8" />
                        </SeriesItems>
                    </telerik:ColumnSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
        <asp:HiddenField runat="server" ID="HiddenField1" />
        <asp:Button ID="Button1" Text="postback" runat="server" />
    </div>

    the scripts that store the series state:

    function pageLoad() {
        var chart = $find("<%=RadHtmlChart1.ClientID%>");
        chart._chartObject.bind("legendItemClick", function (args) { storeHiddenSeries(args, chart); });
        toggleSeriesVisibility(chart);
    }
     
    function storeHiddenSeries(eventArgs, chart) {
        setTimeout(function () {
            var hf = getHiddenFieldFromChart(chart);
            var theSeries = chart._chartObject.options.series;
            var hfVal = "";
            for (var i = 0; i < theSeries.length; i++) {
                if (theSeries[i].visible == false) {
                    hfVal = hfVal + "|" + i;
                }
            }
            hf.val(hfVal);
        }, 0);
    }
     
    function toggleSeriesVisibility(chart) {
        var hf = getHiddenFieldFromChart(chart);
        var hfVal = hf.val();
            var hiddenSeriesIndexes = hfVal.split("|");
            for (var i = 0; i < hiddenSeriesIndexes.length; i++) {
                var seriesIndex = parseInt(hiddenSeriesIndexes[i]);
                if (seriesIndex) {
                    chart._chartObject.options.series[seriesIndex].visible = false;
                }
            }
            chart.repaint();
    }
     
    function getHiddenFieldFromChart(chart) {
        return $telerik.$(chart.get_element()).closest(".chartHolder").find("input[type='hidden']").first();
    }

    You can use this as base and modify it to fit your concrete setup.

    Regards,

    Marin Bratanov
    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. Matt
    Matt avatar
    33 posts
    Member since:
    Nov 2010

    Posted 27 Aug 2014 in reply to Marin Bratanov Link to this post

    Hi Martin,

    Thanks a lot. That's fixed it. A very clever solution. However there is a minor bug in the javascript. In your solution, it would not 'toggle' the first series. I got it to work like this:

    function storeHiddenSeries(eventArgs, chart)
            {
                setTimeout(function()
                {
                    var hf = getHiddenFieldFromChart(chart);
                    var theSeries = chart._chartObject.options.series;
                    var hfVal = "";
                    for (var i = 0; i < theSeries.length; i++)
                    {
                        hfVal = hfVal + "|" + i + ":" + theSeries[i].visible;                  
                    }
                    hf.val(hfVal);
                }, 0);
            }
     
            function toggleSeriesVisibility(chart)
            {
                var hf = getHiddenFieldFromChart(chart);
                var hfVal = hf.val();
                var hiddenSeriesIndexes = hfVal.split("|");
                for (var i = 0; i < hiddenSeriesIndexes.length; i++)
                {
                    var seriesValues = hiddenSeriesIndexes[i];
     
                    if (seriesValues != "")
                    {
                        var itemSettings = seriesValues.split(":");
     
                        var index = parseInt(itemSettings[0]);
                        var isVisible = itemSettings[1];
     
                        chart._chartObject.options.series[index].visible = (isVisible === 'true');
                    }              
                }
                chart.repaint();
            }


    Thanks again,
    Matt
Back to Top