Support Dept

Embedding YouTube video in RadListView for ASP.NET AJAX

Support Dept — Thu, 28 Jan 2010 15:26:37 GMT

Have you ever thought of embedding a YouTube video in the context of a data-bound control? Recently, a client of ours asked for such a demo and this inspired me to create a code-library project that features this scenario and uses RadListView for ASP.NET AJAX as ‘videos host’. Depending on your goal, you can control the player via JavaScript code or you can just embed a static object. In the latter case you will need something like this:

    1: <object width="425" height="344">     2: <param name="movie" value="http://www.youtube.com/v/QT0e5XqNZdo&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b"></param>     3: <param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>     4: <embed src="http://www.youtube.com/v/QT0e5XqNZdo&hl=en_US&fs=1&rel=0&color1=0x5d1719&color2=0xcd311b" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>     5: </object> 

In some cases you may need to use the “chromeless” player in order to customize the default appearance and to gain control over some of the YouTube player's functions via JS – this is a bit more tricky because you should cue the video in the onYouTubePlayerReady handler for each separate player. As we know, it is not feasible to evaluate the url directly (via server-side expressions) because you will end up with all players playing the same (last) video. This is why I decided to serialize a basic array to store the item indices along with the corresponding urls. This approach is fast and easy enough so everyone can take advantage of it.

Download this demo

Daniel

Choose your preferred data layout with RadListView for ASP.NET AJAX

Support Dept — Tue, 27 Oct 2009 11:26:00 GMT

Did you hear the bells and whistles which accompanied the public Q3 2009 Beta release of RadControls for ASP.NET AJAX? If not, I think it is time to explore it and get acquainted with the new controls/features that we will be introducing for the official Q3 2009 release expected in the first week of November.

One of the new controls that I encourage you to play with is RadListView for ASP.NET AJAX. If you allow me to quote one of our clients who already gave the Q3 2009 Beta a spin, it is "something like a rotator on steroids" which allows you to choose from a set of commonly used predefined layouts as well as to define your custom type of layout to visualize data. Inspired by the MS ListView control, it combines the template mechanism and presentation/editing/selection/grouping features of the Microsoft control along with integrated sorting, paging, etc. capabilities. Adding images to RadListView's items? Not a problem - simply embed them in the item templates and specify local path or a field in the database from where they will be streamed in binary format and you should be done.

If I already tempted you to see some examples and learn more about this new product, go straight to the Q3 Beta online demos - below are a couple of screenshots that shows the beauty:

What, did I say grouping? Well, if you currently cannot find a demo on this subject, fear not - the feature is in the works and will be announced for the official release of the product. For a sneak peak see the screenshot below:

But wait, there is more! Another new control - RadDataPager - is the little fellow which can be easily plugged to RadListView and perform the navigation between listview's items for you. Incorporating different pager fields for data navigation(next/prev/first/last sets of buttons, numbers, page size combo, numeric field with Go button, slider pager, etc.) as well as predefined pager modes easily configurable from design-time make the usage of this control a breeze.

And let me share a secret - its future interoperability with RadGrid for ASP.NET AJAX (as an external pager) is not far away..

Already got your attention? Get your hands on the Q3 2009 Beta release of RadControls for ASP.NET AJAX now and do not hesitate to share your feedback with us - we are listening as always.

Stefan

Using jQuery to customize RadScheduler

Support Dept — Tue, 14 Jul 2009 09:24:03 GMT

Telerik RadControls' for ASP.NET AJAX rendering is quite jQuery friendly. This is because almost all important html elements are tagged by a css class and therefore can be easily accessed using jQuery. In this blog post I have collected various cases from our forums and ticketing system on using jQuery to customize RadScheduler. Special thanks to all customers or visitors who raised those questions.

Q: “I have a scheduler in timeline view showing six weeks of information. Is it possible to change the header row background for the first two weeks?”

A: The first step in finding a solution is to examine the rendered html using Firebug, IE Developer Tools, or any other similar tool. You will notice that the date headers are rendered in <th> tags of a table with a css class rsHorizontalHeaderTable:

    <table style="width: 100%; height: 25px" class="rsHorizontalHeaderTable" border="0"  
         cellspacing="0" cellpadding="0">   
         <tbody>  
             <tr>  
                 <th>  
                     <span>7/14/2009</span>  
                 </th>  
                 <th>  
                     <span>7/21/2009</span>  
                 </th>  
                 <th>  
                     <span>7/28/2009</span>  
                 </th>  
                 <th>  
                     <span>8/4/2009</span>  
                 </th>  
                 <th>  
                     <span>8/11/2009</span>  
                 </th>  
                 <th>  
                     <span>8/18/2009</span>  
                 </th>  
             </tr>  
         </tbody>  
     </table>  
  

