How to insert a dropdownlist in the header of a kendo ui grid to adjust its column value

I am trying to insert a dropdownlist on the title of a kendo ui grid. Essentially I am following this sample: http://dojo.telerik.com/@rkonstantinov/afOxa

The following is my code.

<div id="grid"></div>
        <script type="text/x-kendo-template" id="myFileCount">
                <input type="search" id="fileCountValue" style="width: 150px"/>                
        </script>
$("#grid").kendoGrid({
            dataSource: dataSource,

            columns: [
                {
                    hidden: true,
                    field: "ID",

                },
                {
                    field: "FileCount",
                    title: "FileCount",
                    headerTemplate: kendo.template($("#myFileCount").html()),
                    width: 50,
                    sortable: false

                },

            ],
            editable: true
            });

    var gridA = $("#grid").data("kendoGrid");

    gridA.find("#fileCountValue").kendoDropDownList({ //this line throws error

        autoBind: false,
        optionLabel: "All",
            dataSource: [
                { Name: "1", Id: 1 },
                { Name: "2", Id: 2 }
            ],
            dataTextField: "Name",
            dataValueField: "Id",
        change:function() {
            var val = this.value();
            for (var i = 0; i < dataSource.data().length; i++) {
                dataSource.data()[i].Originals = val;
            }
            dataSource.data()[i].Originals = val;
            grid.setDataSource(dataSource);
        }
    });

However, I am getting this error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'find'. I have also indicated the line which throws this error in my code.

Thanks