Mehul Harry's DevExpress Blog

Healthcare Information Technology (HIMformatics) - a visually stunning DevExpress-enabled ASP.NET website

Mehul Harry (DevExpress) — Fri, 03 Feb 2012 20:50:00 GMT

Check out this video interview with Mike Palgon who has created a very slick web portal using the visually-stunning DevExpress ASP.NET products.

Mike Palgon is the the lead developer at HIMformatics, a Healthcare Information Technology consulting firm. And Mike has created a very interesting web portal to help manage various aspects of HIMformatics including: employees, subcontractors, clients, projects, employee forecasting, and expense reports.

Watch the video case study with Mike Palgon here:

Mehul Harry talks with Mike Palgon about HIMformatics website

In the video, Mike and I discuss his website design and which DevExpress ASP.NET controls he's using.

Learn more about HIMformatics and this website here:

http://www.devexpress.com/Home/Case-Studies/HIMformatics/

Thanks Mike for showing off the slick HIMformatics web portal. I love the minimalist design of his website.

DXperience? What's That?

DXperience is the .NET developer's secret weapon. Get full access to a complete suite of professional components that let you instantly drop in new features, designer styles and fast performance for your applications. Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

Let's see what develops…

ASP.NET HTML Editor - Keyboard Shortcuts

Mehul Harry (DevExpress) — Thu, 02 Feb 2012 23:45:00 GMT

Keyboard shortcuts are great. Especially when you're writing in an online HTML editor, because they don't require you to take you hands off the keyboard!

The DevExpress ASPxHtmlEditor editor provides many popular keyboard shortcuts as defaults.

And in the latest release of DXperience v2011.2, we added the ability for you to customize these keyboard shortcuts for your end-users (S38048). We at DevExpress are not only trying to make you more productive when you use our controls from DXv2, but we're also looking out for your end-users.

Default Shortcuts

Here's the list of the default ASPxHtmlEditor keyboard shortcuts.

Notice that the ASPxHtmlEditor provides a way for you to create links using the common 'Control + K' keyboard shortcut found in many popular office products. Personally, I love that shortcut!

Try it now online: http://demos.devexpress.com/ASPxHTMLEditorDemos/Features/General.aspx

Shortcut	ActionName	Description
Ctrl+A	selectall	Selects the entire content
Ctrl+B	bold	Applies bold formatting to the selected text
Ctrl+C	kbcopy	Copies the selection
Ctrl+E	justifycenter	Justifies text center
Ctrl+G	insertimagedialog	Invokes the Insert Image Dialog
Ctrl+I	italic	Applies italic formatting to the selected text
Ctrl+J	justifyfull	Justifies text
Ctrl+K	insertlinkdialog	Invokes the Insert Link Dialog for the selection
Ctrl+L	justifyleft	Justifies text left
Ctrl+P	print	Prints the editor's content
Ctrl+R	justifyright	Justifies text right
Ctrl+U	underline	Underlines the selected text
Ctrl+V	kbpaste	Pastes content from the clipboard
Ctrl+X	kbcut	Cuts the selection
Ctrl+Y	redo	Redoes the last undone action
Ctrl+Z	undo	Undoes the last action
Ctrl+Ins	kbcopy	Copies the selection
Ctrl+Shift+K	unlink	Unlinks the selection
F11	fullscreen	Activates/deactivates the full-screen mode
Shift+Del	kbcut	Cuts the selection
Shift+Ins	kbpaste	Pastes content from the clipboard

Customization

There are two ways to customize the keyboard shortcuts, at design-time and runtime.

Design-time

In fact, you can redefine default shortcuts and create custom shortcuts at design time in two ways: using a shortcut editor or directly in a markup. To display the shortcut editor, click the Shortcuts property's ellipsis button in the Properties window while designing.

The code sample below demonstrates how you can specify shortcuts in markup. The first shortcut invokes a MyDialog custom dialog. The second shortcut redefines a default Ctrl+B shortcut. The third shortcut assigns the default command bold to custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