Therefore, we access the collection of <th> elements of a table with the specified class name with: $("table.rsHorizontalHeaderTable th"). Then we use the slice(0, i) method to take the first i elements starting with the first. Here is the complete code:

    <script type="text/javascript">        
        window.$ = $telerik.$;        
        function pageLoad()         
        {        
           var scheduler = $find('<%=RadScheduler1.ClientID %>');        
           if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.TimelineView)         
           {        
               //2 weeks out of 6 weeks view is one third of header cells, hence:        
               var i = this.$("table.rsHorizontalHeaderTable th").length / 3;        
               $("table.rsHorizontalHeaderTable th").slice(0, i).css("background", "orange");                      
           }        
        }        
    </script>    
  

Q: “By default, clicking on a date number in Month view switches to Day view of the clicked date. How can I disable this functionality?”

A: We find all elements that have the rsDateHeader css class and disable their click and doubleclick events.

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">   
         <script type="text/javascript">   
             window.$ = $telerik.$;   
   
             function pageLoad() {   
                 var scheduler = $find("<%= RadScheduler1.ClientID %>");   
                 if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.MonthView) {   
                     $(".rsDateHeader").each(function() {   
                         $(this).click(doNothing).dblclick(doNothing);   
                     });   
                 }   
             }   
   
             function doNothing(e) {   
                 if (!e) e = window.event;   
   
                 e.cancelBubble = true;   
                 if (e.stopPropagation) {   
                     e.stopPropagation();   
                 }   
             }   
         </script>   
     </telerik:RadScriptBlock>  
  

Q: "How can i scroll to the first appointment in a dayview. The dayview allways beginns at the first position. I want to scroll to automatically to the first appointment."

A: The following code finds the first appointment and calls the scrollIntoView() method:

    <script type="text/javascript">     
 function pageLoad(){     
     $ = $telerik.$;     
     var scheduler = $find("<%= RadScheduler1.ClientID %>");     
     var firstApp = $(".rsApt")[0];     
     if (firstApp)      
         firstApp.scrollIntoView();     
 }     
 </script>     
   
  

Common RadWindow issues and their solution

Support Dept — Thu, 04 Jun 2009 07:21:54 GMT

The RadWindow control is part of the Telerik’s RadControls for ASP.NET AJAX suite and is intended to replace the standard browser’s popup (window.open()). Since the control is based on an IFRAME, it behaves just like one – basically, whatever can be done with an IFRAME, can be achieved with RadWindow as well. This fact is useful when you investigate a reason for some problem related to the RadWindow control. Just replace the RadWindow with a standard IFRAME or browser’s popup and see how your application will behave in this case. If the problem still exists, then it is not related to the RadWindow control but is most probably a default browser’s behavior or a problem in the used logic itself.

Below you can see several common cases that occur when RadWindow is used and what is the best approach in such scenarios.

Video / audio keep playing after window is closed
This happens because by default, when a RadWindow is closed, its object is not destroyed but remains hidden on the page so it can be quickly called again when needed. There are 2 ways to avoid that issue:
1. Set DestroyOnClose=true. See p.5 for more details on the subject.
2. Use the OnClientClose event handler that is called every time when a RadWindow is closed. There you could use setUrl() client-side method to change the content page’s Url which will stop the media as well.
  e.g.
  <script type="text/javascript">
      function ShowWindow()
      {
          var oWnd = window.radopen('Dialog1.aspx', 'window1'); //Opens the window
          oWnd.add_close(OnClientClose); //set a function to be called when RadWindow is closed
      }
      function OnClientClose(oWnd)
      {
          oWnd.setUrl("about:blank"); // Sets url to blank
          oWnd.remove_close(OnClientClose); //remove the close handler - it will be set again on the next opening
      }
  </script>
  
  <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
  </telerik:RadWindowManager>
  <button onclick="ShowWindow(); return false;">
      open RadWindow</button>
RadMenu overlaps RadWindow
This behavior is expected – by design RadMenu has a higher z-Index value than the RadWindow control. This is needed in common cases where a RestrictionZone is used and the RadMenu control is above that zone. To render the RadWindow control above RadMenu, all you need to do is to change its z-Index, according to this help article. There is a KB article on the same subject as well.
Using OffsetElementID and Top / Left properties together
When OffsetElementID is specified, Top and Left are calculated towards that element's top left corner. If OffsetElementID is not specified, Top and Left are calculated towards the page's top left corner. Top and Left can be used along with the RestrictionZoneID property as well - if the RestrictionZoneID property is set, Top and Left will be calculated towards the top left corner of the restriction zone.
OpenerElementID is not working as expected in some scenarios
By using the OpenerElementID property it is possible to specify the id of an HTML element that, when clicked, will automatically open the corresponding RadWindow object. The opener can be any element on the page that has an ID attribute - the property expect a client ID, so if you are setting it to a server element, you need to use its ClientID (OpenerElementID="<%# ServerButton.ClientID %>" ).

