This is a migrated thread and some comments may be shown as answers.

Problems with the Grid and MVVM

0 Answers 124 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Casey asked on 04 Sep 2012, 06:11 PM
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,

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>

Here is the view model that controls that page
var CustomerListViewModel = kendo.observable({
    // properties
    customers: [],
    includeInactive: false,
    includeInactiveChanged: function (val) {
    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 {

My binding occurs with the page's hash change
// routes the application based on hash changes
var HashChange = function () {
    var query = location.hash.split("?");
    var hash = query[0];
    switch (hash) {
        case '':
            location.hash = '#MainMenu';
        case '#MainMenu':
        case '#CustomerList':
            kendo.bind($('#CustomerListPage'), window.CustomerListViewModel);
        case '#CrewList':
        case '#History':

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question