Having trouble binding to local data

[PaulMrozowski]

I'm modifying a bit of code that originally used the MVC extensions to generate a grid to just use the native code instead. I used the demo code for local data as a sample.

I'm not receiving any errors, but it's not actually working either. I'm sure I'm missing something silly but I'm not really seeing it. Maybe someone else will see what I'm not.

Here's what the page basically looks like:

<div id="#Grid"></div>

 

<script type="text/javascript">

        $(document).ready(function() {

            var page = {

                itemUrl: '/Batch/Edit/',

                data: eval('[{"CashReceipt_ID":3,"Unit_FK":1,"PaymentType_FK":1,"Amount":125.00,"AddedOn":"\/Date(1342649795203)\/","AddedBy_User_FK":null,"LastUpdatedOn":null,"LastUpdatedBy_User_FK":null,"Comment":null,"Batch_FK":1,"ItemNum":1,"PaymentNum":"1105","ReceivedFrom":"Paul Sample","Resident_FK":1,"ReceivedOn":"\/Date(1342584000000)\/","UnitNum":"113","PaymentType":"Personal Check","PaymentTypeCode":"PC ","Property_FK":1,"BatchNum":"20120331-A","FirstName":"Paul","MiddleInitial":"A","LastName":"Sample","Salutation":"Mr.","EntityState":2,"EntityKey":{"EntitySetName":"vCashReceipts","EntityContainerName":"FocusEntities","EntityKeyValues":[{"Key":"CashReceipt_ID","Value":3}],"IsTemporary":false}}]'),

                count: 1

            };

 

            var pageHandler = (function () {

                var self = this;

                this.navigatePage = function (e) {

                    var grid = this;

                    grid.select().each(function () {

                        var item = grid.dataItem($(this));

                        window.location.href = page.itemUrl + item.CashReceipt_ID;

                    });

                };

 

                $("#Grid").kendoGrid({

                    change: self.navigatePage,

                    columns: [

                        {

                            title: "Unit Num",

                            field: "UnitNum",

                            encoded: true

                        },

                        {

                            title: "Payment Type",

                            field: "PaymentType",

                            encoded: true

                        },

                        {

                            title: "Payment Num",

                            field: "PaymentNum",

                            encoded: true

                        },

                        {

                            title: "Received From",

                            field: "ReceivedFrom",

                            encoded: true

                        },

                        {

                            title: "Received On",

                            field: "ReceivedOn",

                            format: "{0:MM/dd/yyyy}",

                            encoded: true

                        },

                        {

                            title: "Amount",

                            attributes: { class: "grid-number" },

                            footerAttributes: { class: "grid-number-footer" },

                            footerTemplate: "#=kendo.toString(sum, \u0027C\u0027) #",

                            field: "Amount",

                            format: "{0:c}",

                            encoded: true,

                            aggregate: ["sum"]

                        },

                        {

                            title: "Item Num",

                            attributes: { class: "grid-number" },

                            footerAttributes: { class: "grid-number-footer" },

                            footerTemplate: "#=count#",

                            field: "ItemNum",

                            encoded: true,

                            aggregate: ["count"]

                        }

                    ],   

                    sortable: true,

                    selectable: "Single, Row",

                    scrollable: false,

                    dataSource: {

                        data: page.data,

                        aggregate: [

                            { field: "Amount", aggregate: "sum" },

                            { field: "ItemNum", aggregate: "count" }],

                        schema: {

                            model: {

                                fields: {

                                    CashReceipt_ID: { type: "number" },

                                    Unit_FK: { type: "number", defaultValue: null },

                                    PaymentType_FK: { type: "number" },

                                    Amount: { type: "number", defaultValue: null },

                                    AddedOn: { type: "date", defaultValue: null },

                                    AddedBy_User_FK: { type: "number", defaultValue: null },

                                    LastUpdatedOn: { type: "date", defaultValue: null },

                                    LastUpdatedBy_User_FK: { type: "number", defaultValue: null },

                                    Comment: { type: "string" },

                                    Batch_FK: { type: "number", defaultValue: null },

                                    ItemNum: { type: "number", defaultValue: null },

                                    PaymentNum: { type: "string" },

                                    ReceivedFrom: { type: "string" },

                                    Resident_FK: { type: "number", defaultValue: null },

                                    ReceivedOn: { type: "date" },

                                    UnitNum: { type: "string" },

                                    PaymentType: { type: "string" },

                                    PaymentTypeCode: { type: "string" },

                                    Property_FK: { type: "number", defaultValue: null },

                                    BatchNum: { type: "string" },

                                    FirstName: { type: "string" },

                                    MiddleInitial: { type: "string" },

                                    LastName: { type: "string" },

                                    Salutation: { type: "string" }

                                }

                            }

                        }                   

                    }

                });

                

                return {

                    navigatePage: navigatePage

                };

            })();

        });

 

</script>

The grid doesn't render at all - just an empty page. I'm not seeing any kinds of Javascript errors.

Not shown, but included are a reference to jQuery, kendo.web.min,js, etc. I know those references are correct because I've got another page using the same template that works (the only difference is the grid on that page gets its data via JSON).

[PaulMrozowski]

Totally something stupid. Note the # in the ID of the DIV tag. Uh, yeah, that doesn't belong there.

<div id="#Grid"></div>