How I used Yahoo Pipes to filter CodeRush videos

Alex Skorkin from the DevExpress CodeRush team is on a mission to bring you all sorts of interesting news about CodeRush. And he’s working on bringing you a new CodeRush Facebook page.

Since I created and now help maintain the DevExpress Facebook page, he asked me how we could add a feed for CodeRush only videos from the DevExpress YouTube channel.

Now the best approach is if I could just add a query parameter to this YouTube RSS feed:

http://gdata.youtube.com/feeds/base/users/DeveloperExpress/uploads?alt=rss&v=2&orderby=published&client=ytapi-youtube-profile

 

Sadly I could not add the query parameter. Either that or I don’t know the specific parameter for it.

So to solve this problem quickly, I decided to take a look at Yahoo Pipes which allows you to "aggregate, manipulate and mashup content from around the web".

Since Yahoo Pipes has been around since 2007, there are a ton of existing pipes which you can either use or copy and modify to suit your needs.

After a little searching, I found this "YouTube filter user’s video by title" pipe which allows me to send 2 parameters:

1. YouTube User
2. What do you want to keep? (Keyword to search title, description, etc.)

 

So after a quick clone to make a custom tweak, I had the optimal RSS feed that only grabbed CodeRush videos from the DevExpress YouTube channel.

Yahoo pipes is simple, fun and powerful.

What about IFTTT?

There’s a new service called "If this then that" (IFTTT.com). Unfortunately, I’m not that familiar with it but if you know how to do something similar with IFTTT.com then please leave a comment below, thanks.

DevExpress ASP.NET Themes – Easy 3 Step Customization for Your Projects

Check out the difference between a naked ASP.NET project and the same project using a Developer Express theme:

Nice upgrade, isn’t it? Here are the 3 simple steps to add Developer themes to your project: 

1. Add a Combo Box for Selecting the Theme

First you’ll need to decide on which page you want to put the theme selection combo box. You can put it on a master page so that it’s available on all derived pages. Or you can put it on a user customization page, like an options/settings page. Putting the the combo box at the top of the page will make it easier for the user to find and select the theme. You can see a sample of this in the ASP.NET demos. I recommend binding this combo box to an XML file that contain a list of the available themes.

2. Use DevExpress ASP.NET Theme Deployment Tool

There are several great pre-built themes that ship with our ASP.NET controls like the Office 2003 themes. Check out the ASPxThemeDeployer video to learn how to copy the DevExpress ASP.NET themes to your local web projects. Click the image to watch the video:

3. Add Code To Load/Save the Themes

In this last step, we’ll add some code to bind as well as handle the load/save of the themes to cookies. Add this code to your CodeBehind file which contains the combo box. This will load and save the selected theme into a cookie so the users don’t have to re-select their favorite theme every time. And to make it easier handle these cookies, include one of JavaScript utility files in a new folder called ‘scripts’:

• C:\Program Files\Developer Express .NET v8.1\Demos\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

Please note that with the DXperience v2010 vol 1 release, we’ve moved the local demos location to the User Documents area. For example, on my Windows7 install, the file is located here now:

• C:\Users\Public\Documents\DevExpress 2010.1 Demos\Components\ASPxGridView\CS\ASPxGridViewDemos\Scripts\Utilities.js

This file contains some methods which we’ll call from the client-side to save the theme whenever the user selects a new theme:

<dxe:ASPxComboBox AutoPostBack="True" DataSourceID="xdsThemes" Width="150px" 
ID="cbSkins" runat="server" EnableViewState="False" 
ClientInstanceName="cbSkins" OnDataBound="cbSkins_DataBound">
<ClientSideEvents SelectedIndexChanged="
function(s, e) {   
	DXSaveCurrentThemeToCookies(s.GetSelectedItem().value);
}" />

