Answer My Query

Check out the new ASP.NET GridLookup control that’s coming out in the next major release of DXperience v2010 vol 2. The new control is called the ASPxGridLookup.

The ASPxGridLookup editor combines the functionality of the ASPxDropDownEdit and ASPxGridView controls to allow end-users to easily select values from a dropdown grid containing lookup items.

The ASPxGridView control is seamlessly embedded into the editor's dropdown window, providing the editor with a powerful customizable data-processing and data-representation functionality.

In fact, this control addresses the follow customer suggestions with one excellent new control:

Background

Several iterations ago, we had already created the ASPxDropDownEdit control. You, our customers, were able to use the ASPxDropDownEdit control to nest the ASPxGridView (or another control) in the ASPxDropDownEdit's drop down template. However, this approach requires a lot of additional code to:

• synchronize size of the grid and the dropdown area
• implement interaction between selection in the grid and text in the ASPxDropDownEdit's input

To implement the filtering functionality was a major task and you were left without the functionality that you needed. Which is why the ASPxDropDownEdit could not be used for the suggestions requested above.

New ASP.NET GridLookup Is Versatile

The ASPxGridLookup solves all the suggestions and requirements mentioned above by providing a full new controls that supports the same great ASP.NET features as our other ASP.NET controls: Themes, Cross-Browser compatibility, Client-side events and functionality, and more!

The ASPxGridLookup contains an instance of the ASPxGridView in it's dropdown area. And the ASPxGridLookup gives you all the advantages of the ASPxGridView, like: MultiSelect, ServerMode, Templates, Sorting, Grouping and so on.

Selection modes

One of the major data-processing features adopted from the ASPxGridView is allowing your end-users to select multiple list items within the dropdown grid. The selection behavior is controlled by the editor's SelectionMode property that can be set to Single (only one item can be selected within the editor) or Multiple (multiple items can be selected within the editor) value:

The ASPxGridLookup supports single and multiple selection through the SelectionMode property. Your end-users can select items by clicking check boxes within the dropdown grid or by entering product names separated with a semicolon into the editor's edit box.

The ASPxGridLookup also supports interaction between the text input and the grid's selection. Therefore, when a row is selected, its text goes to the ASPxGridLookup's input automatically.

And in both selection modes the row text creates and applies the TextFormatString to the row values. When SelectionMode=Multiple, the text of many selected rows gets joined in the input using a special separator from the MultiTextSeparator property.

When used together, all these features provide end-users with easy-to-use capabilities of searching and selecting the required data.

Filtering With Server Mode

The ASPxGridLookup supports the grid's server mode functionality allowing the editor to efficiently work with large data sources by loading data in small portions, on demand. To work in server mode, the ASPxGridLookup editor should be bound to a data source of the XpoDataSource or LinqServerModeDataSource type. For example, here the ASPxGridLookup is filtering against a 20,000 record database table:

In the demo above, the ASPxGridLookup's incremental filtering works in the "StartsWith" mode (due to the IncrementalFilteringMode property setting) and the "FirstName LastName (Phone)" format is used to enter search strings and to represent the selected item's value within the edit box (due to the TextFormatString property setting).

The ASPxGridLookup provides filtering for it’s built-in ASPxGridView rows using the following modes:

• Contains - to satisfy filtration, the row must contain all the typed words anywhere in its fields (only fields are indicated in the MultiTextSeparator). The order of words does not matter.
• StartsWith - row satisfies the filtration, only if the row text begins with filter. This mode provides the autocomplete feature.
• None (this is a default value)

Only the row field that is mentioned in TextFormatString property will participate in the filtering.

Hosting the ASPxGridView internally (inside the dropdown window to display list items), the ASPxGridLookup editor gives you the capability to use a powerful data-processing functionality provided by the grid control.

Templates

The ASPxGridLookup control exposes the embedded ASPxGridView's powerful data representation functionality including support for templates. So, the ASPxGridLookup provides you with the capability to define templates for different elements of the built-in grid (such as data rows, data cells, etc):

The image above shows how the layout of the editor's list items can be modified by creating a template for the dropdown grid's data rows via the Templates.DataRow property.

DropDown Sized Automatically

The ASPxGridLookup automatically adjusts its dropdown size depending on the ASPxGridView size.

Included In DXperience v2010 vol 2

The ASP.NET GridLookup control, ASPxGridLookup, is part of the DXperience v2010 volume 2 release.

The new ASPxGridLookup is a fantastic control that combines the best of several ASP.NET controls to meet your requirements. I’m excited by the demos I’ve seen on this control. If you’re a DXperience Subscription customer, you’ll have access to the DXperience v2010 volume 2 beta in the coming weeks.

Are you looking forward the ASPxGridLookup control? Drop me a line below with your thoughts. Thanks!

Check out this how-to add keyboard support to an ASP.NET DataView. The keyboard support helps you increase both web site usability and accessibility.

The following sample can also be viewed online here. In fact, you can download it and run it locally using CodeCentral.

