Click here to Skip to main content
15,843,727 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:
HTML
<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:

JavaScript
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.
Posted
Updated 1-Sep-15 4:30am
v2

1 solution

Found it ^_^


What I needed was something that told me when the kendo widget was created. Kendo provide this for angularjs:

JavaScript
$scope.$on("kendoWidgetCreated", function (event, widget) {
    //I can also double check that the widget in question is the widget I'm after
    if (filter && filter.filters && filter.filters.length)
        $.each(filter.filters, function () {
            var f = this;
            if (f.field && f.field === "PassengerFullName" && 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: "PassengerFullName", operator: "contains", value: value });
        } else {
            $scope.gridElement.data("kendoGrid").dataSource.filter({});
        }
    });

});
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900