CODEWITHSUNDEEP
javascriptjquerykendo-uikendo-window
osteopathx
osteopathx

Reputation: 79

Kendo UI Window (Content)

Hello I have a query regarding Kendo UI's Window Content. Basically I've picked up a nice little desktop-like (WebOS) setup that I'd like to fiddle around with. The application windows "openWin1" and "openWin2" are defined but are empty and have no content. Where do I add the content? In HTML5 or Javascript?

Any help would be greatly appreciated. I'm quite new to this.

index.html:

<!DOCTYPE html>
<html>
<head>
<title>Masrani Global OS</title>
<link href="styles/kendo.common.min.css" rel="stylesheet">
<link href="styles/kendo.default.min.css" rel="stylesheet">
<link href="css/system.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
<script src="js/kendo.window.min.js"></script>
<script src="custom.js"></script>

</head>
<body>
<div id="titleBar"><a id="openWin1" class="topBtn" href="#">Terminal</a><a id="openWin2" class="topBtn" href="#">Media Player</a></div>
<div id="deskTop"></div>
<div id="statusBar"><ul id="statusBarBtns"><li id="hideAll"><a class="statBarBtn" href="#">Show Desktop</a></li></ul><div id="logText"></div></div>


</body>
</html>

custom.js:

function log(data){
console.log(data);
}

function repositionWindow(elementName){
var thisWindow = $("#" + elementName).closest('.k-window'),
winOffset = thisWindow.offset(),
thisWindowWidth = thisWindow.width()
thisWindowHeight = thisWindow.height()
bottomEdge = winOffset.top + thisWindowHeight
rightEdge = winOffset.left + thisWindowWidth
deskTopOffset = $('#deskTop').offset()
deskTopHeight = $('#deskTop').height();
deskTopBottom = deskTopOffset.top + deskTopHeight - 25
deskTopWidth = deskTopOffset.left + $('#deskTop').width() - 2;
if(thisWindowWidth>$('#deskTop').width()){thisWindow.width($('#deskTop').width());}
if(bottomEdge>deskTopBottom){thisWindow.css('top',winOffset.top - (bottomEdge - deskTopBottom)+'px');}
if(rightEdge>deskTopWidth){thisWindow.css('left',winOffset.left - (rightEdge - deskTopWidth)+'px');}
if(winOffset.top < deskTopOffset.top){ thisWindow.css('top',(deskTopOffset.top+2)+'px');}
if(winOffset.left < deskTopOffset.left){thisWindow.css('left',deskTopOffset.left + 'px');}
if(thisWindow.offset().top<deskTopOffset.top){thisWindow.css('top',deskTopOffset.top+'px');thisWindow.height(deskTopHeight-25);}
}


function createWindow(elementName,Icon,WindowTitle,Width,Height){
$('body').append('<div id="'+elementName+'"></div>');
var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
    $('#statusBarBtns').append('<li id="statbar_'+elementName+'"><a class="statBarBtn" href="#WIN-'+elementName+'">'+WindowTitle+'</a></li>');
    window.kendoWindow({
        width: Width+"px",
        height: Height+"px",
        title: WindowTitle,
        actions: ["Custom","Maximize", "Close"],
        close: function(){
            $('#statbar_'+elementName).remove();
            $("#"+elementName).data("kendoWindow").destroy();
            if(elementName == 'myWindow'){
                $('#openWin1').show();              
            }
            if(elementName == 'myWindow2'){
                $('#openWin2').show();              
            }
        },
        activate: function(e){
            repositionWindow(elementName);
        },
        dragend: function(e){
            repositionWindow(elementName);
        },
        resize: function(e){
            repositionWindow(elementName);
        }
    });
    $("#" + elementName +'_wnd_title').parent().prepend('<img class="windowLeftIcon" src="icons/'+Icon+'.png"/>'); 
    window = $("#" + elementName).data("kendoWindow");
    var vv = window.wrapper.find(".k-i-custom");
    vv.removeClass('k-i-custom').addClass('k-i-minimize2');
    vv.click(function (e) {
        $("#" + elementName).closest('.k-window').hide();
    })
}   
}

$('.statBarBtn').live('click',function(e){
e.preventDefault();
var elementName = $(this).attr('href');
if(elementName == '#') return;
elementName = elementName.replace("#WIN-","");
var wnd = $("#"+elementName).data("kendoWindow");
if(wnd.element.is(":hidden")){
    $("#" + elementName).closest('.k-window').show();
    wnd.toFront();
} else {
    $("#" + elementName).closest('.k-window').hide();
}
});

$(document).ready(function() {
$('#openWin1').click(function(){
    createWindow('myWindow','server','Terminal',500,300);
    $(this).hide();
});

$('#openWin2').click(function(){
    createWindow('myWindow2','server','Media Player',400,200);
    $(this).hide();
});

$('#hideAll').click(function(){
    $(".k-window-content").each(function(){
        $(this).closest('.k-window').hide();
    });
});
});

Upvotes: 1

Views: 5163

Answers (1)

Andrew Trevers
Andrew Trevers

Reputation: 1246

In your JavaScript, a div is created and added to the DOM:

$('body').append('<div id="'+elementName+'"></div>');

The Kendo Window object is then set up on the created div:

var window = $("#" + elementName);
if (!window.data("kendoWindow")) {
    ...
    window.kendoWindow({...});
}

Therefore, any HTML content nested within the created div will be displayed within the Kendo Window, i.e.:

$('body').append('<div id="'+elementName+'"><p>This will appear in the window</p></div>');

Upvotes: 2

Related Questions