To add keyboard support, you’ll need to add some client-side functionality to the ASPxDataView. Specifically, the client-side keydown event.

In the code below, the following keys are processed:
  * Left Arrow (activates a previous page)
  * Right Arrow (activates the next page)

Add the following script code to the <Head> section of your html page that contains your ASPxDataView. You can also add the code to a separate file but be sure to reference it in the page that contains the ASPxDataView.

Note: The AttachEventToElement method of the ASPxClientUtils class is used to subscribe to a document keydown event. The PerformCallback method call of the ASPxClientDataView class is used to raise the ASPxDataView’s Callback event to change the active page of ASPxDataView on the server side:

var dataviewPerformingCallback = false;

function AddKeyboardNavigationTo(dv) {
    dv.BeginCallback.AddHandler(function (s, e) { dataviewPerformingCallback = true; });
    dv.EndCallback.AddHandler(function (s, e) { dataviewPerformingCallback = false; });
    ASPxClientUtils.AttachEventToElement(document, "keydown",
        function (evt) {
            return OnDocumentKeyDown(evt, dv);
        });
}

function OnDocumentKeyDown(evt, dv) {
    if (typeof (event) != "undefined" && event != null)
        evt = event;
    if (NeedProcessDocumentKeyDown(evt) && !dataviewPerformingCallback) {
        if (evt.keyCode == ASPxKey.Left /*37-Left Arrow*/) {
            if (dv.cpPageIndex > 0)
                dv.PerformCallback('Prev');
            return ASPxClientUtils.PreventEvent(evt);
        } else if (evt.keyCode == ASPxKey.Right /*39-Right Arrow*/ && dv.cpPageIndex < dv.cpPageCount - 1) {
            dv.PerformCallback('Next');
            return ASPxClientUtils.PreventEvent(evt);
        }
    }
}

function NeedProcessDocumentKeyDown(evt) {
    var evtSrc = ASPxClientUtils.GetEventSource(evt);
    if (evtSrc.tagName == "INPUT")
        return evtSrc.type != "text" && evtSrc.type != "password";
    else
        return evtSrc.tagName != "TEXTAREA";
}

Attach the ‘AddKeyboardNavigationTo’ method to the ASPxDataView’s Init event in the Page_Load of the code behind:

using System;
using DevExpress.Web.ASPxDataView;
using DevExpress.Web.ASPxClasses;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        ASPxWebControl.RegisterUtilsScript(Page);
        ASPxDataView1.ClientSideEvents.Init = "function(s, e) { AddKeyboardNavigationTo(s); }";
    }

Finally, be sure that the ASPxDataView's ClientInstanceName property is defined:

<form id="form1" runat="server">
    <div>
        <dx:ASPxDataView ID="ASPxDataView1" runat="server" DataSourceID="AccessDataSource1"
            RowPerPage="1" ClientInstanceName="dataview" OnCustomCallback="ASPxDataView1_CustomCallback"
            OnDataBound="ASPxDataView1_DataBound">
            <ItemTemplate>
                <b>EmployeeID</b>:
                <asp:Label ID="EmployeeIDLabel" runat="server" Text='<%# Eval("EmployeeID") %>' />
                <br />
                <b>LastName</b>:
                <asp:Label ID="LastNameLabel" runat="server" Text='<%# Eval("LastName") %>' />
                <br />
                <b>FirstName</b>:
                <asp:Label ID="FirstNameLabel" runat="server" Text='<%# Eval("FirstName") %>' />
                <br />
                <b>Title</b>:
                <asp:Label ID="TitleLabel" runat="server" Text='<%# Eval("Title") %>' />
                <br />
            </ItemTemplate>
        </dx:ASPxDataView>
    </div>
    <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
        SelectCommand="SELECT * FROM [Employees]"></asp:AccessDataSource>
</form>

Try the sample online at CodeCentral.

This great keyboard functionality is also built-in to the ASPxTreeList and ASPxGridView.

Drop me a line below with any questions. Thanks!

Check out this new client-side selection feature of our ASP.NET HTML Editor, the ASPxHtmlEditor:

The client-side selection feature of the ASPxHtmlEditor has been around for a while but was not exposed publicly until a handy suggestion came up. So the DevExpress ASP.NET team has improved and exposed these new client-side selection API.

The demo above shows the client-side selection with the new custom dropdown menu feature too. The dropdown menu changes the capitalization of the selected text using client-side Java-script:

// Event handler
function OnCustomCommand(s, e) {
    if (e.commandName == "ChangeCase")
        ChangeCase(e.parameter);
}

