Binding kendo template events in angularjs.

See more:

jQuery

AngularJs

Kendo

How's that for a mix: AngularJS, kendo, jQuery & SignalR, but that's not in the scope of this question :)


So, I have my basic app and controller with a kendo template and grid placeholder - This is just PoC atm:

<div data-ng-app="angularApp">

    <div data-ng-controller="kendo-all-passengers-ctrl">
        <script type="text/x-kendo-template" id="all-template">
        <div>
            <h3 class="toolbar-header">All</h3>
            <div class="toolbar">
               <div class="form-group">
                <label class="col-sm-3 control-label" for="category">Search:</label>
                <div class="col-sm-9">
                    <input type="search" class="form-control" id="searchtext"/>
                </div>
               </div>
            </div>
        </div>
        
        </script>

        <div kendo-grid options="gridOptions"></div>
    </div>
</div>

My controller js is pretty long so I have marked sections with comments:

angular.module("angularApp", ["kendo.directives"]).controller('kendo-all-ctrl', function ($scope, $element) {

    //The grid placeholder
    $scope.gridElement = $element.find("div[kendo-grid]");


    //Grid option setup
    var pageSize = 20;
    var sort = [];
    var group = [];
    var filter = [];
    var columns =
    [
            { field: "FullName", title: "Name" },
            { field: "Email", title: "Email" },
    ];

    var transport = {
        signalr: {
            promise: hubPromise,
            hub: hub,
            server: {
                read: "read"
            },
            client: {
                read: "read"
            }
        }
    };

    var dataSource = {
        type: "signalr",
        autoSync: true,
        push: function (e) {
        },
        schema: {
            total: "Total",
            data: "Data",
            model: {
                id: "Id"
            }
        },
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
        pageSize: pageSize,
        transport: transport,
        sort: sort,
        filter: filter,
        group: group,
        change: function (e) {
            var data = this.data();
            console.log(data.length);
        }

    };
    var toolbar = $element.find("#all-template").html();


    $scope.gridOptions = {
        height: 760,
        editable: false,
        selectable: "single",
        columnMenu: true,
        columns: columns,
        dataSource: dataSource,
        toolbar: kendo.template(toolbar),
        parameterMap: function (options) {
            return kendo.stringify(options);
        },
        filterable: true,
        sortable: true,
        pageable: true
    }

    //end grid option setup


    
    //event binding

    angular.element(document).ready(function () {

        if (filter && filter.filters && filter.filters.length)
            $.each(filter.filters, function () {
                var f = this;
                if (f.field && f.field === "FullName" && f.operator === "contains" && f.value) {
                    $scope.gridElement.find("#searchtext").val(f.value);
                }
            });

        $scope.gridElement.find("#searchtext").keyup(function () {
            var value = $(this).val();
            if (value) {
                $scope.gridElement.data("kendoGrid").dataSource.filter({ field: "FullName", operator: "contains", value: value });
            } else {
                $scope.gridElement.data("kendoGrid").dataSource.filter({});
            }
        });
    });

    //end event bindings
});

Before going angular, I would just set the grid options in the doc.ready. I was then able to set up my toolbar event bindings np.

When I changed to Angular, I tried to set the grid options directly from the controller, but the dataSource kept changing: The serverFiltering would go from true to false. All other options remained the same.


I found an example of how Kendo suggest setting the options and this is what I came up with.

Now I have the issue that the searchText element does not exist until after the controller function has run. How do I bind the keyup function now?

Any help is appreciated ^_^
Andy


PS: If you know how to do any of the above better that I have done it then please also post a solution. I may accept it after I have the answer to the above.