Kendo UI MVVM example with REST URL

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<div id="MemberSongs" >

        <label for="artist">Artist Name:</label>
        <input id="artist" type="text" class="k-textbox" data-bind="value: artistFilter" />
        <label for="title">Song Title:</label>
        <input id="title" type="text" class="k-textbox" data-bind="value: titleFilter" />

<div style="width: 100%">
    <label for="url">Url:</label>
    <input id="url" type="text" readonly="true" data-bind="value: Url" style="width: 90%"/>
</div>

    <div id="SongGrid" style="height: 800px"
        data-role="grid"
        data-bind="source: gridSource">
    </div>
</div>

JavaScript

var viewModel = kendo.observable({
    artistFilter: "",
    titleFilter: "",
    genderFilter: "",
    baseUrl: 'http://www.letsdokaraoke.com/api/MemberSongs?format=json&memberid=1',
    artistFilterUrl: function() {
        if (this.get("artistFilter") == "") {
            return "";
        }
        return "&artist=" + this.get("artistFilter");
    },
    titleFilterUrl: function() {
        if (this.get("titleFilter") == "") {
            return "";
        }
        return "&title=" + this.get("titleFilter");
    },
    Url: function() {
        return this.get("baseUrl") + this.artistFilterUrl() + this.titleFilterUrl();
    },
    gridSource: new kendo.data.DataSource({
        transport: {
            read: {
                url: function() {
                    return viewModel.Url()
                },
                dataType: "jsonp",
                async: false
            }
        },
        schema: {
            data: "songs",
            total: "count",
            model: {
                fields: {
                    Artist: {
                        type: "string"
                    },
                    Title: {
                        type: "string"
                    },
                    Category: {
                        type: "string"
                    },
                    Gender: {
                        type: "string"
                    },
                    CatalogNumber: {
                        type: "string"
                    }
                }
            }
        },
        page: 1,
        pageSize: 50,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    })
});

// Specify grid parameters programmatically
$('#SongGrid').kendoGrid({
    dataSource: viewModel.gridSource,
    height: 600,
    columns: [{
        field: "Artist"},
    {
        field: "Title"},
    {
        field: "Category"},
    {
        field: "Gender"},
    {
        field: "CatalogNumber"}],
   ...