Here’s a complete sample project that shows the combo box for themes in action [Sample project: (C#) ChooseSkinDemo.zip | (VB) ChooseSkinDemoVB.zip].

Soft Orange	Red Wine
Youthful	Black Glass

Improve your UI by adding these Developer Express themes. Then leave a comment below about how much your users love this feature.

What’s New in 2008 Volume 2 for ASP.NET?

The 2nd major DXperience release of 2008 is just around the corner. This three (major) releases per year cycle is very useful. Each major release means new features, controls, functionality, etc. And in the 2008 Volume 2 (aka v8.2) release there are some great features from the ASP.NET team. Read below for the full list. This post also ties in with the other announcements about the v8.2 release:

• The One with XtraPivotGrid and editing – (What’s new in v8.2)
• A Tree, a List, a TreeList…the ASPxTreeList v2008 vol 2
• The XtraCharts Suite v2008 vol 2
• The One with XtraReports and Calculated Fields – (What’s new in v8.2)
• The One with iCal – (What’s new in v8.2)

---

Common Changes Across All ASP.NET Controls

 

Useful Class for Client-side Scripting

A new ASPxClientUtils class allows you to easily perform some typical client-side actions such as:

• Determine web browser type
• Work with arrays
• Access an object’s parent or child object
• Obtain event parameters

Enable/Disable Controls and Control Elements on the Client Side

Previously, enabling/disabling a control or a control element required a round trip to the server. In 2008 vol 2, the controls from the ASPxEditors and ASPxperience Libraries allow you to change their enabled state or the state of their elements (tabs, menu items) on the client side. This reduces the number of round trips to the server and increases web site responsiveness.

Distinguish Between Callbacks and Postbacks

A new server-side IsCallback property has been added to our web controls. This property allows you to find out whether a control takes part in callback processing.

Native Rendering for Data Editors

Some controls from the ASPxEditors Library (ASPxTextBox, ASPxMemo, ASPxListBox, ASPxComboBox and ASPxButton) can now be rendered as HTML INPUT elements of the appropriate types. This allows you to enable native rendering for these elements thus providing Windows® style UI in your web site. Native rendering results in less HTML code which improves an application’s overall performance.

---

ASPxHtmlEditor

Integrated Spelling Checker

The ASPxSpellChecker is now integrated into the ASPxHTMLEditor which enables spelling validation in the editor’s Design View. To check spelling, end-users can now simply press a built-in toolbar button.

Predefined Styles for Text Formatting

Previously, every toolbar button performed a very basic formatting operation – for instance, applying bold or italic formatting, changing background color, etc. Now you can create buttons that change multiple style attributes at once. This is extremely useful if end-users need to highlight multiple text fragments using the same style settings.

To enable this functionality, all you need is to create a custom CSS style and expose it via a toolbar’s specially designed dropdown editor.

Responding to Focus Changes via Client-side Events

Newly implemented client-side events allow you to respond to the focus event being received or lost by the editor’s Design View. For instance, this enables you to implement client-side user input validation when an end-user tries to leave the editor.

Complete XHTML compliance

HTML code entered into the editor’s HTML View can be automatically validated and transformed into XHTML 1.0 Transitional compliant markup. As the result, the editor’s content is always kept safe, since the editor removes all potentially harmful code – unknown tags and attributes, script elements, client-side event handlers and URLs with script content. Automatic validation also helps to keep HTML code validity by correcting invalid tag hierarchies and changing invalid attribute values.

The ASPxHtmlEditor exposes several options to control which automatic transformations are required. You can also update HTML code manually by overriding an event.

---

ASPxperience Suite

 

Obtaining Settings from Data Fields

Some controls like the ASPxNavBar, ASPxMenu and ASPxTabControl, now expose properties which allow you to specify data fields from whose items settings are to be obtained. Examples of settings that can be fetched from a data table are item tooltips, navigation URLs, image URLs, etc.

Data binding, an entirely new feature in this release, is now supported for the ASPxTabControl. Prior to v2008 vol 2, it could only work in unbound mode.

Easily Transmit Any Data onto the Client

All AJAX-enabled controls in the ASPxperience Suite now allow the same easy data exchange with the web server as in the ASPxGridView Suite. The Controls expose the CustomJSProperties event, which enables you to declare custom properties for the client control. You can specify these properties’ values on the server side and then access them on the client, as you would do with built-in properties.

New Media Formats for Object Container

The list of allowed video and audio types has been extended with QuickTime Video and QuickTime VR (virtual reality) types.

ASPxCallbackPanel Improvement

The panel’s content can now remain visible during callback processing. This behavior is optional – a loading panel is displayed by default.

How to optimize the ASPxMenu control

The support team just released a great knowledge base article which shows how to optimize the ASPxMenu control. In this article, you’ll learn how to reduce the render size of the ASPxMenu and improve your website’s speed. There are several tips and suggestions on topics like ViewState, gutters, animations, submenus, shadows and more.

Here are some sample stats that show how page size can be reduced by using these tips:

Check out the entire article for some great tips on how to reduce page size when using the ASPxMenu control:

KB18089: How to optimize the ASPxMenu control

Then drop me a line here and let me know your experience with the suggestions.

Screencast: Enable Server Mode using LINQ (ASPxGridView & XtraGrid)

In a previous post, I showed you how to use the powerful Server mode feature in ASPxGridView and XtraGrid against large datasets. The response to Server mode was so good that we’ve extended the ways that you can enable it.

You can now use a LINQ provider to work with our .NET grids in Server mode. The latest release, 2008 Volume 1, introduces two new datasources to support LINQ.   LinqServerModeDataSource supports the ASPxGridView and the LinqServerModeSource supports the XtraGrid. To use these datasources against either the ASPxGridView or XtraGrid, try the steps demonstrated in the short screencasts below.

ASPxGridView Screencast

XtraGrid Screencast

The LINQ support in Server mode is bleeding-edge technology which gives you the performance gains for your projects. Check out this cool feature then let me know how you’re using LINQ and how you plan to use these new LINQ datasources.

ASPxperience Screencasts: Customization & Client-Side Events

Check out these 5 new screencasts. Three show you how to customize the ASPxperience products and one shows you how to discover and use the client-side events.

	The first lesson shows how to handle one of our ASPx control’s client-side event. You’ll also learn how to use the online documentation to learn more about client-side APIs. You may find the related blog post useful as well: Client-Side Manipulation: Using Client APIs and Handling Client-Side Events
	In the second you’ll learn how to use the default.css file to customize the appearance of an ASPx control: Appearance Customization: Using a Custom CSS File
	In this screencast you’ll learn how to create a new AutoFormat based on a web control’s customized visual properties and apply it to other controls of the same type. Appearance Customization: Creating and Applying a New AutoFormat
	This screencast shows how to create a new theme based on a web control’s customized visual properties. You can then apply it to other controls of the same type. Appearance Customization: Creating and Applying a New Theme
	The last screencast shows how to create a toolbar emulation with the ASPxMenu. You can also read the technical post on it here: Create Ribbon-Like Toolbars with ASPxMenu ASPxMenu: How to Create a Toolbar Emulation

 

You can also access all these screencasts on the DevExpress Channel here: ASPxperience lessons.

Thanks.

ASPxGridView: Improve Filter by Adding an ‘(All)’ item

Here is useful tip that can help you improve user experience. When filtering the ASPxGridView with an ASPxComboBox, you can add a new item to the top labeled "All". This can be useful when filtering because the word All is more descriptive than leaving a blank item. You can see an example of this item used on the grid used for the tutorials site:

So what’s the trick? Just add a null ListEditItem to the ASPxComboBox. The new (All) item will be inserted above the default blank line that’s on the top of the list. It does the same thing, but describing the functionality by changing the name really helps the user. So now you and the users can select the new "All" item to clear filtering for the column. To add this item, override the AutoFilterCellEditorInitialize method as follows:

protected void ASPxGridView1_AutoFilterCellEditorInitialize(object sender, ASPxGridViewEditorEventArgs e)
{
   if (e.Column.FieldName == "Country")
   {
      ASPxComboBox comboBox = e.Editor as ASPxComboBox;
      comboBox.ClientSideEvents.Init = "function(s, e) {s.InsertItem(0, '(ALL)', '');}";
   }
}

First, identify which columns use an ASPXCombobox then add the lines shown above. Now when the filter cell is initialized, the new "All" item will be added.

Enjoy and thanks.

Accessing ASPxGridView’s Serverside Properties From ClientSide

Last month, I was creating a sample with the ASPxGridView when I needed to access the PageIndex property from the client side. The PageIndex property holds the current page index number. I needed to use the PageIndex for a client side function. Unfortunately, this property was only available on the server side. I used my keen insight to come up with the perfect suggestion to enhance the product: Just open up a bunch of server properties on the client side! Luckily, someone smarter than me (Andrew the ASPxGridView Architect) saw what a horrible idea that really was and came up with this enhancement that works better and does more…

A new method allows you to expose almost any server side property to the client side. Using an ingenious technique which creates temporary client properties so that the client side is not weighed down with extra HTML or JavaScript if it’s not needed.

The CustomJSProperties event enables you to declare temporary client properties. Once declared, these properties can be accessed from the client side. To add a new property, use the event parameter’s http://documentation.devexpress.com/#AspNet/clsDevExpressWebASPxGridViewASPxGridViewClientJSPropertiesEventArgstopic property (this represents a collection of property names and their values).

For example, to expose the PageIndex property, first override the CustomJSProperties event and add your custom property to expose to the client side: 

protected void ASPxGridView1_CustomJSProperties(object sender, 
   DevExpress.Web.ASPxGridView.ASPxGridViewClientJSPropertiesEventArgs e) 
{
   e.Properties["cpPageIndex"] = ASPxGridView1.PageIndex;
}

That’s it, your done. Now you’re free to call this property from the client side:

<input id="Button2" type="button" value="Active Page" 
   onclick="alert(grid.cpPageIndex)" />

To avoid rewriting the ASPxGridView’s base properties, prefix the client side property name with "cp" for custom property (e.g. cpPageIndex).

Here is a sample project that shows how it’s done: [CustomJSProperties.zip]

Thanks.

Enable the back button in ASPxGridView – Experimental

First the disclaimers/warnings. The following uses preview technology. It requires VS2008 and the ASP.NET AJAX Extensions 3.5 Preview.

You asked in the forums about using the back button with the ASPxGridView in CallBack/AJAX mode. Since AJAX doesn’t reload the page, the back button doesn’t usually work. There are methods to work around that, but Microsoft hasn’t added them to ASP.NET yet.

Your questions made me wonder if I could get some back button functionality into an ASPxGridView page. So I did some research and I found a way to do it. Sort of. Experimentally. With some preview tech.

Ok, it’s cutting edge, but it’s a step in the right direction. In the screencast, Bertrand uses the index property from a Wizard control to show how history is managed with the ScriptManager control. The approach uses the EnableHistory parameter of the ScriptManager to create "History Points" for the ScriptManager to navigate to when the back/forward buttons are clicked. This got me thinking that it’s possible to use the same approach with the ASPxGridView. Therefore have the ability to use the back button while still using AJAX callbacks. A history point is needed and a common history point in web grids are page numbers. With the ASPxGridView, the PageIndex property would be the specific history point.

So exactly how’s it done? I recommend watching Bertrand’s screencast for a good overview of the approach. When the ASPxGridView’s page is changed then a "History Point" is created in the ScriptManager. These points are then retrieved/used in the ScriptManager’s Navigate method. The navigate is called when the back/forward button is clicked:

   protected void ASPxGridView1_PageIndexChanged(object sender, EventArgs e)

   {

      if ((ScriptManager1.IsInAsyncPostBack) && (!ScriptManager1.IsNavigating))

      {

         ScriptManager1.AddHistoryPoint("pageIndex", ASPxGridView1.PageIndex.ToString(),

            "Page #: " + ASPxGridView1.PageIndex.ToString());

      }

   }

   protected void ScriptManager1_Navigate(object sender, HistoryEventArgs e)

   {

      string pageIndexStr = e.State["pageIndex"];

      if (String.IsNullOrEmpty(pageIndexStr))

      {

         ASPxGridView1.PageIndex = 0;

      }

      else

      {

         int pageIndex = Convert.ToInt32(pageIndexStr);

         ASPxGridView1.PageIndex = pageIndex;

         pageIndexStr = Convert.ToString(pageIndex + 1);

      }

      Page.Title = pageIndexStr;

   }

You can try the attached project for yourself but as I mentioned above, you will need the ASP.NET AJAX Extensions 3.5. Since this approach uses the ScriptManager then ASPxGridView is placed inside of an UpdatePanel. Whenever you place the ASPxGridView inside an UpdatePanel, you must set the EnableCallBacks to false because the callbacks are now handled by the ScriptManager/UpdatePanel.

More disclaimers: This works only for paging. It doesn’t keep track of other operations like grouping, sorting, etc. It’ll be interesting to see how this feature evolves.

Download the code here: AGVHistoryTest.zip

Thanks!

ASPxGridView Screencast: Unbound Columns

In this screencast you’ll learn how to display unbound data using unbound columns.

Unbound data is typically data that does not come from your datasource. Data like calculated columns which you can easily define in the ASPxGridView.

Check out the screencast and then let me know your thoughts. A how-to is also posted below. Thanks!

 

---

 

How to create Unbound Columns in the ASPxGridView

To add an Unbound column just follow these easy steps:

1. Add a new column to the ASPxGridView
2. Assign the data value in the CustomUnboundColumnData event

Add the new unbound column

Click on the smart tag of the ASPxGridView and select Columns from the menu. The columns editor form you see below will appear. Use the two icons on the top left corner of the form to add or insert a new column. When clicking on one of these buttons, a dropdown will appear that let’s you select the type of column to add. You can select any type that fits your column/data type but the Text Column is the general type:

Now define some properties for the column like the Caption(header), FieldName, UnboundType, and possibly DisplayFormatString. Since this is an unbound column, you should define UnboundType to match the data type you’ll be adding to the field. The FieldName will be used when filling the value and must be unique from any other fields in your datasource.

Assign a value to your unbound column

To fill the new column with data, you should handle the CustomUnboundColumnData event. Here you can assign the data value using the e.Value property. In the sample, note the e.GetListSourceFieldValue method and e.Column.FieldName property. You can use these items to check for the column and field values in the method.

Now run the application and you have the unbound column you just created with just a few easy steps.