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

Problems with the Grid and MVVM

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

No answers yet. Maybe you can help?

Tags
MVVM
Asked by
Casey
Top achievements
Rank 1
Share this question
or