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

[Solved] Window Client API not working!

2 Answers 62 Views

Window

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

This question is locked. New answers and comments are not allowed.

Pedro asked on 21 Oct 2011, 05:26 PM

Hello there,
I'm trying to open an invisible Window through Client-side API, here's my view:

@{

ViewBag.Title = "Home Page";

Layout = null;

}

@using LogosSDK.Entidades

@model IEnumerable<IconeDesktop>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.hay.css").Add("webdesktop.css").Combined(false).Compress(false)))

<script type="text/javascript">

function Pronto()

{

Resize();

$(window).resize(Resize);

$(".atalho").draggable({ containment: "#desktop", grid: [8, 8], scrollSpeed: 10 });

$(".atalho").click(function () {

$(".atalho").css("background-color", "transparent");

$(this).css("background-color", "#F39814");

});

$(".atalho").dblclick(function () {

AbrirNovaJanela(this.id);

});

}

function Resize() {

var heightDesktop = window.innerHeight; //- $("#taskbar").height();

//heightDesktop = heightDesktop - (heightDesktop * 0.02);

$("#desktop").height(heightDesktop + "px");

}

function AbrirNovaJanela(idJanela) {

$('#Janela' + idJanela).data('tWindow').open();

}

</script>

</head>

<body>

<form id="frmDesktop">

<div id="desktop">

<ol id="iconesDesktop">

@foreach (var icone in Model)

{

<div id="Icone@(icone.Id)" title="@icone.ItemMenu.Texto" urlAlvo="@icone.ItemMenu.Acao" class="atalho">

<div class="icone-atalho">

<img title="@icone.ItemMenu.Texto" class="imagem-icone" src="@Url.Content("~/Content/Icones/" + @icone.ItemMenu.Imagem)"/>

</div>

<span class="texto-atalho">@icone.ItemMenu.Texto</span>

</div>

}

</ol>

</div>

<div><input type="button" value="teste" onclick="teste();" /></div>

@{

foreach (var icone in Model)

{

Html.Telerik().Window()

.Name("JanelaIcone" + icone.Id).LoadContentFrom(icone.ItemMenu.Acao.Split('#')[0], icone.ItemMenu.Acao.Split('#')[1])

.Visible(false)

.Render();

}

</form>

@(Html.Telerik().ScriptRegistrar().jQuery(true).jQueryValidation(false).DefaultGroup(group => group.Add("jquery-ui.js").Combined(true).Compress(false)).OnDocumentReady("Pronto();"))

</body>

My problem is:

$('#Janela' + idJanela).data('tWindow') returns an undefined value. What leads me to believe that Telerik Window client-side API hasn't been loaded at all.

But that doesn't make any sense to me, since telerik.window.min.js is properly added on the scripts (I've checked through Firebug)

Any tips on how to solve this? :(

2 Answers, 1 is accepted

answered on 25 Oct 2011, 01:10 PM

Hi Pedro,

Generally, a reason for such problem might be in jQuery's script being loaded twice - could you please check that? If you load jQuery twice, it would clear all our client objects.

If you still experience problems or this is not the case, please provide a sample project so we can investigate further.

Greetings,
Georgi Tunev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now

answered on 25 Oct 2011, 02:42 PM

Hello there!

Solution was achieved by using Telerik Window Client API ONLY

@{

ViewBag.Title = "Home Page";

Layout = null;

}

@using LogosSDK.Entidades

@model IEnumerable<IconeDesktop>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

@*<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Content/webdesktop.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script>*@

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.hay.css").Add("~/Content/webdesktop.css").Combined(false).Compress(false)))

<script type="text/javascript">

function DocumentoPronto()

{

Resize();

$(window).resize(Resize);

$(".atalho").draggable({ containment: "#desktop", grid: [8, 8], scrollSpeed: 10 });

$(".atalho").click(function () {

$(".atalho").css("background-color", "transparent");

$(this).css("background-color", "#F39814");

});

$(".atalho").dblclick(function () {

AbrirNovaJanela(this.id, this.title, $(this).attr("urlAlvo"));

});

}

function Resize() {

var heightDesktop = window.innerHeight; //- $("#taskbar").height();

//heightDesktop = heightDesktop - (heightDesktop * 0.02);

$("#desktop").height(heightDesktop + "px");

}

function AbrirNovaJanela(idJanela, titulo, url) {

// var janela = $('#Janela' + idJanela).data('tWindow');

// janela.center();

// janela.open();

url = "http://localhost" + url + "/";

var novaJanela = $.telerik.window.create({

title: titulo,

contentUrl: url,

modal: false,

resizable: true,

draggable: true,

scrollable: true,

onClose: JanelaFechada

});

novaJanela = $(novaJanela).data('tWindow');

novaJanela.center();

novaJanela.open();

}

function JanelaFechada(e) {

var p = e;

}

</script>

</head>

<body>

<form id="frmDesktop">

<div id="desktop">

<ol id="iconesDesktop">

@foreach (var icone in Model)

{

<div id="Icone@(icone.Id)" title="@icone.ItemMenu.Texto" urlAlvo="@Url.Action(icone.ItemMenu.Acao.Split('#')[1], icone.ItemMenu.Acao.Split('#')[0])" class="atalho">

<div class="icone-atalho">

<img title="@icone.ItemMenu.Texto" class="imagem-icone" src="@Url.Content("~/Content/Icones/" + @icone.ItemMenu.Imagem)"/>

</div>

<span class="texto-atalho">@icone.ItemMenu.Texto</span>

</div>

}

</ol>

</div>

</form>

@(Html.Telerik().ScriptRegistrar().jQuery(true).DefaultGroup(group => group.Add("telerik.common.min.js").Add("telerik.draganddrop.min.js").Add("telerik.window.min.js").Add("~/Scripts/jquery-ui.min.js").Combined(false).Compress(false)).OnDocumentReady("DocumentoPronto();"))

</body>

It's working just fine now :)