This is a migrated thread and some comments may be shown as answers.
Having trouble binding to local data
1 Answer 55 Views
This is a migrated thread and some comments may be shown as answers.
PaulMrozowski
Top achievements
Rank 1
PaulMrozowski asked on 26 Aug 2012, 09:39 PM
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).

1 Answer, 1 is accepted

Sort by
0
PaulMrozowski
Top achievements
Rank 1
answered on 28 Aug 2012, 11:12 PM
Totally something stupid. Note the # in the ID of the DIV tag. Uh, yeah, that doesn't belong there.

<div id="#Grid"></div>
Tags
Grid
Asked by
PaulMrozowski
Top achievements
Rank 1
Answers by
PaulMrozowski
Top achievements
Rank 1
Share this question
or