Note that if you set this property to a postback element like asp:Button control, the server-side click event of that element will not fire. That is why we recommend using OpenerElementID in simple scenarios only. OpenerElementID is not suitable for ajaxified and databinding scenarios as well. For example if you have a standard asp:Repeater control or RadGrid where you need to open RadWindows by clicking some elements in the columns, you will have to declare number of RadWindows equal to the number of the opener elements in the grid. In such scenarios it is recommended to use RadWindow's client-side or server-side API.
Once a RadWindow is closed, it “loses” all its settings (width, height, modality, etc.)
This could happen if you have set DestroyOnClose to true. When this property is set to true, RadWindow’s object will be destroyed once the window is closed. This, however, means that you will not be able to open that same RadWindow again until the whole page is reloaded. In such scenario, it will be best to either set all needed properties (width, height, modality, etc.) to the RadWindowManager or as an alternative – to use the client-side API and set them when opening the RadWindow.

More information about the RadWindow control is available in the control’s documentation – check the Programming section for more tips and tricks.

Georgi Tunev

Telerik

Executing JavaScript function from server-side code

Support Dept — Tue, 05 May 2009 09:43:26 GMT

This is a pretty common scenario when working with WebForms. There are many ways to achieve the desired result, but they have one thing in common – you should make sure that the controls are fully loaded in the page before trying to get a reference to them and use them in your JavaScript code.

In ASP.NET it is pretty straightforward to do that. For example you could use a label:
ASPX
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
    function calledFn()
    {
        alert("code fired");
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Button ID="Button1" runat="server" Text="Run JavaScript Code" OnClick="Button1_Click" />
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </form>

C#
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = "<script type='text/javascript'>calledFn()</script>";
}

VB.NET
Protected Sub Button1_Click(sender As Object, e As EventArgs)
Label1.Text = "<script type='text/javascript'>calledFn()</script>"
End Sub

As an alternative, you could use Literal, Page.RegisterStartupScript, Page.RegisterClientScriptBlock or if you are using ASP.NET 2.x - ClientScriptManager.RegisterStartupScript / ClientScriptManager.RegisterClientScriptBlock methods.

Note: The main difference between RegisterClientScriptBlock and RegisterStartupScript methods is that RegisterClientScriptBlock places the JavaScript directly after the opening <form> element in the page while RegisterStartupScript inserts the code at the end of the page, right before the closing </form> tag.

In ASP.NET AJAX environment however, you should take into consideration the fact that the ASP.NET AJAX controls are loaded after window.onload is fired. You can verify this by putting some ASP.NET AJAX controls (I would personally recommend using RadControls for ASP.NET AJAX ;) ) and then examine the HTML of the rendered page.

Again, there are several ways to ensure that the controls are loaded on the client before trying to use them. If you want to use the RegisterStartupScript() method, I would recommend to check the ASP.NET AJAX’s Sys.Application.Load event. This event is raised after all scripts have been loaded on the page and the controls have been created and initialized. You need to make sure however, that the code that you will insert in the Load event will be executed only once and then removed, otherwise it will be called after every Ajax callback. For example you could use the following logic:
function f()
{
//code
Sys.Application.remove_load(f);
}
Sys.Application.add_load(f);

For example let’s call the RadWindow’s radalert() function after a postback by using the code above

ASPX:
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    </telerik:RadWindowManager>
    <asp:Button ID="Button1" Text="Postback and show RadAlert" runat="server" OnClick="Button1_Click" />
</form>

C#
protected void Button1_Click(object sender, EventArgs e)
{
string radalertscript = "<script language='javascript'>function f(){radalert('Welcome to RadWindow for <strong>ASP.NET AJAX</strong>!', 330, 210); Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "radalert", radalertscript);
}

VB.NET
Protected Sub Button1_Click(sender As Object, e As EventArgs)
Dim radalertscript As String = "<script language='javascript'>function f(){radalert('Welcome to RadWindow <strong>ASP.NET AJAX</strong>!', 330, 210); Sys.Application.remove_load(f);}; Sys.Application.add_load(f);</script>"
Page.ClientScript.RegisterStartupScript(Me.[GetType](), "radalert", radalertscript)
End Sub

If you are working with Ajax callbacks however, I would suggest to use asp:Scriptmanager’s RegisterStartupScript() method.

ASPX
<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
    </telerik:RadWindowManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:Button ID="Button1" Text="CallBack and show RadAlert" runat="server" OnClick="Button1_Click" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

C#
protected void Button1_Click(object sender, EventArgs e)
{
string scriptstring = "radalert('Welcome to Rad<strong>Window</strong>!', 330, 210);";
ScriptManager.RegisterStartupScript(this, this.GetType(), "radalert", scriptstring, true);
}

VB.NET
Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
Dim scriptstring As String = "radalert('Welcome to Rad<strong>Window</strong>!', 330, 210);"
ScriptManager.RegisterStartupScript(Me, Me.[GetType](), "radalert", scriptstring, True)
End Sub

