Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

[Solved] Working example of custom filter UI with Angular?

3 Answers 381 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sergio
Top achievements
Rank 1
Sergio asked on 21 Sep 2014, 06:43 AM
I would like to do almost the same than the filter menu customization example (http://demos.telerik.com/kendo-ui/grid/filter-menu-customization) but with AngularJS. Could you point me to some docs or examples?

Thank you very much.
Sergio

3 Answers, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 23 Sep 2014, 03:15 PM
Hi Sergio,

This could be achieved by specifying the Grid's options inside the Angular scope and use the kendo-grid directive with an options attribute pointing to the actual options object. Here is a simplified example.

Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Myles
Top achievements
Rank 1
answered on 24 Sep 2014, 12:06 PM
The link in the previous post doesn't appear to work
0
Alexander Popov
Telerik team
answered on 24 Sep 2014, 01:00 PM
Hi Myles,

You might have trouble accessing our Dojo application, so I re-hosted the example on jsBin. For convenience I am also attaching the source code here as well: 
<!DOCTYPE html>
<html>
  <head>
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
  </head>
  <body>
    <div id="example" ng-app="KendoDemos">
      <div ng-controller="MyCtrl">
        <kendo-grid id="grid" options="mainGridOptions"></kendo-grid>
      </div>
    </div>
 
    <script>
      function nameFilter(element) {
        element.kendoAutoComplete({
          dataSource: ["Nancy", "Andrew"]
        })
      }
      function nameEditor(container, options) {
        $('<input required data-text-field="FirstName" data-value-field="FirstName" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
        .kendoAutoComplete({
          autoBind: false,
          dataSource: {
            type: "odata",
            transport: {
            }
          }
        });
      }
      angular.module("KendoDemos", [ "kendo.directives" ]);
      function MyCtrl($scope) {
        $scope.mainGridOptions = {
           
          dataSource: {
            type: "odata",
            transport: {
            },
            pageSize: 5,
            serverPaging: true,
            serverSorting: true
          },
          filterable: true,
          pageable: true,
          editable: true,
          columns: [{
            field: "FirstName",
            title: "First Name",
            width: "120px",
            editor: nameEditor,
            filterable: {
              ui: nameFilter
            }
          },{
            field: "LastName",
            title: "Last Name",
            width: "120px"
          },{
            field: "Country",
            width: "120px"
          },{
            field: "City",
            width: "120px"
          },{
            field: "Title"
          }]
        };
      }
    </script>
 
 
  </body>
</html>


Regards,
Alexander Popov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Sergio
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Myles
Top achievements
Rank 1
Share this question
or