<dx:ASPxHtmlEditor ID="MyHtmlEditor" runat="server">
     <CustomDialogs>
          <dx:HtmlEditorCustomDialog Caption="My Custom Dialog" 
          FormPath="~/CustomDialogs/MyCustomDialog1.ascx" Name="MyDialog" />
     </CustomDialogs>
     <Shortcuts>
          <dx:HtmlEditorShortcut ActionName="MyDialog" ActionType="ShowCustomDialog" Shortcut="Ctrl+D" />
          <dx:HtmlEditorShortcut ActionName="backcolor" Shortcut="Ctrl+B" />
          <dx:HtmlEditorShortcut ActionName="bold" Shortcut="Alt+B" />
     </Shortcuts>
</dx:ASPxHtmlEditor>

Runtime

The ASPxHtmlEditor allows you to modify any shortcuts at run time. Simply use the methods provided in the HtmlEditorShortcutCollection collection.

The code sample below demonstrates how you can modify a shortcut collection at run time:

The first shortcut invokes a MyDialog custom dialog.
The second shortcut redefines a default Ctrl+B shortcut.
The third shortcut assigns the default command bold to a custom shortcut.

Note that other default shortcuts (except Ctrl+B) are still in effect.

using DevExpress.Web.ASPxHtmlEditor;

...

protected void Page_Load(object sender, EventArgs e) {
     if (!IsPostBack) {
          MyHtmlEditor.Shortcuts.Add("Ctrl+D", "MyDialog", ActionType.ShowCustomDialog);
          MyHtmlEditor.Shortcuts.Add("Ctrl+B", "backcolor");
          MyHtmlEditor.Shortcuts.Add("Alt+B", "bold");
     }
}

ASP.NET MVC Supported too!

These shortcuts can also customized for the DevExpress ASP.NET MVC HTML Editor extension too!

What custom shortcuts have you added to the ASPxHtmlEditor? Drop me a line below with your thoughts, thanks!

Save time and money...

Save time and money with high quality pre-built components for ASP.NET, Windows Forms, WPF, Silverlight and VCL as well as IDE Productivity Tools and Business Application Frameworks, all backed by world-class service and support. Our technologies help you build your best, see complex software with greater clarity, increase your productivity and create stunning applications for Windows and Web in the shortest possible time.

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Home/Try.xml

Let's see what develops…

Explore, Learn & Extend from 4 New DevExpress ASP.NET Demo Websites

Mehul Harry (DevExpress) — Fri, 23 Dec 2011 00:30:00 GMT

Check out these 4 new demo websites that we released with DevExpress DXv2.

Featured Demos

Here's the individual links to each demo:

You can also find them here on our updated ASP.NET demos page: http://demos.devexpress.com/ASP/

Learn & Extend

These demo websites show you:

- What's possible with different DevExpress ASP.NET products in one website

- How to create a similar website for your projects

- Full source code for the demo websites is available with our installation

- Feel free to extend and use any of the source code, images or styles

Full source code for C# & VB.NET

Full source code is available in the DevExpress DemoCenter application. Launch the DemoCenter from your 'Start' menu and click the red 'ASP' button. On this page you'll see these four icons. Solutions for both C# and VB.NET are available:

Beautiful & Touch-Enabled

Each of these demo websites show a different scenario. And not only does each demo incorporate our controls and leverage the latest technologies like jQuery, they also show a unique look and feel for each site:

Webmail Client - shows how to use several of the DevExpress ASP.NET major products like the ASPxGridView, ASPxScheduler and many more! And you can also test any of the DevExpress themes against this website by using the dropdown at the top right!

Event Registration - shows how to create an internet style website for events! This demo shows off a mobile-friendly interface with larger fonts, tabs and even a new look for ASPxScheduler:

Hotel Booking - shows how to create a stunning website using several of the DevExpress ASP.NET Editor controls:

Video Portal - Shows how to create your own YouTube-style video portal using DevExpress ASP.NET products like the ASPxDataView, ASPxTabControl, XtraCharts and more. In fact, check out the transitions when click on a video:

Download & Explore

Download DevExpress DXv2 today and explore the above ASP.NET demos. Then drop me a line below with your thoughts, thanks!

DXperience? What's That?

How to present PowerPoint slides with a WinForms Tiles App

Mehul Harry (DevExpress) — Thu, 15 Dec 2011 23:00:00 GMT

Check out this slick little application I built using the new DevExpress WinForms Tile controls for my touch webinar:

Quick & fun

This app took me about 15 minutes to create. And I wrote it for 2 main reasons:

It's a fun way to learn the new DevExpress WinForms Tile suite
And it's a great way to show touch features

Creating a slick and useful app quickly like my TileControlPowerPoint is what DevExpress productivity is all about.

How it's made…

This visually stunning application is simple and it follows most of the steps outlined in the following videos:

Here's the general steps:

I started by creating a new (blank) WinForms app.
Added the DevExpress XtraTile control, then 1 group and 1 tile. Watch this video to learn how.
Added a green metro-style background image and customized the tile to make it larger.
Added the code below to look for a 'Slides' folder and then dynamically create tiles based on the slides. This saves the trouble of manually creating each tile.
Finally, I set the base form is also set to maximum and without a title bar.

Note: I use the background image property of the tiles to show the slides. These images were originally developed in PowerPoint and it's very easy to save your slides as images.

Download

Download the full source code of the TileControlPowerPoint WinForms touch application here:

TileControlPowerPoint.zip

DemoWare

Warning: This was a small fun app I wrote in 15 minutes. As such, I don't recommend hard coding strings (the way I did). In fact, feel free to Refactor the small amount of code below. It dynamically creates tiles and uses the images for background so you don' t need to do it at design-time:

string path = AppDomain.CurrentDomain.BaseDirectory + @"slides";
private void LoadItems()
{
    if (Directory.Exists(path))
    {
        tileControl1.BeginUpdate();
        int filesCount = Directory.GetFiles(path).Length;
        for (int i = 1; i < filesCount; i++)
        {
            string fileName = path + "\\Slide" + i + ".png";
            TileItem item = new TileItem() { IsLarge = true, BackgroundImage = Image.FromFile(fileName) };
            tileGroup2.Items.Add(item);
        }
        tileControl1.EndUpdate();
    }
    else
    {
        MessageBox.Show("Slides not found");
        if (System.Windows.Forms.Application.MessageLoop)
        {
            Application.Exit();
        }
        else
        {
            System.Environment.Exit(1);
        }
    }
}

Check out the recent touch webinar and download the app I used to present the slides. Then drop me a line below with your thoughts. Thanks!

DXperience? What's That?

Watch this video - Take a tour of DXv2: Touch

Mehul Harry (DevExpress) — Wed, 07 Dec 2011 21:30:00 GMT

Check out the "Take a tour of DXv2: Touch" webinar video:

Watch this video to see the full story of DXv2 Touch features

Touch For All 4 .NET Platforms

DXv2 provides you touch enabled features for all 4 .NET platforms!

ASP.NET Touch

ASP.NET applications powered by DevExpress Controls are now touch enabled for both iOS and Android - from scrolling and resizing to the dragging of web controls.

WinForms & WPF Touch

Applications powered by DevExpress WinForms or WPF Controls are now touch enabled - from the dragging of UI elements to horizontal and vertical scrolling. Single and multi-touch features. Watch the webinar video to learn more and see it in action.

Silverlight Touch

As unbelievable as it might sound, DevExpress has taken key steps to enable touch support on the Silverlight platform. Yes, that means your end-users can use touch to interact with our Silverlight Tile Control and Silverlight Grid. Though only the first step, the touch is on its way for Silverlight and browser hosted apps.

