Uncaught TypeError While Attaching Client Side Event to Telerik RadEditor

In this Blog, we will explore the error I faced, while I was attaching Events to Telerik RadEditor and how I resolved that.

Walkthrough

Declare the Event in Markup

We need to declare RadEditor OnClientLoad Event for the RadEditor.

This event is fired after the content is set in the content area, after the OnClientInit event and just before the editor is ready for use.

<telerik:RadEditor
   runat="server"
   ID="RadEditor1"
   OnClientLoad="OnClientLoad">
</telerik:RadEditor>

Define the Event

We are going to attach onkeydown, onchange and onpaste Events to the RadEditor. So, whenever we type or paste something in the RadEditor, detectChanges() will be fired.

function OnClientLoad(editor)
{
    editor.attachEvent('onkeydown', function(){ detectChanges(); });
    editor.attachEvent('onchange', function(){ detectChanges(); });
    editor.attachEvent('onpaste', function(){ detectChanges(); });
}

function detectChanges()
{
    alert("You are doing something in RadEditor !!!");
}

Let’s Test

Let’s type or paste something in the RadEditor now.

OOPS !!!! Something bad happened. The below is what I see in the Chrome Developer Tool Browser Console.

RadEditor Error

RadEditor Error

What to do now?

Now, the error message says “Uncaught TypeError : undefined is not a function OnClientLoad“. That means, the way we are attaching the Events, is wrong.
So, I looked back to where I started and suddenly I saw that we should attach the Event with attachEventHandler instead of attachEvent. Moreover, attachEvent is no longer supported as MSDN indicated.

Therefore, the updated working code will be…

function OnClientLoad(editor)
{
    editor.attachEventHandler('onkeydown', function(){ detectChanges(); });
    editor.attachEventHandler('onchange', function(){ detectChanges(); });
    editor.attachEventHandler('onpaste', function(){ detectChanges(); });
}

function detectChanges()
{
    alert("You are doing something in RadEditor !!!");
}

Final correct Output

Here is the alert box, which opens when we type something in the RadEditor.

RadEditor onkeydown Event

RadEditor onkeydown Event

End Notes

Hope you liked the Blog. Please share among your circle. Stay updated by following the Blog with Email ID or WordPress Account (“Follow Blog via Email” Widget is on the right side panel). Go to “About” Page to know more about me and ways to connect with me. You can simply write to me via the “Contact” form. Thanks for reading.

Advertisements

Enable or Disable All Tabs Except the Selected Tab inside the Telerik RadTabStrip

We will explore the JavaScript code, by which we can easily Enable or Disable all the Tabs inside a Telerik RadTabStrip except the SelectedTab. In my previous Blog, we explored how to Enable or Disable all the Tabs. Now let’s see how we can just do this for all the Tabs except the current Tab.

How this is helpful?

This kind of requirement comes, when you have some business logic in a Tab (without saving the data), other Tabs can’t be accessible. Take one example, like, when you are registering something step by step. So, in first Tab, you will ask the User to enter some details and when he/she enters and hits register, you Enable all other Tabs, else just Disable.

How to?

If the Tab Text does not match with the SelectedTab‘s Text, then Disable it. Simple !!!

function DisableOtherTabs(){
    // Get the Tab Strip.
    var tabStrip = $find("<%= yourTabStripID.ClientID %>");

    // Get all the Tabs.
    var tabs = tabStrip.get_tabs();

    // Get Selected Tab.
    var selectedTab = tabStrip.get_selectedTab();

    // Now loop through all the Tabs and Disable one by one.
    for(var i = 0; i < tabStrip.get_allTabs().length; i++){
        // If the Tab Text does not match with the Selected Tab's Text, then Disable it. Simple !!!
        if(tabs.getTab(i).get_text().toUpperCase() != selectedTab.get_text().toUpperCase()){
            tabs.getTab(i).disable();
        }
    }
}

Thanks !!!

For taking time and reading the Blog. If you find it useful, then share within your circle, by pressing the Social Icons.

Enable Disable all Tabs inside Telerik RadTabStrip

We will explore the JavaScript code, by which we can easily Enable or Disable all the Tabs inside a Telerik RadTabStrip.

Read the comments inside the code blocks to know how the code works.

Enable All Tabs

function EnableAllTabs(){
    // Get the Tab Strip.
    var tabStrip = $find('<%= yourTabStripID.ClientID >');
    
    // Get all the Tabs.
    var tabs = tabStrip.get_tabs();

    // Now loop through all the Tabs and Enable one by one.
    for(var i = 0; i < tabStrip.get_allTabs().length; i++){
        tabs.getTab(i).enable();
    }
}

Disable All Tabs

function DisableAllTabs(){
    // Get the Tab Strip.
    var tabStrip = $find('<%= yourTabStripID.ClientID >');
    
    // Get all the Tabs.
    var tabs = tabStrip.get_tabs();

    // Now loop through all the Tabs and Disable one by one.
    for(var i = 0; i < tabStrip.get_allTabs().length; i++){
        tabs.getTab(i).disable();
    }
}