Passing multiple parameters to kendoChart seriesClick

[Steve]

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);


[Atanas Korchev]

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

[Steve]

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);

        }

    }

};