WinForms Tile

New XtraTiles Suite - The new WinForms Tile Control allows you to re-imagine the way in which an application interacts with end-users and build dashboards that are ultra-efficient and fully customizable.

Tile Control for WPF and Silverlight

New Tile Layout in DXLayoutControl - The DevExpress Layout Control has been extended with a new TileLayout option, allowing you to replicate the look, feel and behavior of Windows® 8 and thus target next generation devices with ease. Whether using WPF or Silverlight, the Tile Layout Control allows you to re-imagine the way in which an application interacts with end-users and build dashboards that are ultra-efficient and fully customizable.

Watch the webinar video, then drop me a line below with your thoughts.

Video: ASP.NET MVC GridView - How To Setup Multi-Row and Instant Updates

Mehul Harry (DevExpress) — Thu, 06 Oct 2011 19:12:00 GMT

Check out this webinar video that shows you how to setup the DevExpress MVC GridView to create an Excel-like grid. The benefits include:

Multiple-row editing
Instant updates
jQuery callbacks

Watch the webinar video as I build a new MVC web project from scratch and show you how to easily setup the flexible and powerful DevExpress MVC GridView Extension:

Try the sample from the webinar by clicking on the 'Download Example' button from code central:

E3326 - How to perform GridView instant updating using different editors in the DataItem template

If you've not heard about code central then read this short blog post to learn about it's benefits.

Thanks for attending and watching webinar with me, I appreciate it.

Drop me a line below with your thoughts and questions about the slick example from the webinar. Thanks!

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions: http://dxpr.es/ov1tQa

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

Introductory Webinar - Learn about RESTful Services with ASP.NET MVC

Mehul Harry (DevExpress) — Wed, 05 Oct 2011 20:30:00 GMT

RESTful services with ASP.NET MVC
Client libraries like jQuery and Sencha's extJS
RESTful Routing library from Steve Hodgkiss

Register Now

Click the register button below and attend the webinar on Friday, October 7th, 2011 at 10AM PST:

Friday October 7th, 2011 01:00pm EDT | 10:00am PDT | 05:00pm GMT

Title: RESTful Services with ASP.NET MVC
Date: Friday, October 7th, 2011
Time: 10am PDT (GMT -07:00)
Length: 1 hour (but may go longer)
Presenters: Richard Winslow
Register here - https://www3.gotomeeting.com/register/379353182
Level: 100

Description

REST is the architecture of the Web, and RESTful Web services are now the most popular way of enabling browser-based applications to access information and behavior on Web servers. In Web 2.0 applications, desktop-like responsiveness and versatility are driven by client-side script code, and RESTful services with JavaScript-friendly request and response formats vastly simplify this kind of code.

Open source frameworks like Rails have historically made the server side of these services correspondingly straightforward to implement, but the .NET community hasn’t benefitted from this kind of work until recently. Now, however, ASP.NET MVC (itself an open source project), along with the modest assistance of some other open-source tools and conventions, makes it easy to write full-featured RESTful Web services.

We’ll explore REST itself, what RESTful Web services look like, and how to write them using the MVC framework along with Steve Hodgkiss’s RESTful Routing library.

Presenters

Richard Winslow
Zynx Health

Amanda Christensen
Host

Register Soon

What are you waiting for? Go register, now.

Microsoft Build Conference 2011: Recap with Mehul and Seth

Mehul Harry (DevExpress) — Tue, 20 Sep 2011 22:33:00 GMT

Check out this video that Seth Juarez and I recorded on the last day of Microsoft BUILD 2011 conference.

In the video, Seth and I take a leaf out of ESPN's book and take a look at the plays and moves that made BUILD such a fascinating conference.

We discuss:

Windows 8 (like, duh)
WinRT (the blue and green sides of the new map)
Attendee and MVP reactions
Metro UI, touch tablets and slates
Why you should not be afraid of the future
DevExpress' commitment

