Kendo UI window not centering for you?

Thursday, March 28, 2013


I recently had to build a new site and I wanted to use Kendo UI.  It's really good stuff and there are plenty of samples.  The thing about learning from samples is that sometimes the sample is incomplete.  Like this weird thing I noticed with the code I downloaded from https://github.com/telerik/kendo-music-store.  When you click an item in the ListView it opens detail in a Kendo Window.  Pretty cool, but it's not centered.  It puts the window at the bottom of the window for some reason.


Let's look at the code (/Scripts/App/store.js).


_openWindow = function (template, viewModel) {
            // Create a placeholder element.
            var window = $(document.createElement('div'));
 
            // Apply template to the placeholder element, and bind the viewmodel.
            var templateHtml = $(template).html();
            window.html(kendo.template(templateHtml)(viewModel));
            kendo.bind(window, viewModel);
 
            // Add window placeholder to the body.
            $('body').append(window);
 
            // Turn placeholder into a Window widget.
            window.kendoWindow({
                width: config.albumDetailsWindowWidth,
                title: viewModel.data.Title,
                resizable: false,
                close: function () {
                    // When the window is closed, remove the element from the document.
                    window.parents(".k-window").remove();
                }
            });
 
            // Center and show the Window.
            window.data("kendoWindow").center();
            window.data("kendoWindow").open();
        },

First, you can chain the center and open together.  Does this fix the centering issue? No.  But it's less code.

No comments:

Post a Comment

 
Copyright © Aaron Stanley King