// Change case functionality
function ChangeCase(value) {
    var selection = HtmlEditor.GetSelection();
    var selectedElements = selection.GetElements();
    var textNodes = findAllTextNodes(selectedElements);
    for (var i = 0; i < textNodes.length; i++) {
        switch (value) {
            case "capitalize":
                var sentenceEndExp = /\.+\s*$/;
                var emptyStringExp = /\s*/;
                var prevText = getPreviousText(textNodes[0]);
                var capitalizeFirstLetter = emptyStringExp.test(prevText) || sentenceEndExp.test(prevText);
                textNodes[i].nodeValue = capitalize(textNodes[i].nodeValue.toLowerCase(), capitalizeFirstLetter);
                break;
            case "lowercase":
                textNodes[i].nodeValue = textNodes[i].nodeValue.toLowerCase();
                break;
            case "uppercase":
                textNodes[i].nodeValue = textNodes[i].nodeValue.toUpperCase();
                break;
            case "camelize":
                textNodes[i].nodeValue = camelize(textNodes[i].nodeValue.toLowerCase());
                break;
        }
    }
    HtmlEditor.ExecuteCommand(ASPxClientCommandConsts.SAVESTATEUNDOREDOSTACK_COMMAND, null);
}
function findAllTextNodes(elements) {
    var nodes = [];
    if (elements) {
        for (var i = 0; i < elements.length; i++) {
            if (elements[i].nodeType == 3)
                nodes.push(elements[i]);
            else
                nodes = nodes.concat(findAllTextNodes(elements[i].childNodes));
        }
    }
    return nodes;
}
function getPreviousText(element) {
    var prevElement = element.previousSibling;
    return (prevElement && prevElement.nodeType == 3) ? getPreviousText(prevElement) + prevElement.nodeValue : "";
}
function capitalize(text, capitalizeFirstLetter) {
    var text = text.replace(/(\.|\?|\!)+\s+\S+/g, function (word) {
        return word.charAt(0) + " " + word.charAt(2).toUpperCase() + word.substring(3).toLowerCase();
    });
    if (capitalizeFirstLetter)
        text = text.replace(/\S+/, function (word) {
            return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
        });
    return text;
}
function camelize(text) {
    return text.replace(/\S+/g, function (word) {
        return word.charAt(0).toUpperCase() + word.substring(1).toLowerCase();
    });
}

This feature will be part of the DXperience v2010 vol 2 release later this year.

Check out the ASP.NET TreeList’s keyboard navigation feature that is available to you now in the DXperience 2010 vol 1 release:

Benefits

The ASPxTreeList’s keyboard support allows you and your users to control the ASPxTreeList's primary navigation operations (such as accessing the control within the form, moving focus through its nodes, node selection and expanding/collapsing, paging) quickly and effectively using a keyboard.

In addition, enabling keyboard support within the ASPxTreeList helps you more easily create web pages that conform to accessibility guidelines.

How To Use

To enable keyboard navigation, set the ASPxTreeList's KeyboardSupport property to true. This activates the following features:

• Access Key - The ASPxTreeList control can be easily accessed (focused) by using a user-defined keyboard shortcut. This shortcut is composed by combining the preset CTRL+SHIFT combination with a single character string specified via the AccessKey property. For example, setting the access key of a TreeList control to the string "T" indicates that an end-user can navigate to the grid by pressing CTRL+SHIFT+T.
• Focused Node - The Focused Node feature is automatically activated, regardless of the corresponding feature property setting (SettingsBehavior.AllowFocusedNode). Focus can be moved between nodes by using the UP and DOWN ARROW keys. The LEFT and RIGHT ARROW keys can also be used to move node focus, but these keys initially try to collapse/expand a node and, if it's impossible, only then do they move focus. Moving focus from the ultimate (first or last) node within a page changes the page within the ASPxTreeList, if possible.
• Node Selection - The SPACE key can be used to mark a focused node as selected/unselected. This works if selection can be applied to a node - that is, if the SettingsSelection.Enabled property is enabled. If the SettingsSelection.Recursive property is disabled, multiple nodes can be easily selected, by moving row focus using the ARROW keys (UP/DOWN or LEFT/RIGHT) while holding down the SHIFT key.
• Expanding/Collapsing Nodes - The PLUS and MINUS keys can be respectively used to expand and collapse nodes. In addition, node collapsing and expanding can be performed using the LEFT and RIGHT ARROW keys.
• Paging - The SHIFT+PAGE UP and SHIFT+PAGE DOWN key combinations can be used to go to the next/previous grid page.

The ASP.NET Treelist’s keyboard feature is available now in your DXperience v2010 vol 1 release.

Drop me a line below if you love useful keyboard features like this one. Thanks!

Check out this slick custom tooltip feature of our ASP.NET Scheduler, the ASPxScheduler:

Using the ASPxScheduler’s custom tooltip feature, you can customize how a tooltip appears when a mouse cursor hovers over a scheduler's selected area or a selected appointment.

In this screenshot above, a custom form is displayed instead of the default tooltip. Rounded edges effect is accomplished via the built-in functionality, other tooltip characteristics can be easily adjusted as well.

Another option is a tooltip that is displayed during the appointment’s drag operation:

This feature is available now in the DXperience v2010 vol 1 release.

Are you using the custom tooltips feature in the ASPxScheduler? Drop me a line below with your thoughts. Thanks.