Click the image below and watch the 12 minute Build recap video:

DevExpress is committed to helping you develop on the Windows platform as we have been for the past 13 years.

Watch the video and then drop us a line below with your thoughts and feedback about Build and Windows 8. Thanks!

DXperience? What's That?

BUILD Conference: Windows 8 and HTML 5 does not effect your ASP.NET #bldwin

Mehul Harry (DevExpress) — Fri, 16 Sep 2011 19:20:00 GMT

HTML 5 in Windows 8 will not effect your ASP.NET development. Why?

ASP.NET == Web Server

ASP.NET is a server technology. ASP.NET gives you the broadest reach by creating HTML websites that can be viewed on any platform or device that has a web browser.

HTML 5 on Windows 8 == Client

The new Metro UI for Windows 8 looks very slick for tablet devices. Not only can you write apps for it using traditional client languages, but you can also write those apps in HTML 5 + JavaScript. Those apps use the WinRT run-time to take advantage of the local device resources such as the camera, and you get that slick Windows 8 Metro UI look automatically.

Even though the app may be written in HTML 5 + JavaScript, since it uses the WinRT run-time, it will only run on a Windows 8 machine. It is a true client app, not a browser app.

So if you're on ASP.NET now then have no fear because Windows 8 does not really affect you. Instead, it's an added bonus that you can use your skills as a web developer to make native Windows 8 apps using HTML 5 and JavaScript. Or ASP.NET to make slick websites.

Enjoy!

DXperience? What's That?

HDC 2011 Recap - Thank you Omaha! #hdc11

Mehul Harry (DevExpress) — Sat, 10 Sep 2011 07:25:00 GMT

The Heartland Developers Conference (HDC) for 2011 just ended today. Like last year, DevExpress was not only a sponsor, I flew in to meet the many developers in and around the Omaha, Nebraska area.

The HDC conference is interesting because it brings together different platforms like .NET and Java. And different people like developers and designers. I had a blast meeting many of the attendees and talking about all sorts development topics.

When I do visit conferences, I like to interview speakers about their sessions. This is fun for me because I get to learn more about the session but more importantly, you get to experience a little bit from the conference even if you were not there.

So I recorded several video interviews at the show and we'll be publishing these videos in the coming weeks. Keep an eye on The DevExpress Channel.

I want to thank the Lincoln .NET Users group who put together a 150 person event for Scott Hanselman. At this user group meeting, I got to meet some more interesting devs like Nate Lowry (video interview coming soon).

Till then, enjoy a few of my pictures from the event:

Driving with Scott Hanselman to the User Group meeting. Yes, he's as intense in person too. In the picture, he's playing Zulu R&B music while making clicking noises with his mouth and explaining what they mean.

This was Jason Follas' packed session titled "How jQuery and REST Saved My ASP.NET Project w/Jason Follas". Jason gave a very cool session using the ASPxGridView as part of his talk! In fact, I'm hoping to book him for future webinar to show you the slick jQuery integration he did.

The busy exhibitor area.

Here's John Sheehan from Twilio presenting "HTTP for ASP.NET Developers w/John Sheehan".

Omaha is known for their great steaks. They even sell them at the airport!

Thanks again to the Heartland developers for welcoming DevExpress. If you were at the show, drop me a comment below on how you enjoyed the show.

DXperience? What's That?

How to use DevExpress ORM (XPO) in an ASP.NET MVC application

Mehul Harry (DevExpress) — Thu, 25 Aug 2011 17:00:00 GMT

Check out the how-to knowledgebase article below that shows you 2 different approaches to using the eXpress Persisent Objects (XPO) with an ASP.NET MVC application:

How to use XPO in an ASP.NET MVC application

The article will be most useful if you are already using DevExpress XPO. If you're new to DevExpress XPO then check out the Code Central solution attached to this article:

Example: How to use XPO in ASP.NET MVC3 application (Razor)

It's a full working solution that shows how to use XPO with ASP.NET MVC. And there is a C# and VB.NET version of that sample available. Simply click the 'programming language' dropdown and choose.

Best Practices

If you're an XPO user now then you might have wondered, "What is the best practice for using XPO in an ASP.NET MVC application?"

This knowledgebase article is your answer:

The main difficulty of integrating the eXpress Persistent Objects framework into the ASP.NET MVC application is that both these frameworks have their own approaches to create a model instance. ASP.NET MVC requires a model to provide the parameter less constructor. It simply creates a new model instance each time it is required. XPO considers every object created via public constructors as new and inserts a new record in the database associated with this object. Hence, it is necessary to prevent the ASP.NET MVC engine from creating new instances and address this task manually. We will describe two possible approaches that can be used to address this issue.

Why use XPO?

If you've not yet seen XPO then check out this list of feature benefits here: XPO Features & Benefits

The M in ASP.NET MVC stands model and you have a choice to use just about any .NET ORM including our own XPO.

Check out the 'How to use XPO in an ASP.NET MVC application' article. Then drop me a line below with your thoughts on using XPO with ASP.NET MVC. Thanks.

DXperience? What's That?

Webinar: ASP.NET - Show a Popup Warning Before Session Timeout

Mehul Harry (DevExpress) — Tue, 23 Aug 2011 22:15:00 GMT

Register and attend my ASP.NET - Show a popup warning before session timeout to see how to add a very useful functionality to your ASP.NET websites that use login sessions.

Learn how to add a popup warning dialog to let your end-users know that their web session will timeout. This is great for notifying your end-users and also allowing them to stay within the session by clicking a 'continue session' style button. This solution works for both ASP.NET WebForms and ASP.NET MVC.

And this works for both ASP.NET WebForms and ASP.NET MVC.

Register Now

Click the register button below and attend the webinar on Friday, August 26th, 2011 at 10AM PST:

Friday August 26th, 2011 01:00pm EDT | 10:00am PDT | 05:00pm GMT

Title: ASP.NET - Show a Popup Warning Before Session Timeout
Date: Friday, August 26th, 2011
Time: 10am PDT (GMT -07:00)
Length: 1 hour (but may go longer)
Presenters: Mehul Harry
Register here - https://www3.gotomeeting.com/register/736845334
Level: 100

Presenters

Mehul Harry
Technical Evangelist – ASP.NET Team

Amanda Christensen
Host

Register Soon

What are you waiting for? Go register, now.

Build Your Best - Without Limits or Compromise

Try the DevExpress ASP.NET MVC Extensions online now: http://mvc.devexpress.com

Read the latest news about DevExpress ASP.NET MVC Extensions

Download a free and fully-functional version of DXperience now: http://www.devexpress.com/Downloads/NET/

Talk to your computer with Chrome and DevExpress ASP.NET Combo Box

Mehul Harry (DevExpress) — Thu, 18 Aug 2011 15:00:00 GMT

Check out how to enable speech-recognition for the DevExpress ASP.NET Combo Box control and let your end-users talk to your website!

Watch this short 1 minute screencast to see how the voice-to-text integration works with the ASPxComboBox:

Chrome Speech Recognition and DevExpress ASP.NET Combo Box

First, the disclaimer:

<disclaimer>

1. This feature will only work with Google's Chrome Web browser version 11 and above. I explain why below.

2. Two undocumented DevExpress client-side functions are used for this code. However, this sample is still simple to implement.

This how-to is 99.9% for fun and I cannot guarantee that Google Chrome may change this feature in the future which could break the code I'm about to show you.

You've been warned. Now let's have some fun…

</disclaimer>

Chrome Speech Recognition

Google's Chrome Browser introduced support for speech recognition with version 11 (back in April 2011):

