Kendo UI Grid with Searching and Autoscrolling

Will scroll exactly to any row on click, on search, and also select the said row. Search is case insensitive by creating custom expression filter.

HTML

<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.mobile.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.blueopal.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<input id="searchbox" placeholder="Value to search for..."></input>
<button id="searchbtn">Search</button>
<br>
<br>
<div id="grid"></div>

CSS

.km-touch-scrollbar {
    position: absolute;
    visibility: hidden;
    z-index: 200000;
    height: .3em;
    width: .3em;
    background-color: #333;
    -moz-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    opacity: 0;
    -moz-border-radius: .4em;
    -webkit-border-radius: .4em;
    border-radius: .4em;
}
.km-vertical-scrollbar {
    height: 100%;
    right: 1px;
    top: 0;
}
.km-horizontal-scrollbar {
    width: 100%;
    left: 0;
    bottom: 1px;
}
.km-scroll-container {
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}

JavaScript

//custom case insensitive contains filter
$.expr[':'].containsIgnoreCase = function (n, i, m) {
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"],
    lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth", "White"],
    cities = ["Seattle", "Tacoma", "Kirkland", "Redmond", "London", "Philadelphia", "New York", "Seattle", "London", "Boston"],
    titles = ["Accountant", "Vice President, Sales", "Sales Representative", "Technical Support", "Sales Manager", "Web Designer",
        "Software Developer", "Inside Sales Coordinator", "Chief Techical Officer", "Chief Execute Officer"],
    birthDates = [new Date("1948/12/08"), new Date("1952/02/19"), new Date("1963/08/30"), new Date("1937/09/19"), new Date("1955/03/04"), new Date("1963/07/02"), new Date("1960/05/29"), new Date("1958/01/09"), new Date("1966/01/27"), new Date("1966/03/27")];

function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)],
            lastName = lastNames[Math.floor(Math.random() * lastNames.length)],
            city = cities[Math.floor(Math.random() * cities.length)],
            title = titles[Math.floor(Math.random() * titles.length)],
            birthDate = birthDates[Math.floor(Math.random() * birthDates.length)],
            age = now.getFullYear() - birthDate.getFullYear();

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            City: city,
            Title: title,
            BirthDate: birthDate,
            Age: age
        });
    }
    return data;
}

//    bind to 'change' event
function onChangeSelection(e) {
    //calculate scrollTop distance
    var scrollContentOffset =...