Taskbar like in windows in UI for ASP.NET AJAX Window

Morten Bruhn

2 posts

Member since:
May 2006

Posted 06 May 2009 Link to this post

Hi Guys,

I was wondering if any of you have tried to create a "OS" like webpage, with a taskbar showing your open windows??

I am trying to create a smalle web-os for a cms like system, and the "start" button is ready, and the windows open as I want them to - But it gets cluttered - so I was wondering if the windows like taskbar was an option??

Thank you in advance :-)

// Morten

Georgi Tunev

Admin

7207 posts

Posted 07 May 2009 Link to this post

Hello Morten,

We did something similar in our RadWindow default demo. For convenience I attached a small sample that shows how to extend it in order to support multiple opened windows - you could use the code as a base and extend it further to fit your requirements.

All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

radwindowtabstripmdi.zip

Morten Bruhn

2 posts

Member since:
May 2006

Posted 07 May 2009 Link to this post

Hi Georgi,

Thank you, I looked a lot on that example, but decided to use:

RadMenu, RadToolbar and of course RadWindow!

The RadMenu, is the start-button

The toolbar is the taskbar, from wich i create and remove buttons when I open and close a window.

It is actually working great

Everything is clientside right now, but that is just a small detail... ;-)

Thank you again

// Morten

Georgi Tunev

Admin

7207 posts

Posted 07 May 2009 Link to this post

Hi Morten,

I am glad that you managed to implement the desired behavior. If you want, you could share your approach with the rest of our community in the Code Library section - I will be happy to give you some Telerik points in exchange ;)

All the best,
Georgi Tunev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

Tom

8 posts

Member since:
Aug 2010

Posted 09 Mar 2011 Link to this post

Was this code ever shared? I am trying to do something similar.

Georgi Tunev

Admin

7207 posts

Posted 11 Mar 2011 Link to this post

Hi Tom,

I'm afraid Morten did not published such code library, but I suggest to examine our MDI demo that uses the same controls :)

Greetings,
Georgi Tunev
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Tom

8 posts

Member since:
Aug 2010

Posted 11 Mar 2011 Link to this post

Thanks for the code. What I am actually interested in doing is takeing this example http://demos.telerik.com/aspnet-ajax/window/examples/radwindowandmdi/defaultcs.aspx to a point where it ressizes itself based on the size of the viewable area of the webpage. Can you help me with the resize logic?

Thanks in advance.

Tom

8 posts

Member since:
Aug 2010

Posted 11 Mar 2011 Link to this post

Thanks George,

I have been working with this example. Is there a way to make it fit to the size of the viewable screen and resize with when the screen changes?

Thanks
Tom

Georgi Tunev

Admin

7207 posts

Posted 15 Mar 2011 Link to this post

Hi Tom,

We've already talked in the support ticket, but I wanted to post my reply here, as it might be useful for other members of our community.

Basically, you could use this demo in full screen, but the main problem here is that currently you will not be able to restrict the RadWindows in the boundaries of the viewport.
The demo is using an outer DIV that shows the monitor and inside it - another one that is used as RestrictionZone for the RadWindows. In that inner DIV, we have the RadMenu and RadTabStrip. RadMenu. Now, RadMenu supports width in percents. RadTabStrip, also can be used in such scenario, but RadWindow's RestrictionZone can be set one time only and it works with pixels. What will happen is that when you resize the browser, the menu and the tabstrip will be shown properly, but the windows will still be using the fixed values set as size to the RestrictionZone which will lead to poor experience.

We are currently investigating a possible way to rework the restriction zone logic so it can be set dynamically. This task however requires a lot of work and time so it is in our ToDo list for the Q2 release in the summer.

All the best,
Georgi Tunev
the Telerik team

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!

Tom

8 posts

Member since:
Aug 2010

Posted 11 Nov 2011 Link to this post

Was curious if a way to support this was ever found?

Marin Bratanov

Admin

5243 posts

Posted 14 Nov 2011 Link to this post

Hi Tom,

There have been some improvements on the RestrictionZone functionality after the Q2 2011 release, yet not all scenarios are possible. I still advise that you use static restriction zones in order to avoid the situation where the zone is resized so that a RadWIndow is left out of it. You can download the latest build (current official Q2 2011 SP1 with Q3 coming shortly) and test the functionality to see if it fits your needs. Some of the new functionality is that you can set the restriction zone via JavaScript now.

If you need the particular scenario where the RadWindow should always stay in the viewport I advise that you simply set the KeepInScreenBounds property to true - it ensures that at least the top left corner of the RadWindow is in the viewport (if the RadWindow is larger than the viewport) and returns it to an entirely visible position if dragged outside by the user.

Kind regards,
Marin
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now

Tom

8 posts

Member since:
Aug 2010

Posted 01 Dec 2011 Link to this post

Any changes made in the Q3 release to help with this issue?

Marin Bratanov

Admin

5243 posts

Posted 05 Dec 2011 Link to this post

Hi Tom,

The restriction zone functionality was improved in the summer (after the Q2 2011 release) and after the service pack (Q2 2011 SP1) there isn't further development on the matter. If there was it would have been present in the release notes. Also, a modal RadWindow in a restriction zone would stay centered if the browser is resized, yet the limitation that the zone needs explicit dimensions in pixels still remains. You can try it with dynamic width (i.e. in %) and with the KeepInScreenBounds property being set to true and the beforementioned improvements will likely allow you to have the desired behavior. The situation with the height is more complex, as height in percent is inherently difficult in HTML - e.g. it needs all parent elements to have some explicit dimensions in order to work properly. Thus, I would still advise against this approach, yet the best way to see if your requirement is possible is to simply test it in a small page with the latest dlls.

