Passing multiple parameters to kendoChart seriesClick

3 posts, 1 answers
  1. Steve
    Steve avatar
    3 posts
    Member since:
    Dec 2012

    Posted 28 Dec 2012 Link to this post

    I'd like to pass multiple parameters to the seriesClick event handler, but unsure how to handle the default parameters
    The following works
    ...
    seriesClick: onSeriesClick
    function onSeriesClick(e) {
        var currentDate = new Date(2012, 0, 1);
        currentDate.setMonth(currentDate.getMonth() + e.category - 1);
    however, when I need to pass in the additional parameter fails as it doesn't recognize e
     ...
    seriesClick: onSeriesClick(e, contentItem),
    function onSeriesClick(e, contentItem) {
        var currentDate = new Date(2012, 0, 1);
        currentDate.setMonth(currentDate.getMonth() + e.category - 1);
  2. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 31 Dec 2012 Link to this post

    Hi,

     onSeriesClick(e, contentItem) will actually execute the onSeriesClick function and the result would be used as event handler.

    Basically the event handler can only have a single argument - the one which the widget provides when the event is raised.

    Could you clarify what is currentItem in this case? How is it obtained? Can't you get it in the onSeriesClick function?

    Kind regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Steve
    Steve avatar
    3 posts
    Member since:
    Dec 2012

    Posted 03 Jan 2013 Link to this post

    Hi Atanas,
    This is a LightSwitch HTML Client demo I've been working on.
    Turned out it was a javascript scoping issue I wasn't familiar with. I didn't realize I could add the onSeriesClick in the same function body the KendoUI control was created.
    By defining onSeriesClick within the myapp.Location_View.LocationReportContent_render function, I then had access to contentItem within the onSeriesClick function
    myapp.Location_View.LocationReportContent_render = function (element, contentItem) {
        // A <div> to hold our report
        var locationSeatingChartContainer = $('<div/>');
     
        var customersPerWeekContainer = $('<div/>');
        customersPerWeekContainer.appendTo(locationSeatingChartContainer);
     
        var customersPerMonthContainer = $('<div/>');
        customersPerMonthContainer.appendTo(locationSeatingChartContainer);
     
        locationSeatingChartContainer.appendTo($(element));
     
        DisplayMonthlyChart();
     
        // show the monthly chart based on the current dates
        DisplayMonthlyChart();
     
        function DisplayMonthlyChart() {
            //setup the URI to the report, with the Location Parameter
            var reportsAPI = "../api/Reports/?report=GetSeatedGuestsPerTableTypePerLocationByMonth&Id=" + contentItem.screen.Location.Location_Id +
                "&beginDate=" + contentItem.screen.beginDateRange.toJSON() +
                "&endDate=" + contentItem.screen.endDateRange.toJSON();
     
     
            // Add a Kendo UI BarChart
            customersPerMonthContainer.kendoChart({
                theme: $(document).data("kendoSkin") || "black",
                dataSource: {
                    transport: {
                        read: {
                            url: reportsAPI,
                            dataType: "json"
                        }
                    },
                    group: {
                        field: "TableType_Id"
                    }
                },
                title: {
                    text: "Customers Per Month, By Table Type"
                },
                legend: {
                    position: "bottom"
                },
                seriesDefaults: {
                    type: "column",
                    labels: {
                        visible: true,
                        format: "{0:n0}"
                    }
                },
                // hook up the Click event to drill into weekly reports
                seriesClick: onSeriesClick,
                series: [{
                    field: "Seats",
                    name: "",
                    colorField: "userColor"
                }],
                valueAxis: {
                    labels: {
                        format: "{0}"
                    }
                },
                //TODO: change format to include month/year Jan/08 and rotated vertically for space
                categoryAxis: {
                    field: "Month",
                    labels: {
                        format: "{0:n0}"
                    }
                }
     
            });
            function onSeriesClick(e) {
                var currentDate = new Date(2012, 0, 1);
                currentDate.setMonth(currentDate.getMonth() + e.category - 1);
                var endDate = new Date(currentDate.getFullYear(),
                                        currentDate.getMonth() + 1,
                                        currentDate.getDate(),
                                        currentDate.getHours());
     
                showWeeklyChart(contentItem.screen.Location.Location_Id,
                    currentDate,
                    endDate,
                    contentItem);
            }
        }
    };
Back to Top