More information on this subject can also be found in these KB articles (they are about RadWindow but use general approaches that can be applied to different scenarios:

And in the following MSDN article: Using JavaScript Along with ASP.NET 2.0 (by Bill Evjen)

In conclusion: Calling JavaScript function from server is a relatively easy task. Just make sure that:

The code is actually inserted on the page – the easiest way is to put a simple alert() and check if it is fired.
The controls are rendered on the page before referencing them in your JavaScript function
If you are manually inserting the <script> tags – that you have set either the type (type=’text/javascript’) or the language (language=’javascript’) attributes.

Georgi Tunev
Telerik

XML Syntax Rules

Support Dept — Fri, 03 Apr 2009 10:31:46 GMT

All XML Elements Must Have a Closing Tag

In HTML, you will often see elements that don't have a closing tag:

    <p>This is a paragraph  
 <p>This is another paragraph

In XML, it is illegal to omit the closing tag. All elements must have a closing tag:

    <p>This is a paragraph</p>  
 <p>This is another paragraph</p>

Note: You might have noticed from the previous example that the XML declaration did not have a closing tag. This is not an error. The declaration is not a part of the XML document itself, and it has no closing tag.

XML Tags are Case Sensitive

XML elements are defined using XML tags.
XML tags are case sensitive. With XML, the tag <Letter> is different from the tag <letter>.
Opening and closing tags must be written with the same case:

    <Message>This is incorrect</message>  
 <message>This is correct</message>

Note: "Opening and closing tags" are often referred to as "Start and end tags". Use whatever you prefer. It is exactly the same thing.

XML Elements Must be Properly Nested
In HTML, you will often see improperly nested elements:

    <b><i>This text is bold and italic</b></i>  
  

In XML, all elements must be properly nested within each other:

    <b><i>This text is bold and italic</i></b>  
  

In the example above, "Properly nested" simply means that since the <i> element is opened inside the <b> element, it must be closed inside the <b> element.

XML Documents Must Have a Root Element
XML documents must contain one element that is the parent of all other elements. This element is called the root element.

    <root>  
   <child>  
     <subchild>.....</subchild>  
   </child>  
 </root>   
   
  

XML Attribute Values Must be Quoted
XML elements can have attributes in name/value pairs just like in HTML.
In XML the attribute value must always be quoted. Study the two XML documents below. The first one is incorrect, the second is correct:

    <note date=12/11/2007>  
 <to>Tove</to>  
 <from>Jani</from>  
 </note>  
   
  

    <note date="12/11/2007">  
 <to>Tove</to>  
 <from>Jani</from>  
 </note>  
   
  

The error in the first document is that the date attribute in the note element is not quoted.

Entity References

Some characters have a special meaning in XML.
If you place a character like "<" inside an XML element, it will generate an error because the parser interprets it as the start of a new element.
This will generate an XML error:

    <message>if salary < 1000 then</message>  
  

To avoid this error, replace the "<" character with an entity reference:

    <message>if salary &lt; 1000 then</message>  
  

There are 5 predefined entity references in XML:

<	<	less than
>	>	greater than
&	&	ampersand
'	'	apostrophe
"	"	quotation mark

Note: Only the characters "<" and "&" are strictly illegal in XML. The greater than character is legal, but it is a good habit to replace it

Comments in XML

The syntax for writing comments in XML is similar to that of HTML.

With XML, White Space is Preserved
HTML reduces multiple white space characters to a single white space:

HTML:	Hello my name is Tove
Output:	Hello my name is Tove.

With XML, the white space in your document is not truncated.

XML Stores New Line as LF
In Windows applications, a new line is normally stored as a pair of characters: carriage return (CR) and line feed (LF). The character pair bears some resemblance to the typewriter actions of setting a new line. In Unix applications, a new line is normally stored as a LF character. Macintosh applications use only a CR character to store a new line.

Can XML use non-Latin characters?
Yes, the XML Specification explicitly says XML uses ISO 10646, the international standard 31--bit character repertoire which covers most human (and some non-human) languages. This is currently congruent with Unicode and is planned to be superset of Unicode.

The contents of this article were taken from the following w3schools page: http://www.w3schools.com/Xml/xml_syntax.asp.

XML DataSource - General information

Support Dept — Thu, 26 Mar 2009 09:22:51 GMT

The XmlDataSource control is a data source control that presents XML data to data-bound controls. The XmlDataSource control can be used by data-bound controls to display both hierarchical and tabular data. The XmlDataSource control is typically used to display hierarchical XML data in read-only scenarios. Because the XmlDataSource control extends the HierarchicalDataSourceControl class, it works with hierarchical data. The XmlDataSource control also implements the IDataSource interface and works with tabular, or list-style, data.

Page developers use the XmlDataSource control to display XML data using data-bound controls.

The XmlDataSource typically loads XML data from an XML file, which is specified by the DataFile property. XML data can also be stored directly by the data source control in string form using the Data property. If you want to transform the XML data before it is displayed by a data-bound control, you can provide an Extensible Sylesheet Language (XSL) style sheet for the transformation. As with the XML data, you typically load the style sheet from a file, indicated by the TransformFile property, but you can also store it in string form directly using the Transform property.

The XmlDataSource control is commonly used in read-only data scenarios where a data-bound control displays XML data. However, you can also use the XmlDataSource control to edit XML data. To edit the XML data, call the GetXmlDocument method to retrieve an XmlDataDocument object that is an in-memory representation of the XML data. You can use the object model exposed by the XmlDataDocument and XmlNode objects it contains or use an XPath filtering expression to manipulate data in the document. When you have made changes to the in-memory representation of the XML data, you can save it to disk by calling the Save method.

There are some restrictions to the editing capabilities of the XmlDataSource control:

· The XML data must be loaded from an XML file that is indicated by the DataFile property, not from inline XML specified in the Data property.

· No XSLT transformation can be specified in the Transform or TransformFile properties.

· The Save method does not handle concurrent save operations by different requests. If more than one user is editing an XML file through the XmlDataSource, there is no guarantee that all users are operating with the same data. It is also possible for a Save operation to fail due to these same concurrency issues.

A common operation performed with XML data is transforming it from one XML data set into another. The XmlDataSource control supports XML transformations with the Transform and TransformFile properties, which specify an XSL style sheet to apply to XML data before it is passed to a data-bound control, and the TransformArgumentList property, which enables you to supply dynamic XSLT style sheet arguments to be used by an XSL style sheet during the transformation. If you specify an XPath filtering expression using the XPath property, it is applied after the transformation takes place.

By default, the XmlDataSource control loads all the XML data in the XML file identified by the DataFile property or found inline in the Data property, but you can filter the data using an XPath expression. The XPath property supports an XPath-syntax filter that is applied after XML data is loaded and transformed.

For performance purposes, caching is enabled for the XmlDataSource control by default. Opening and reading an XML file on the server every time a page requested can reduce the performance of your application. Caching lets you reduce the processing load on your server at the expense of memory on the Web server; in most cases this is a good trade-off. The XmlDataSource automatically caches data when the EnableCaching property is set to true, and the CacheDuration property is set to the number of seconds that the cache stores data before the cache is invalidated. You can use the CacheExpirationPolicy to further fine-tune the caching behavior of the data source control.

Capability	Description
Sorting	Not supported by the XmlDataSource control.
Filtering	The XPath property can be used to filter the XML data using an appropriate XPath expression.
Paging	Not supported by the XmlDataSource control.
Updating	Supported by manipulating the XmlDataDocument directly and then calling the Save method.
Deleting	Supported by manipulating the XmlDataDocument directly and then calling the Save method.
Inserting	Supported by manipulating the XmlDataDocument directly and then calling the Save method.
Caching	Enabled by default, with the CacheDuration property set to 0 (infinite) and the CacheExpirationPolicy property set to Absolute.

Because the XmlDataSource control supports data-bound controls that display hierarchical data as well as controls that display tabular data, the data source control supports multiple types of data source view objects on its underlying XML data. The XmlDataSource control retrieves a single named XmlDataSourceView object when used with a data-bound control that displays tabular data. The GetViewNames method identifies this single named view. When used with a data-bound control that displays hierarchical data, the XmlDataSource control retrieves an XmlHierarchicalDataSourceView for any unique hierarchical path passed to the GetHierarchicalView method.

JavaScript - Variables and Types Basics

Support Dept — Tue, 24 Mar 2009 11:25:00 GMT

This article is taken from JavaScript @ Wikibooks.

JavaScript is a loosely typed language, this means that you don’t have to worry about setting the type of variable and you can change at will in runtime. But when you code, you have to make sure that you are getting the right type at the right time.

Variable declaration

Variables are commonly explicitly declared the var statement, as shown below:

var c;

The above variable is created, but has the default value of undefined. To be of value, the variable needs to be initialized:

var c = 0;

Variables can also be created by assigning directly to them, which creates a global variable:

c = 0;

The above is equivalent of assigning the variable to the window object:

window.c = 0;

and creating such global variables is a practice that is best avoided.

Naming variables

When naming variables there are some rules that must be obeyed:

Upper case and lower case letters of the alphabet, underscores, and dollar signs can be used
Numbers are allowed after the first character
No other characters are allowed
Variable names are case sensitive: different case implies a different name
A variable may not be a reserved word

Primitive Types

These are treated by Javascript as value types and when you pass them around they go as values. Some types, such as string, allow method calls.

Boolean Type

Boolean variables can only have 2 possible values, true or false.

var mayday = false;

var birthday = true;

Numeric Types

You can use Integer and Float types on your variables, but they are treated as a numeric type.

var sal = 20;

var pal = 12.1;

In ECMA Javascript your number literals can go from 0 to -+1.79769e+308. And because 5e-324 is the smallest infinitesimal you can get, anything smaller is rounded to 0.

String Types

The String and char types are all strings, so you can build any string literal that you wished for.

var myName = "Some Name";

var myChar = 'd';

Complex Types

A complex type is an object, be it either standard or custom made. Its home is the heap and goes everywhere by reference.

Array Type

Main article: JavaScript/Arrays

In Javascript, all Arrays are untyped, so you can put everything you want in a Array and worry about that later. Arrays are objects, they have methods and properties you can invoke at will. (The ".length" property indicates how many things are currently in the array. If you add more things to the array, the value of the ".length" gets larger). You can build yourself an array by using the statement new followed by Array, as shown below:

var myArray = new Array(0, 2, 4);

var myOtherArray = new Array();

Arrays can also be created with the array notation, which uses square brackets:

var myArray = [0, 2, 4];

var myOtherArray = [];

Arrays are accessed using the square brackets:

myArray[2] = "Hello";

var text = myArray[2];

It is possible to have thousands of items in an array.

Object Types

An object within Javascript is created using the new operator:

var myObject = new Object();

JavaScript Objects can be built using inheritance and overriding, and you can use polymorphism. There are no scope modifiers, with all properties and methods having public access. More information on creating objects can be found in Object Oriented Programming.

You can access browser built-in objects and objects provided through browser JavaScript extensions.

Client - side events in JavaScript

Support Dept — Fri, 27 Feb 2009 08:13:23 GMT

Below is a table of the most common client side events in JavaScript. The Table is divided into three columns – the first lists the name of the event. The second contains a short description of the event, and the third lists all page objects, which support the given event.

*Event Name*	*Description*	*Supported by objects*
onabort	The onabort event occurs when loading of an image is aborted.	image
onblur	The onblur event occurs when an object loses focus.	button, checkbox, fileUpload, layer, frame, password, radio, reset, submit, text, textarea, window
onchange	The onchange event occurs when the content of a field changes.	fileUpload, select, text, textarea
onclick	The onclick event occurs when an object gets clicked.	button, document, checkbox, link, radio, reset, submit
ondblclick	The ondblclick event occurs when an object gets double-clicked.	document, link
onerror	The onerror event is triggered when an error occurs loading a document or an image.	window, image
onfocus	The onfocus event occurs when an object gets focus.	button, checkbox, fileUpload, layer, frame, password, radio, reset, select, submit, text, textarea, window
onkeydown	The onkeydown event occurs when a keyboard key is pressed.	document, image, link, textarea
onkeypress	The onkeydown event occurs when a keyboard key is pressed or held down.	document, image, link, textarea
onkeyup	The onkeyup event occurs when a keyboard key is released.	document, image, link, textarea
onload	The onload event occurs immediately after a page or an image is loaded.	image, layer, window
onmousedown	The onmousedown event occurs when a mouse button is clicked.	button, document, link
onmousemove	The onmousemove event occurs when the mouse pointer is moved.	onmousemove is, by default, not an event of any object, because mouse movement happens very frequently.
onmouseout	The onmouseout event occurs when the mouse pointer moves away from a specified object.	layer, link
onmouseover	The onmouseover event occurs when the mouse pointer moves over a specified object.	layer, link
onmouseup	The onmouseup event occurs when a mouse button is released.	button, document, link
onreset	The onreset event occurs when the reset button in a form is clicked.	Form
onresize	The onresize event occurs when a window or frame is resized.	Window
onselect	The onselect event occurs when text is selected in a text or textarea field.	text, textarea
onsubmit	The onsubmit event occurs when the submit button in a form is clicked.	Form
onunload	The onunload event occurs when a user exits a page.	window

Hiding JavaScript code from old browsers

Support Dept — Fri, 13 Feb 2009 12:12:36 GMT

Sometimes we need to hide the JavaScript code from the old browsers that do not support it.

To prevent old browsers from displaying your JS code, do the following:

Immediately after the opening <script> tag, put a one-line HTML-style comment without the closing characters, so that the first two lines of your script would look like this:

<script language="JavaScript">
<!--

At the end of your script, put the following two lines:

//-->
</script>

Thus, your HTML file will contain the following fragment:

browsers will treat it as regular

HTML comment.
//-->
</script>

Old browsers will treat your JavaScript code as one long HTML comment. On the other hand, new JavaScript-aware browsers will normally interpret the code between the tags <script> and </script> (the first and last lines of the code will be treated by the JavaScript interpreter as one-line comments).

Embedding JavaScript in HTML

Chainability (The Magic of jQuery)

Support Dept — Fri, 06 Feb 2009 15:36:00 GMT

This article is taken from How jQuery Works.

jQuery uses an interesting concept called a "Builder" to make its code short and simple. The Builder pattern is an object-oriented programming design pattern that has been gaining popularity.

In a nutshell: Every method within jQuery returns the query object itself, allowing you to 'chain' upon it, for example:

$("a")
   .filter(".clickme")
     .click(function(){
       alert("You are now leaving the site.");
     })
   .end()
   .filter(".hideme")
     .click(function(){
       $(this).hide();
       return false;
     })
   .end();

Which would work against the following HTML:

<a href="http://google.com/" class="clickme">I give a message when you leave</a>
 <a href="http://yahoo.com/" class="hideme">Click me to hide!</a>
 <a href="http://microsoft.com">I'm a normal link</a>

Methods that modify the jQuery selection and can be undone with end(), are the following:

add(),
children(),
eq(),
filter(),
find(),
gt(),
lt(),
next(),
not(),
parent(),
parents() and
siblings().

Please check the Traversing API documentation for details of these methods.

Peter

JavaScript Timing Events

Support Dept — Fri, 30 Jan 2009 07:23:27 GMT

This article is taken from W3Schools.

With JavaScript, it is possible to execute some code NOT immediately after a function is called, but after a specified time interval. This is called timing events.

It's very easy to time events in JavaScript. The two key methods that are used are:

setTimeout() - executes a code some time in the future
clearTimeout() - cancels the setTimeout()

setTimeout()
Syntax

    var t=setTimeout("javascript statement",milliseconds);  
  

The setTimeout() method returns a value - In the statement above, the value is stored in a variable called t. If you want to cancel this setTimeout(), you can refer to it using the variable name.

The first parameter of setTimeout() is a string that contains a JavaScript statement. This statement could be a statement like "alert('5 seconds!')" or a call to a function, like "alertMsg()".

The second parameter indicates how many milliseconds from now you want to execute the first parameter.

Note: There are 1000 milliseconds in one second.

Example:
When the button is clicked in the example below, an alert box will be displayed after 5 seconds.

    <html>  
 <head>  
   
     <script type="text/javascript">   
     function timedMsg()   
     {   
         var t=setTimeout("alert('5 seconds!')",5000);   
     }   
     </script>  
   
 </head>  
 <body>  
     <form>  
         <input type="button" value="Display timed alertbox!" onclick="timedMsg()">   
     </form>  
 </body>  
 </html>  
  

Example - Infinite Loop

To get a timer to work in an infinite loop, we must write a function that calls itself. In the example below, when the button is clicked, the input field will start to count (forever), starting at 0:

    <html>  
 <head>  
     <script type="text/javascript">   
     var c=0  
     var t   
     function timedCount()   
     {   
         document.getElementById('txt').value=c;   
         c=c+1;   
         t=setTimeout("timedCount()",1000);   
     }   
     </script>  
 </head>  
 <body>  
     <form>  
         <input type="button" value="Start count!" onclick="timedCount()">   
         <input type="text" id="txt">   
     </form>  
 </body>  
 </html>  
  

clearTimeout()
Syntax

    clearTimeout(setTimeout_variable)  
  

Example
The example below is the same as the "Infinite Loop" example above. The only difference is that we have now added a "Stop Count!" button that stops the timer:

    <html>  
 <head>  
   
     <script type="text/javascript">   
     var c=0  
     var t   
     function timedCount()   
     {   
         document.getElementById('txt').value=c;   
         cc=c+1;   
         t=setTimeout("timedCount()",1000);   
     }   
   
     function stopCount()   
     {   
         clearTimeout(t);   
     }   
     </script>  
   
 </head>  
 <body>  
     <form>  
         <input type="button" value="Start count!" onclick="timedCount()">   
         <input type="text" id="txt">   
         <input type="button" value="Stop count!" onclick="stopCount()">   
     </form>  
 </body>  
 </html>  
  

Note: The setTimeout() and clearTimeout() are both methods of the HTML DOM Window object.

Encode and Decode strings using JavaScript

Support Dept — Thu, 15 Jan 2009 03:30:43 GMT

In order for a string to be read from all computers sometimes it is useful to encode and decode it. This can be easily achieved using the JavaScript built-in escape() and unescape() methods. Both the escape() and the unescape() methods have the same argument – the string which will be escaped or unescaped.

The escape() method returns a string value (in Unicode format) that represents the encoded contents of the function argument. All spaces, punctuation, accented characters, and any other non-ASCII characters are replaced with %xx encoding, where xx is equivalent to the hexadecimal number representing the character.

For example, a space is returned as "%20".

Additionally, having a code segment like:

document.write(escape("Test \n escapeText \b"));

would yield a result like the following:

Test%20%0A% escapeText %20%08

As shown, the spaces are represented by "%20", whereas the newline and backspace are represented by “%0A” and “%08”.All other characters, which bear no special meaning, are left intact.

The escape() function will encode special characters with the exception of the following:

* @ - _ + . /

The unescape() method returns a string value that represents the argument passed to the function, converted to normal characters. All characters encoded with the %xx hexadecimal form are replaced by their ASCII character set equivalents.

The escape() and unescape() functions should not be used to encode or decode URIs.

If one needs to encode/encode URIs, the encodeURI() and decodeURI() methods should be used. These two last methods encode all but the following characters:

: / ; ?

If the necessity to encode all characters arises, one can take advantage of the encodeURIComponent() method. Because the encodeURIComponent() method encodes all characters, it should be used carefully. For example, if the string represents a path such as /baseFolder/folder1/default.html, the slash characters will be encoded and will not be valid if sent as a request to a web server.

More information on the use of encodeURI(), decodeURI() and encodeURIComponent() methods is available in the following blog post.

Yavor Angelov

Encode and Decode URI(Uniform Resource Identifier) using JavaScript

Support Dept — Thu, 08 Jan 2009 09:12:55 GMT

The current article is taken from https://developer.mozilla.org/

In some scenarios it is useful to encode and decode the URI. For example:

To avoid unexpected requests to the server, you should call encodeURIComponent on any user-entered parameters that will be passed as part of a URI. For example, a user could type "Thyme &time=again" for a variable comment. Not using encodeURIComponent on this variable will give comment=Thyme%20&time=again. Note that the ampersand and the equal sign mark a new key and value pair. So instead of having a POST comment key equal to "Thyme &time=again", you have two POST keys, one equal to "Thyme " and another (time) equal to again.

encodeURIComponent

Core Function:

Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, or three escape sequences representing the UTF-8 encoding of the character.

Syntax

var encoded = encodeURIComponent(str);

Parameters

str - A component of a URI.

Description

encodeURIComponent escapes all characters except the following:

alphabetic, decimal digits, - _ . ! ~ * ' ( )

Example

If we encode the URL of this blog:

<script type="text/javascript"> 
  document.write(encodeURIComponent("http://blogs.telerik.com/SupportDept/Posts.aspx")); 
</script>

we will get the following result:

http%3A%2F%2Fblogs.telerik.com%2FSupportDept%2FPosts.aspx

decodeURIComponent

Description

Replaces each escape sequence in the encoded URI component with the character that it represents.

Core Function

Decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent or by a similar routine.

Syntax

decodeURIComponent(encodedURI)

Parameters

encodedURI - An encoded component of a Uniform Resource Identifier.

Example

We can decode the previously encoded URL to get its original value:

<script type="text/javascript"> 
  var url = encodeURIComponent("http://blogs.telerik.com/SupportDept/Posts.aspx"); 
  document.write(url); 
  document.write("<br />"); 
  document.write(decodeURIComponent(url)); 
</script>

Vesselin Vasilev

New support resources search facilities on telerik.com

Support Dept — Mon, 22 Dec 2008 10:16:55 GMT

Greetings everyone,

With the brand new look-and-feel of telerik.com we introduced for the landmark Q3 2008 release you probably noticed that the support resources searching capabilities have changed, too. Our aim was to expose intuitive and straight-forward means to browse the available resources based on their type and find the information/examples you need in a blink of an eye. In a nutshell, we would like each visitor to have the ability to search by product line and get a list of results with a leading indicator image designating the resource type (demo, help topic, knowledge base article, code library project, etc.).

Since a well-organized set of screen shots speaks for itself, let's get to the point and explain some of the options you have when looking for some piece of information/code example concerning a particular implementation of yours.

The first step is to go to the 'Support' section on telerik.com:

From there you can choose a specific product line you are interested in:

For our simple test let's choose 'ASP.NET AJAX Controls'. We will be instantly navigated to the following section:

where one can choose to browse the resources for our ASP.NET AJAX controls in general, a particular RadControl or explore all support resources for a given product line/specific control based on their type (see the 'Or, just check...' panel in the screen shot).

Here is the place to note that this page (as well as the pages for individual controls sources) have unified appearance/sections. This means that once the end user gets familiar with the layout of a single search page, he/she will be able to navigate quite easily through an arbitrary control support page from a product line of his/her choice. Pretty useful, eh?!

Back to the main subject - let's type 'performance' in the input field at the top and press the 'Search' button beside it. Here are the results returned by the filter criteria we just entered (having a slick icon in front of each entry that indicates the actual type of the resource):

Worth to mention is that there is a helpful panel in the right section of the result page which allows you to filter the listed items by their type if you would like to enforce an additional filtering rule and limit the results array.

Now, what if I would like to get some information about a concrete control? This has never been that easy as it is currently. Simply navigate back to the support home page with the product lines and drill down as deep as you want to go. For example, let's choose 'ASP.NET AJAX controls' -> Menu:

You will be directed to the page below:

As you can see, the most important sources are listed at the top (Demos, Online Help, Step-by-step tutorial) followed by 'Recent Tips' and 'Popular resources' modules in which the content is gathered based on the principle "What you should know about [RadControl]" and grouped by categories. Naturally, you have the well-known search facility concerned previously in this post (together with the filter panel at the right side) and just for better visualization I am providing a screen shot from a quick search after entering 'menu item' in the input area:

Additionally, you are free to use (and abuse :)) the stand-alone search options in the demos, online documentation, knowledge base, code library and forums available in previous versions as well:

An entire universe of search capabilities created to make the life of the developer easier, don't you think?! Which option would you prefer or find best?

Happy searching and happy holidays!

Stefan