Kind regards,
Marin
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now

Oscar

6 posts

Member since:
Jan 2012

Posted 26 Jan 2012 Link to this post

Hi there, Sorry about my English. I had implement the demo and did work just great but when I did an implementation of an ajaxrequest with ajaxmanager, the tabStrip element fails when reach the repaint command. The error says "this.get_element is null". Can you please tell why is this or how can I do the repaint after de AjaxRequest.

thanks in Advance.

Oscar

6 posts

Member since:
Jan 2012

Posted 26 Jan 2012 Link to this post

Sorry, the code is like follow:

on client side: the function is called from another one tha just did an ajaxrequest to get the URL of the new windo to be oppened

function

Win(pUrl, pTitle, pName) {

var oWnd = radopen(pUrl, pName);

oWnd.center();

oWnd.set_title(pTitle);

oWnd.Argument[95] =

"P";

tabStrip.trackChanges();

var tab = new Telerik.Web.UI.RadTab();

tab.set_text(pName);

oWnd.correspondingTab = tab;

tabStrip.get_tabs().add(tab);

tabStrip.repaint();----->here the error

tab.correspondingWnd = oWnd;

tab.set_imageUrl(pUrl);

tabStrip.commitChanges();

//Select this tab

tab.select();

}

Marin Bratanov

Admin

5243 posts

Posted 30 Jan 2012 Link to this post

Hello Oscar,

I am not sure what the exact change you made is, nor can I be certain which controls you include in the AJAX request, but what I suppose is happening is that the function is called too early, especially if you are disposing the TabStrip. Please examine this article on properly executing a JS function from the server and this one for further information on the Sys.Application.Load event.

What I would generally suggest is that you do not dispose the RadTabStrip and RadWindowManager in your request. I am attaching a simple page that works properly on my end: http://screencast.com/t/J5hz0sYi1. Note how I have modified the openNewWindow() function - it does not need the RadMenu, it takes the arguments you have defined so that it can be reused both from the code-behind and from pure JavaScript. Please use this as basis for implementing this functionality after examining my comments in the code carefully.

Kind regards,
Marin
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now

mdi-with-ajax.zip

Oscar

6 posts

Member since:
Jan 2012

Posted 30 Jan 2012 Link to this post

Thanks for the answer, I found the issue because your help. My TabStrip is inside a div that is display:none and trough an ajaxrequest change the state to display:block and the changes are update by the ajaxmanager. If i take off the tabstrip from the div it works fine. I need to put into the div this tabstrip so can you please tell me some idea about it??.
Thanks in advance.

Marin Bratanov

Admin

5243 posts

Posted 31 Jan 2012 Link to this post

Hi Oscar,

My best suggestion is to remove the div that hides the TabStrip. If there are no windows opened it will not have any tabs so it will be invisible. If there are windows and the tabstrip is still hidden this would decrease usability.

If you still want to keep using it that way I can suggest adding a small timeout when calling the repaint() method, so that the browser has had time to recalculate the display of the rest of the elements:
setTimeout(function ()
{
the rest of the functionality of the openNewWindow() function
}, 0);

All the best,
Marin
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now

Oscar

6 posts

Member since:
Jan 2012

Posted 31 Jan 2012 Link to this post

Hi Marin, thanks a Lot. look a had implement what you suggest and you are right it works

setTimeout(

function () {

tabStrip.trackChanges();

var tabNe = new Telerik.Web.UI.RadTab();

tabNe.set_text(pName);

oWnd.correspondingTab = tabNe;

tabStrip.get_tabs().add(tabNe);

tabStrip.repaint();

tabNe.correspondingWnd = oWnd;

//tabNe.set_imageUrl(pUrl);

tabStrip.commitChanges();

tabNe.select();

}, 0);

But.......When a try to get a window Minimized, the tabStrip selcted tab dont have the reference to de corresponding Window just the last one a Minimize :S Im doing several test to solve it.

Thanks

Marin Bratanov

Admin

5243 posts

Posted 01 Feb 2012 Link to this post

Hi Oscar,

The code in the demo opens a new RadWindow for each tab:

var oWnd = radopen(itemUrl, null);

More information on how this works is available in this help article.

In the code we have been working on you always pass a static name for the RadWindow, thus you do not create a new one for each tab:

var oWnd = radopen(pUrl, pName);

You should either provide a new RadWindow, or check if it already has a corresponding tab - if it does - avoid creating a new tab.

A main issue here is also that you dispose the TabStrip, so the dynamic JavaScrtipt fields (tab.correspondingWnd) are destroyed as well. If you do not dispose it (as I advised in my previous post) things will work without many further modifications. Otherwise I advise that you find a different way to keep this reference, for example a global JS array, but this is a rather uncertain way.

What I advise is that your review your entire logic thoroughly and see where the omissions are and how it can be improved (I mainly advise that you use AJAX only for a button to fetch the URL from the server and leave the TabStrip on the page).

Greetings,
Marin
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 RadControls for ASP.NET AJAX, subscribe to their blog feed now