javascriptjqueryangularjskendo-uiangular-kendo

Programmatically Trigger Kendo Chart.seriesClick Event


This is a pretty small and simple question. Looking online I wasn't able to find anything but I would like to be able to unit test our kendo chart and specifically that the seriesClick event works as expected. Problem is I can't seem to find a way to trigger the event. I am trying to target the chart series via jQuery and call .click(). Trying this approach gave me nothing so in a moment of desparation I tried clicking everything

$('*').each(function(){
    $(this).click();
});

With no such luck. Here is the chartOptions snippet

$scope.chartOptions = {
                //...
                // On Click add the criteria to the serach bar.
                seriesClick: function (series) {
                        console.log("seriesClick");
                        //Do stuff here                            
                        $scope.$apply();
                    }
                }
            };

I don't get the console output when I try running the above mentioned jQuery code in my unit test. Here it is.

xit('should update the searchbar when a series item has been clicked', inject(function ($compile, $rootScope, $timeout) {
        var scope = $rootScope.$new();
        //Write out the directive
        //We have a directive that will replace this tag with the kendo-chart directive
        var ele = $compile('<chart></chart>')(scope); 
        angular.element(document.body).append(ele);
        scope.$digest();
        $timeout.flush(0);
        scope = ele.isolateScope();

        console.log('clicking everything');
        $('*').each(function () {
            $(this).click();
        });

I've submitted the same question to the telerik forums hoping to get some advice from the "experts" but I don't get a response nearly as fast as SO.

EDIT I did run across this post in the Telerik forums and am hoping that what I need to do is not "currently not supported out of the box".


Solution

  • After asking on the telerik forums I finally came down to the this answer

     element.mousedown().mouseup()    //Trigger events for Chrome, Firefox and IE9
                .trigger(jQuery.Event("MSPointerDown", { originalEvent: {} })).trigger(jQuery.Event("MSPointerUp", { originalEvent: {} }))  //Trigger event for IE10
                .trigger(jQuery.Event("pointerdown", { originalEvent: {} })).trigger(jQuery.Event("pointerup", { originalEvent: {} })); //Trigger event for IE11
    

    Apparently it listens for the mousedown() mouseup() events. And then after seeing it didnt' work for IE10 and 11 I needed to use another way of triggering mousedown()/mouseup()