Kendo Grid UI

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<script src="http://fonts.googleapis.com/css?family=Roboto+Condensed"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<input id="input" />
<button id='clear'>Clear filter</button>
<button id="btnExport">Download to Excel</button>
<br><br>
    <div id='gridmaster'></div>
    <script id="action-template" type="text/x-kendo-template">
        <i class="fa fa-files-o fa-lg"></i>&nbsp;&nbsp;<i class="fa fa-clipboard fa-lg"></i>&nbsp;&nbsp;<i class="fa fa-trash-o fa-lg"></i>&nbsp;&nbsp;
        <select class="actions">
            <option>Other Action 1</option>
            <option>Action 2</option>
            <option>Action 3</option>
        </select>
    </script>

CSS

body {
    font-family:'Roboto Condensed', sans-serif;
    font-size: 0.77em;
}
button {
    padding: 3px;
}
.actions {
    padding: 2px;
    background: #EEF6FE;
    border: 1px solid #88B3DE;
}
.k-grid th.k-header, .k-grid-header {
    font-weight: bold;
    text-transform: uppercase;
}

JavaScript

$(document).ready(function () {
             var ds = new kendo.data.DataSource({
                 data: createRandomData(50),
                 pageSize: 15
             })

             //create AutoComplete UI component
             var autoComplete = $("#input").kendoAutoComplete({
                 dataSource: ds,
                 pageSize: 15,
                 sortable: true,
                 pageable: true,
                 dataTextField: 'FirstName',
                 filter: "startswith",
                 placeholder: "Search filter..."
             });

             var grid = $('#gridmaster').kendoGrid({
                 dataSource: ds,
                 height: 565,
                 scrollable: true,
                 filterable: {
                     extra: false,
                     operators: {
                         string: {
                             startswith: "Starts with",
                             eq: "Is equal to",
                             neq: "Is not equal to"
                         }
                     }
                 },


                 pageable: true,


                 columns: [{
                     field: 'FirstName',
                     title: 'First Name',
                     width: 100,
                     filterable: {
                         ui: nameFilter
                     }

                 }, {
                     field: 'BirthDate',
                     format: '{0:dd/MM/yyyy}',
                     title: 'DOB',
                     width: 100,
                 }, {
                     field: 'Title',
                     width: 175,
                     filterable: {
                         ui: titleFilter
                     }
                 }, {
                     field: 'City',
                     title: 'City',
                     width: 100,
                     filterable: {
                         ui: cityFilter
                     }
                 }, {
                    ...