Archive for category AjaxControlToolkit

Implementing Multiselect feature on AutoCompleteExtender

AjaxControlToolkit’s AutoComplete extender is designed to be a single selection control. i.e. When user selects a value the dropdown list will be closed and selected text will be assigned to targeted textbox control.

Recently I got a question on the Asp.net Forums where the user wants to make the AutoCompleteExtender a multi select one. Besides the chosen values should be appended to textbox as comma separated values. This question caught my attention as it was a little tricky.

Here are the details of requirements

  • Keep the dropdown list of options on AutoComplete Extender opened
  • Allow multiple selection on AutoComplete Extender
  • Add the string to target textbox control as comma separated strings

We need to come up with a custom implementation to accomplish this requirement.  When I looked at some threads I found the code to keep the list opened. However, I need to customize it to generate comma separated values.

You can find complete implementation details here

Add a behaviorID to AutocompleteExtender control. We will use this id to close the dropdown list after user selecting values

Now we need to add a button to close the dropdown list after selecting values

Add the following javascript function to your page to close the window

Now we need to customize the inbuilt function “_setText” and “_hideCompletionList” function in order to accomplish our requirement

Complete Code

HTML

C#:

Code to populate the list when user type in characters on textbox

Demo

AutoCompleteExtenderDemo

, , , , ,

Leave a comment

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