Fresh from the work that we’ve been doing with the HTML Speech Incubator Group, we’ve added support for the HTML speech input API. With this API, developers can give web apps the ability to transcribe your voice to text. When a web page uses this feature, you simply click on an icon and then speak into your computer’s microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for you. -Chrome Blog

And this feature still works in the current version 13 of Chrome which I used for the screencast above.

How-To Enable Speech Recognition

To enable speech recognition in the ASPxComboBox follow these 3 steps:

1. Insert a meta-tag to set the language (in case the site language differs from the speech recognition language):

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv='Content-Language' content='en-US' />
    <title>DevExpress - Fun with Chrome</title>

2. Override the ASPxClientComboBox's client-side Init event:

<script type="text/javascript">
    function OnComboBoxInit(s) {
        var input = s.GetInputElement();
        input.setAttribute("x-webkit-speech", "x-webkit-speech");
        input.onwebkitspeechchange = function (evt) {
            if(s.filterStrategy && s.filterStrategy.FilterStartTimer)
                s.filterStrategy.FilterStartTimer();
            else
                aspxETextChanged(s.name);
        };
    }
</script>

Please note that s.filterStrategy.FilterStartTimer and aspxETextChanged functions are not documented. Sorry.

3. Point the ASPxComboBox to the OnComboBoxInit event:

<dx:ASPxComboBox ID="ASPxComboBox1" runat="server" IncrementalFilteringMode="Contains" DropDownStyle="DropDown"
   DataSourceID="AccessDataSource1" TextField="Country" ValueField="Country">
   <ClientSideEvents Init="OnComboBoxInit" />
</dx:ASPxComboBox>

The ASPxComboBox in this code above uses the same functionality as the one in this 'Callback mode' demo.

What about Internet Explorer?

Currently, Internet Explorer doesn't support speech recognition. There is a possibility that IE may get the speech recognition feature in the future.

Download Code

There is a code central demo for this feature which you can try online now:

ASPxComboBox - How to enable speech recognition in Google Chrome web browser

You can also download the full source code and project right from code central.

Summary

The how-to code above shows you a simple way to enable speech recognition for the ASPxComboBox in Chrome version 11 and above. Try it and then drop me a line below with your thoughts. Thanks.

DXperience? What's That?

Case Study: A Fast, slick website built with DevExpress components

Mehul Harry (DevExpress) — Tue, 16 Aug 2011 18:40:00 GMT

Check out this video case study below with Evert Wiesenekker, a developer from the Netherlands who's created a very interesting website.

Evert has created an optimized website that helps his clients manage a Nematode taxonomic database. What is a Nematode?

Nematodes are small, usually microscopic, unsegmented roundworms with a narrow cylindrical body. They are incredibly numerous in soil, water, and inside other animals and plants throughout the world. Approximately 10,000 species are known. Four of every five animals on the planet are nematodes, outnumbering even insects. A single gram of soil can contain more than 1,000 plant parasitic nematodes. -Divergence

And Evert's website is fast, good looking and uses several great technologies like:

Watch the video below as Evert discusses:

the website
how he chose the technologies
and some of his design decisions on the website:

Note: You can also view this video on YouTube which supports mobile devices too: http://www.youtube.com/watch?v=e5l44gzL0DU

One of my favorite things about his website is the speed. About 13 minutes into the video, you'll see how he has leveraged DevExpress ASP.NET Callbacks to retrieve and display different data items in milliseconds. Oh and be sure to check out his unique login screen that uses patterns instead of passwords!

Click on the image above and watch the interesting video case study with Evert Wiesenekker.

Then drop Evert a line below with any thoughts, questions and/or comments about his website.

Save time and money...

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/

ASP.NET TextBox - How to attach the jQuery AutoComplete Plugin (Webinar Video)

Mehul Harry (DevExpress) — Thu, 04 Aug 2011 21:25:00 GMT

Check out the screencast and Code Central sample below to learn how to add the jQuery AutoComplete Plugin to a DevExpress ASP.NET TextBox control.

