Problems with the Grid and MVVM

[Casey]

Hi,
I'm very new to the MVVM framework and I'm running into problems with the grid.  If I set a static height for the grid the content area including the scroll bar does not respect the height.  The outline of the grid is correct.  I thought at first it was an issue with the parent div being set to display:none but I removed that and it still happens.  When I first load my grid it is loading one record and the scroll bar appears just slightly larger than that 1 row.  When I click the checkbox above it forces it to load 3 records and the content area/scroll bar remain at the same height and you can scroll it.  If I remove the static height the grid grows as more records are loaded which make the scroll bar useless because the grid is always showing all the records loaded. I have attached a couple of screen shots.  Am I the only one having this issue?

Thanks for any help that can be provided,
Casey


This is a single page app so each page starts off as it's own Div

<div id="CustomerListPage" style="min-width: 500px">

    <div style="width: 600px; margin-left: auto; margin-right: auto; text-align: right">Include Inactive?<input id="IncludeInactiveCheckBox" type="checkbox" data-bind="checked: includeInactive, events: {click: includeInactiveChanged}" /></div>

    <div id="CustomerListGrid" style="width: 600px; height:300px; margin-left: auto; margin-right: auto; margin-top: 10px" data-role="grid" data-selectable="row" data-columns='[{"field":"id", "title":"ID", "width":50}, {"field":"FullName", "title":"Name"}, {"field":"MailingAddressCity", "title":"City", "width":150}, {"field":"MailingAddressState", "title":"ST", "width":50}]' data-bind="source: customers"></div>

</div>

Here is the view model that controls that page

var CustomerListViewModel = kendo.observable({

 

    // properties

    customers: [],

    includeInactive: false,

        

    includeInactiveChanged: function (val) {

        this.load();

    },

     

    load: function () {

        var self = this;

 

        var dto = new DTO(true, '', new Object({ includeInactive: this.get("includeInactive") }));

 

        $.ajax('SysUserWebService.asmx/GetCustomerList', {

            data: JSON.stringify({ dto: dto }),

            type: 'post', contentType: 'application/json',

            success: function (result) {

                if (result.d.success) {

                    self.set('customers', result.d.payload);

                } else {

                    alert(result.d.message);

                };

            }

        });  

    }   

});

My binding occurs with the page's hash change

// routes the application based on hash changes

var HashChange = function () {

    HideAllPages();

 

    var query = location.hash.split("?");

    var hash = query[0];

 

    switch (hash) {

        case '':

            location.hash = '#MainMenu';

            break;

        case '#MainMenu':

            $('#MainMenuPage').show();

            break;

        case '#CustomerList':

            $('#CustomerListPage').show();

            kendo.bind($('#CustomerListPage'), window.CustomerListViewModel);

            window.CustomerListViewModel.load();

            break;

        case '#CrewList':

            $('#CrewListPage').show();

            break;

        case '#History':

            $('#HistoryPage').show();

            break;

    };

 

};