Angular Kendo Scheduler过滤器

Question

I'm using the kendo scheduler here in my project, my angular controller make a call to the server to get data, but when i try to filter the events dynamically, the events don't disapear, does anyone have any suggestions on how I can filter my Scheduler data dynamically? Here is my controller

        $scope.exercises = data.Data;

        $scope.result = new kendo.data.ObservableArray([]);
        $scope.transformData = function (response) {
            var event;
            for (var idx = 0, length = response.length; idx < length; idx++) {
                event = response[idx];

                $scope.result.push(new kendo.data.SchedulerEvent({
                    id: event.TaskID,
                    taskId: event.TaskID,
                    ownerId: event.OwnerID,
                    start: kendo.parseDate(event.start),
                    end: kendo.parseDate(event.end),
                    title: event.Title,
                    description: event.Description,
                    isAllDay: event.IsAllDay
                }));
            }
        };

        $scope.schedulerOptions = {
            showWorkHours: false,
            editable: false,
            views: [
                "day",
                "workWeek",
                "week",
                {type: "month", selected: true},
            ],
            resources: [
                {
                    field: "ownerId",
                    title: "Owner",
                    dataSource: [
                        {value: "sazonalidade_padrao", color: "red" },
                        {value: "volumetrica_anual", color: "green" },
                        {value: "flexibilidade_mensal", color: "yellow"},
                        {value: "volumetrica_mensal", color: "orange"}
                    ]
                }
            ],
            dataSource: {
                data: $scope.result,
                filter: {
                    logic: "or",
                    filters: [
                        { field: "ownerId", operator: "eq", value: "sazonalidade_padrao" },
                        { field: "ownerId", operator: "eq", value: "volumetrica_anual" },
                        { field: "ownerId", operator: "eq", value: "flexibilidade_mensal" },
                        { field: "ownerId", operator: "eq", value: "volumetrica_mensal" }
                    ]
                }
            }
        };


        $scope.generateObjToScheduler = function() {
            var i = 0;
            var resultado = [];
            angular.forEach($scope.exercises, function (exercise) {
                if (exercise.Operation.generalStatus == 'aprovado') {
                    i++;
                    var dateStart = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                    var dateEnd = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                    var response = {
                        "TaskID": i,
                        "OwnerID": exercise.OperationFlexibility.type,
                        "Title": exercise.Operation.code+'-'+exercise.OperationFlexibility.name,
                        "Description": exercise.OperationFlexibility.name,
                        "IsAllDay": true,
                        "start": "/Date(" + dateStart + ")/",
                        "end": "/Date(" + dateEnd + ")/"
                    };
                    resultado.push(response);
                }
            });
            $scope.transformData(resultado);
        };
        $scope.generateObjToScheduler();

        $scope.filterFlexibility = function() {
            $scope.schedulerOptions.dataSource.filter.filters.splice(0,1);
        };
    }
]);

I fire filterFlexibility function from a checkbox

Answer 1

I will answer my own question, i find the solution, when you splice an item from a kendo.data.ObservableArray, kendo reorganize all the index of this array, so here is my solution to filter the itens

$scope.exercises = data.Data;
        var i = 0;
        $scope.result = new kendo.data.ObservableArray([]);
        $scope.transformData = function (response) {
            var event;
            for (var idx = 0, length = response.length; idx < length; idx++) {
                event = response[idx];

                $scope.result.push(new kendo.data.SchedulerEvent({
                    id: event.TaskID,
                    taskId: event.TaskID,
                    ownerId: event.OwnerID,
                    start: kendo.parseDate(event.start),
                    end: kendo.parseDate(event.end),
                    title: event.Title,
                    description: event.Description,
                    isAllDay: event.IsAllDay
                }));
            }
        };

        $scope.schedulerOptions = {
            showWorkHours: false,
            views: [
                "day",
                "workWeek",
                "week",
                {type: "month", selected: true}
            ],
            resources: [
                {
                    field: "ownerId",
                    title: "Owner",
                    dataSource: [
                        {text: "sazonalidade_padrao",value: "sazonalidade_padrao", color: "red" },
                        {text: "volumetrica_anual",value: "volumetrica_anual", color: "green" },
                        {text: "flexibilidade_mensal",value: "flexibilidade_mensal", color: "yellow"},
                        {text: "volumetrica_mensal",value: "volumetrica_mensal", color: "orange"}
                    ]
                }
            ],
            dataSource: {
                data: $scope.result
            }
        };


        $scope.generateObjToScheduler = function() {
            var resultado = [];
            angular.forEach($scope.exercises, function (exercise) {
                if (exercise.Operation.generalStatus == 'aprovado') {
                    i++;
                    var dateStart = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                    var dateEnd = moment(exercise.dueDate, 'YYYY-MM-DD').format('x');
                    var response = {
                        "TaskID": i,
                        "OwnerID": exercise.OperationFlexibility.type,
                        "id": exercise.dOperationFlexibilityId,
                        "Title": exercise.Operation.code+'-'+exercise.OperationFlexibility.name,
                        "Description": exercise.OperationFlexibility.name,
                        "IsAllDay": true,
                        "start": "/Date(" + dateStart + ")/",
                        "end": "/Date(" + dateEnd + ")/"
                    };
                    resultado.push(response);
                }
            });
            $scope.transformData(resultado);
        };
        $scope.generateObjToScheduler();

        $scope.filterFlexibility = function(flexibility) {
            var a = 0;
            var j = 0;
            var inArray = false;
            while(a < $scope.result.length){
                if($scope.result[a].ownerId == flexibility){
                    inArray = true;
                    $scope.result.splice(a, 1);
                    a=0;
                }else{
                    a++
                }
            }
            if(inArray == false) {
                for (j; j < $scope.exercises.length; j++) {
                    if ($scope.exercises[j].type == flexibility) {
                        i++;
                        $scope.result.push(new kendo.data.SchedulerEvent({
                            id: i,
                            taskId: i,
                            ownerId: flexibility,
                            start: kendo.parseDate("/Date(" + moment($scope.exercises[j].dueDate, 'YYYY-MM-DD').format('x') + ")/"),
                            end: kendo.parseDate("/Date(" + moment($scope.exercises[j].dueDate, 'YYYY-MM-DD').format('x') + ")/"),
                            title: $scope.exercises[j].Operation.code + '-' + $scope.exercises[j].OperationFlexibility.name,
                            description: $scope.exercises[j].OperationFlexibility.name,
                            isAllDay: true
                        }));
                    }
                }
            }
        };