Introduction

Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering.

By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches.

This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook.

Both local and remote data can be used: Local is good for small datasets (like an addressbook with 50 entries), remote is necessary for big datasets, like a database with hundreds or millions of entries to select from. -jQuery docs

How-To

There's 3 main steps to adding the jQuery AutoComplete to the DevExpress ASPxTextBox control:

1. Define your source of data. It can be a JavaScript string, array, or even a callback. In this sample, I've got a simple string array of different computer languages:

<script type="text/javascript">
    var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
</script>

2. Here's the important part. Since jQuery is a client-side only technology, it works with HTML elements. So the jQuery AutoComplete plugin will require the input element that it will be attached to. In our case, we need to get the client-side reference to the ASPxTextBox.

And the DevExpress ASP.NET controls make it easy because they have great client-side support. The ASPxClientTextBox, the client-side object that represents the ASPxTextBox, exposes the GetInputElement method for us. This gives us access to the underlying INPUT element of the ASPxTextBox. Using the GetMainElement method, we'll pass it to the

For the DevExpress ASPxTextBox, define a client-side 'INIT' event handler like so:

<dx:ASPxTextBox ID="textBox" runat="server" Width="170px">
    <ClientSideEvents Init="OnTextBoxInit" />
</dx:ASPxTextBox>

<script type="text/javascript">
    function OnTextBoxInit(s, e) {
        //http://jqueryui.com/demos/autocomplete/
        //http://docs.jquery.com/UI/Position
        $(s.GetInputElement()).autocomplete({
            source: availableTags,
            position:
            {
                my: "left top",
                at: "left bottom",
                of: s.GetMainElement()
            }
        });
    }
</script>

In the code above, the OnTextBoxInit method calls the jQuery AutoComplete plugin and passes it the 'availableTags' string array as a source of data. To properly position the plugin over the TextBox, we pass the 'position' attributes.

3. Finally, theme the list of items being displayed using the jQuery AutoComplete plugin's CSS styles:

ul.ui-autocomplete
{
    border: solid 1px #000000;
    list-style-type: none;
    margin: 0px;
    overflow: auto;
    padding: 0px;
    width: 168px;
}
ul.ui-autocomplete a.ui-corner-all
{
    background-color: #EEEEEE;
    display: block;
    font-weight: bold;
}
ul.ui-autocomplete a.ui-state-hover
{
    background-color: #0A246A;
    color: #ffffff;
    cursor: pointer;
    display: block;
}

And that's it. Now when you run the sample, your end-users will get a nice list of items that matches the text entered into the TextBox.

Download Source Code

Download and play with a sample version of this now on your local machine. Click on this Code Central sample:

ASPxTextBox - How to attach the jQuery AutoComplete plugin

If you're not sure how to use CodeCentral then watch this short how-to use code central video.

Watch The Screencast

Watch part 2 of the 'Using jQuery with DevExpress ASP.NET Controls' webinar video and you'll see a video version of how to add the jQuery AutoComplete plugin:

Got Lots of Data?

The jQuery AutoComplete is a great solution for relative small amounts of data. However, if you have a large set of data, say about 20,000 records, then I recommend you consider a different approach.

Use the DevExpress ASP.NET Combo Box because it supports binding to a large set of data and filtering with ease and fast performance!

See the DevExpress ASP.NET Combo Box in action here: Combo Box - Filtering Large Data Source

Summary

Learn how to use the jQuery AutoComplete plugin with a DevExpress ASP.NET TextBox.

Download and play with a full working sample.

Watch the jQuery with DevExpress Part 2 webinar video to learn step by step and get a better explanation.

Drop me a line below with your thoughts on the slick jQuery AutoComplete plugin and DevExpress ASP.NET TextBox integration. Thanks!

Save time and money...

Try a fully-functional version of DXperience for free now: http://www.devexpress.com/Downloads/NET/