Archive for category AjaxControlToolkit

How to add a character counter to AjaxControlToolkit HTMLEditorExtender control

Introduction:

How to add a character counter to AjaxControlToolkit HTMLEditorExtender control

Description:

In this article we are discussing how to add a line counter to HTML Editor Extender control. Usually it’s very straight forward to add character counter to textbox or textarea by using its id.We generally use keypress event in textbox control to call character counter function.

However when we use at HTMLEditorExtender control we will face an issue as the HTMLEditorExtender control will render as a div with ContentEditable property set to true.  Div doesn’t not have a keypress event.

gxjynaa

As a solution you can use Jquery bind method to attach DOMSubTreeModified event to div and then call the character counter function in this event.

Code to attach character counter:

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">
      $(document).ready(function () {
         //attach change event to div using Jquery css class selector
         $('.ajax__html_editor_extender_texteditor').bind("DOMSubtreeModified", function () {
         //call function to calcualate count on change event of div
             textCounter();
          });
     });
     function textCounter() {
          //Get the text count
          var divlength = $('.ajax__html_editor_extender_texteditor').text().length;
          //check if count greater than 100
          if (divlength &gt; 50) {
          //Trim the text
          var trimmedtext = $('.ajax__html_editor_extender_texteditor').text().substring(0, 100);
         //assign it to editor
         $('.ajax__html_editor_extender_texteditor').html(trimmedtext);
        } else{
            //reduce the allowed no of characters in textbox
            $('#remLen').val(50 - divlength);
        }
     }
</script>
Demo

TxtCounter

, , , , ,

Leave a comment

Removal of ToolkitScriptManager from latest version of AjaxControlToolkit v15.1

Introduction:

Recently DevExpress team took over the support of AjaxControlToolkit controls and from then on they have introduced nice and good features in AjaxControlToolkit. One such good feature they implemented is the removal of AjaxControlToolkit ToolkitScriptManager.

This change will resolves one of the common issues which most of the developers face when they use AjaxControlToolkit control. Usually as per design AjaxControlToolkit mandates the use of ToolKitScriptManager prior to using any controls. This will cause issues when user have to use asp:ScriptManager for any other controls.

 Solution:

Now with the latest release v15.1 You can use asp:ScriptManger with AjaxControlToolkit controls.

, , , ,

Leave a comment

How to disable Future dates in AjaxControlToolkit CalendarExtender control in ASP.Net

Introduction:

In this article I am going to explain how to disable the Future dates in AjaxControl Toolkit CalendarExtender control.

Prerequisites:

This example needs AjaxControlToolkit’s to be installed in your machine. I have explained the procedure to install AjaxControlToolkit in my previous article.

Implementation

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtCalendar"></asp:CalendarExtender>
    </form>
</body>
</html>

C#:

protected void Page_Load(object sender, EventArgs e)
{
      //To Disable the Future Dates in CalendarExtender control
      CalendarExtender1.EndDate = DateTime.Now; 
}

Sample Demo

, , , , ,

Leave a comment

How to disable Previous dates in AjaxControlToolkit CalendarExtender control in ASP.Net

Introduction:

In this article I am going to explain how to disable the previous dates in AjaxControl Toolkit CalendarExtender control.

Prerequisites:

This example needs AjaxControlToolkit’s to be installed in your machine. I have explained the procedure to install AjaxControlToolkit in my previous article.

Implementation

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
    <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:TextBox ID="txtCalendar" runat="server"></asp:TextBox>
        <asp:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="txtCalendar"></asp:CalendarExtender>
    </form>
</body>
</html>

C#:

protected void Page_Load(object sender, EventArgs e)
{
      //To Disable the Previous Dates in CalendarExtender control
      CalendarExtender1.StartDate = DateTime.Now; 
}

, , , , ,

Leave a comment

How to install AjaxControlToolkit controls to your solution

Introduction:

In this article I am going to explain the steps involved in adding AjaxControlToolkit solution to your project.

Details:

Recently DevExpress team took over the support of AjaxControlToolkit controls and from then on they have introduced nice and good features in AjaxControlToolkit. One such good feature they implemented is introducing a completely revamped installer package to AjaxControlToolkit in v15.1. You can download the installer from here in DevExpress site or from the CodePlex Site

Another easiest option is to use nugget to install the Ajax Control toolkit.

You should be able to find it by searching for “AJAX Control Toolkit” through Nugget, which may be the easier approach:

To install AjaxControl Toolkit through nugget you can check the below links

You need to add AjaxControl Toolkit controls to your Visual Studio IDE manually and then Drag and drop the controls to your page this will ensure that Ajax Controls are registered Properly.

You can check the follow the below steps to Add the controls to Visual Studio IDE

  1. Launch Visual Studio and create a new ASP.NET Web Forms project or website. Open Default.aspx in the Visual Studio editor.
  2. Create a new Toolbox tab by right-clicking the Toolbox and selecting Add Tab. Name the new tab Ajax Control Toolkit.
  3. Right-click beneath the new tab and select the menu option Choose Items… Click the Browse button and browse to the folder where you extracted the Ajax Control Toolkit. Pick the AjaxControlToolkit.dll and click the OK button to close the Choose Toolbox Items dialog.

After this you have all toolkit controls available in your VSIDE Then just drag and drop any controls in your page.

, ,

2 Comments

How to close the HoverMenu when user mouseover to hover Panel or Closing the HoverMenu on mouseout of target control in Asp.Net

Introduction

In this article we are discussing on how to close the AjaxControlToolkit HoverMenuExtender Control when user move out target control of HoverMenuExtender.

Problem Description:

As per design the AjaxControlToolkit’s HoverMenuExtender don’t close if mouse pointer is over the Panel which displayed as HoverMenu. We need custom implementation to close the HoverMenuExtender when user moves out of Target Control.

Demo of issue here

Solution:

To resolve this issue we can use the Javascript approach. Basically we are making use of onmouseout event to hide the HoverMenuExtender control.

Code to Hide the HoverMenuExtenderControl:

	<script type="text/javascript">
            function ButtonMouseOut() {
                //Access the hovermenu here
                var hovermenu = $find("Hovemenu1");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }    
	</script>

Complete Code:

	<script type="text/javascript">
            function ButtonMouseOut() {
                //Access the hovermenu here
                var hovermenu = $find("HoverMenuExtender2");
                //Hide the hovermenu
                hovermenu._hoverBehavior._hoverElement.style.visibility = "hidden";
            }
        </script>
        <style type="text/css">
            .panelClass {
                background-color: blue;
                width: 300px;
            }
        </style>
        <asp:Panel ID="Panel1" runat="server" CssClass="panelClass">
            This is a sample HoverMenuExtender pop up.
        </asp:Panel>
         <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" ScriptMode="Release"
            CombineScripts="false">
        </cc1:ToolkitScriptManager>
        <cc1:HoverMenuExtender ID="HoverMenuExtender2" runat="server" PopupControlID="Panel1"
            TargetControlID="Button1" PopupPosition="Right">
        </cc1:HoverMenuExtender>
        <asp:Button ID="Button1" runat="server" onmouseout="ButtonMouseOut();" Text="Hover Here to Open PopUp" />

Demo of solution

, , ,

Leave a comment