Charting in ASP.NET, ASP.NET Chart Controls for .NET 3.5 SP1

Here is a HelloWorld sample on the new ASP.NET Charting control.


To begin with, install the free Microsoft Chart Controls and the "Tools for VS 2008 for Chart Controls" from here and here

Note that if you don’t install the Tools for VS 2008 for Chart controls, the Chart Server Control doesnt show up in the Toolbox

Once you are done with the installation, restart Visual Studio if you are already running the same (of course, save your work)

1. Start Visual Studio 2008 and create a File – New – ASP.NET Website or a Web Application

2. From the ToolBox, under Data tab, pick up the “Chart” control (the icon would be a series of colored bar graphs) and drag and drop it into the page.

3. Click on the smart tag for configuring the Chart control and Choose DataSource

4. Select “Database” and provide the connection string to your database server (in my case I chose Northwind)

5. Choose to save the connection string etc., and select the Database table (in my case I chose “Category Sales for 1997”)

6. Click “Finish” to complete the process.

7. Now if you run the page you will NOT get the Chart Control.

8. You need to select the Properties of the Chart Control from design view.

9. Make sure under “Data” DataSource is set to “SqlDataSource1” unless you gave a different name and DataMember is set to “DefaultView”

10. Under “Series” in Properties, click on the tab to open up the “Series Collection Editor”.

11. Scroll down the Series1 Properties to DataSource section.

12. Specify “CategoryName” as the XValueMember and “CategorySales” for YValueMembers and click Ok.

13. Build the page and hit F5 to run the page.

14. You will be able to see the Chart in your webpage.

15. Right Click on the chart and you would be able to see that it is an image generated dynamically that can be saved as a “.png” file.

You can download a comprehensive list of samples from here and verify the different implementations and source code for the same. For more details, visit the forums here

Microsoft develops open-source content-management system

Microsoft has developed and released via its CodePlex site an alpha version of a new open-source content-management system, codenamed “Oxite.”

Microsoft made the Oxite source code available for download on December 5. Oxite is available under the Microsoft Public License (MS-Pl), one of its OSI-certified open-source licenses.

From Microsoft’s description of Oxite:

“Oxite provides you with a strong foundation you can build upon - pingbacks, trackbacks, anonymous or authenticated commenting (with optional moderation), gravatar support, RSS feeds at any page level, support for MetaWebLog API (think Windows Live Writer integration made easy), web admin panel, support for Open Search format allowing users to search your site using their browser’s search box, and more - so, you can spend time on designing a great experience.”

Microsoft is positioning Oxite as more than just a blogging engine, claiming it can support even large Web sites. The company also is positioning the platform as customizable, allowing users to swap out Microsoft technologies, like database and search providers — specifically, SQL Server and Live Search — for non-Microsoft ones.

The Oxite content-management platform is “built to take full advantage of ASP.NET MVC but broken into assemblies so that even ASP.NET WebForm developers can use the data backend and utility code, supports use of Visual Studio Team Suite (DB Pro, Test, etc.), and Background Services Architecture (sending trackbacks, emails, etc. all done as a background process to prevent delays on the web site itself),” according to the Softies.

In searching for information on Oxite, I noticed a few folks wondering aloud why Microsoft felt a need to develop another content-management system, given that SharePoint Server provides content-management functionality. One obvious difference is the open-/closed-source aspect of the projects.

Any interest out there in an open-source CMS from Microsoft?

8 simple SEO tips for blogs

Follow these simple rules for search engine optimization and your blog will rank much higher in Search Engines.

1. Use your primary keyword in your blog domain

   The first thing to do is to ensure that your blogs URL contains the primary keyword you want to optimize for. Using the targeted keyword in subdomains also helps.

   For example, if you want to start a HTML tutorial site then the primary keyword you want your URL to contain is html. So choose a URL like www.htmlhelp.com.

   You can also use the keyword in subdomains like www.web-design.com/htmlhelp

2. Use your primary keyphrase in the title of your posts

   If your primary key phrase is html help make sure that the word html and help appear in your blog headers such as H1 and H2 tags as well as the title of each of your posts.

3. Use your secondary keywords in the body of your post

   If you want to get listed for secondary keywords use them infrequently in the body of your post. The theory is that the more times a keyword appears within a Webpage, the more relevant the page is likely to be for someone searching those keywords.

   But do not overdo this by repeating the same keywords over and over again. Google bots can find out if a keyword is too frequent on a page and might just remove your site from their index.

4. Use your keywords in the anchor text of links

   Use your primary and secondary keywords in the anchor text of links when linking to other blog posts or to other pages of your blog. Keyword in links have more importance than simple text.

5. Make sure search engines can spider your blog easily

   Make sure your navigation bar is present on all pages of your blog. Your previous posts or atleast the popular ones should be linked to all pages so they get spidered easily.

6. Get backlinks from other blogs

   You need as many links as possible to link back to your posts or blog because it will help you build pagerank and get your blog to rank higher in search engines. The more links you have the higher your blog is ranked in Technorati helping your blog to be found easily.

   So how do you get backlinks?

   • The first thing to do to get high-quality links is to submit your blog and RSS feed to blog search engines and directories.

     Start by submitting your blog to all the directories listed on this page:
     http://www.masternewmedia.org/rss/top55/

   • Link exchanging with other similarly-themed blogs will help you to form richly interlinked networks or communities.
   • If you find an interesting article on another blog, link to it generously. The trackback will become a link back to your blog.
   • Lastly posting legitimate comments in response to posts on other blogs will help you get backlinks. Regularly post legitimate comments in similarly-themed blogs with high traffic to get many backlinks.
7. Update your blog frequently

   Update your blog frequently using all the rules mentioned above and your blog will surely get top rankings in a short time.

8. Stick with your blog

   Once you start posting on your blog, stick with the same domain or you could end up losing a lot of your traffic and regular readers.

   Also stick with the topic you selected for your blog. If it’s about pets don’t suddenly switch to another topic such as Gadget’s because you will loose traffic.

For tips on building traffic to your blog, read the series- How to increase your blogs traffic

Silverlight : Using ViewportOrigin and ViewportWidth in Deep Zoom

I’m posting this because the documentation on ViewportOrigin is wrong and it might be a while before it can be updated on the live site. In the meantime, this post discusses how to use ViewportOrigin and ViewportWidth to control the viewport. Controlling the viewport allows you to specify the magnification level and location on a MultiScaleImage to zoom in on.

Let’s start with ViewportWidth. This value sets how wide the viewport window is relative to the entire image.

• ViewportWidth = 1: Displays the entire image (default).
• ViewportWidth <>: Zooms in on the image. You zoom in deeper into the image the closer you get to zero where zero is “completely zoomed in” and the user cannot see the image at all. The fraction of the width of the image that is visible is the ViewportWidth.
• ViewportWidth > 1: Zooms out from the image. The number of times the viewport is larger than the image is the ViewportWidth.

Note: See diagram below for examples.

Ok, so the width of the Viewport specifies how much in or out to zoom on the image but it does not specify where on the image the Viewport is viewing. To specify this, use the ViewportOrigin. The top left corner of the viewed image (not the MultiScaleImage, the container panel or canvas in which this image renders) is always (0,0).

For ViewportOrigin, the value specifies where the corner of the viewport should be relative to the corner of the image. This means if you want some blank space between the edge of the image and the viewport, you need to move the viewport to a negative location off the image. If you want the viewport to show just a portion of the image, then it will get moved to a positive location within the full image.

Note that in the diagrams above, I’m using coordinate numbers that conveniently place the image or area of the image within a neat square of the conceptual grid. This is only for demonstration purposes since you can specify any numbers (see diagram below); however, numbers outside the appropriate range (too high or too low) for either ViewportOrigin or ViewportWidth will render nothing of the image.

Note: Special thanks to Dan Cory and Lutz Gerhard (Microsoft Program Managers) for their review and feedback regarding this info.

Thanks,

Kaushik

Silverlight : Where did my ComboBox selected item go?

You might have noticed that sometimes the item in the selection box of a combo box disappears when you reopen the drop-down of the combo.

For example, in the following image, "Arial" is selected,

but doesn't show up in the selection box when the drop-down is reopened.

In contrast, in the following ComboBox, the selected item, "Courier New", is visible in the selection box when the drop-down is reopened.

Here's the code for the first combo box:

The reason the selected item disappears is because a UIElement cannot be in the visual tree more than once. In the first case, I've explicitly created ComboBoxItems and set their content to font names. ComboBoxItem is a UIElement and when it is in the drop-down, it can't be shown in the selection box. When the drop down is closed the UIElement is temporarily moved in the visual tree to be shown as the selected item. This occurs for all UIElements in a Silverlight combo box.

CLR objects that are not derived from UIElement do not have this limitation. In the second case the items are added to the combo box through a binding. The combo box is bound to a collection of strings:

ItemsSource="{Binding}" />

ObservableCollection fonts =
new ObservableCollection();
fonts.Add("Arial");
fonts.Add("Courier New");
fonts.Add("Times New Roman");
FontsCombo.DataContext = fonts;

When CLR objects are used to populate a combo box, UIElements are automatically generated for them using the data template (in this case the default data template is a TextBlock). Two different UIElements are created so CLR objects can be shown in both the selection box and drop-down at the same time.

Hopefully this clears up any confusion. Also this info is now in the online docs.

Kaushik

Tips for using the RadGrid

Brian Mains continues his overview of the Telerik’s RadGrid Component.

Introduction

Previously, I wrote about using the RadGrid control and how to setup the UI for a simple GridView-like look. In this article, I’m going to talk about some of the tips and tricks that you can give the RadGrid to become more responsive.

Row Clicking

When supporting the ability to select a record in the GridView, the grid needs to have a button that triggers the selection of the row. This causes a postback and sets the selected index of the row, raises an event, and performs some other features. The RadGrid provides this capability using a button as well, but goes a step further. By specifying that the grid can post back on a row click, the row can be selected simply by selecting the row.

Listing 1: Enabling postback on a row click

1. <tel:RadGrid ID="rgCourses" runat="server" Skin="Web20"
2. AllowFilteringByColumn="true" onneeddatasource="rgCourses_NeedDataSource"
3. AllowSorting="true">
4. <ClientSettings EnablePostBackOnRowClick="true" />
5. tel:RadGrid>

The ClientSettings property defines a host of client-side features that can be added to the Grid. One of these is the ability to postback upon clicking a row. If setting up that the RadGrid posts back asynchronously (using the RadAjaxManager as previously discussed), the RadGrid’s postback won’t be apparent to the user.

But a postback does occur when the row is clicked, and this fires the RowCommand event called RowClick. For instance, I could use the following code to show an alert, as shown in Listing 2.

Listing 2: Handling a row click

1. protected void rgCourses_ItemCommand(object source, GridCommandEventArgs e)
2. {
3. if (e.CommandName == "RowClick")
4. {
5. RadAjaxManager manager = RadAjaxManager.GetCurrent(this.Page);
6. manager.Alert("Row was clicked!");
7. }
8. }

An alert appears to the user to let them know the row was clicked.

Displaying an Empty Message

When displaying an empty message (when no records exist in the underlying data source), it’s nice to have a message appear and let the users know it. This is where the NoRecordsTemplate comes into play:

Listing 3: No Data Template

1. <MasterTableView AutoGenerateColumns="false" ..>
2. <NoRecordsTemplate>There isn't any data.NoRecordsTemplate>
3. MasterTableView>

But to get this template to appear, it requires a few settings. First, the EnableNoRecordsTemplate sets whether theNoRecordsTemplate appears in the first place. If true, if a non-null collection with no records is returned, the template appears. Note what I said; passing null as the data source does not make the no-records template appear.

Sometimes it’s helpful to have the header of the control appear when the no record template appears in the grid. The GridView doesn’t do this at all; it renders a single cell with the empty message only. The RadGrid gives you some options.

Listing 4: The final code for binding no data

1. <tel:RadGrid ID="rgCourses" runat="server" Skin="Web20"
2. AllowFilteringByColumn="true" onneeddatasource="rgCourses_NeedDataSource"
3. AllowSorting="true">
4. <MasterTableView AutoGenerateColumns="false" EnableNoRecordsTemplate="true"
5. ShowHeadersWhenNoRecords="false">
6. <NoRecordsTemplate>There isn't any data.NoRecordsTemplate>
7. MasterTableView>
8. <ClientSettings />
9. tel:RadGrid>
10. this.rgCourses.DataSource = new object[] {};
11. this.rgCourses.DataBind();

This produces the following result when no data is entered.

Figure 1: Empty Data Message

Editing Data

Editing data works similarly to the GridView, with a noticeable difference. There are different ways to edit the data. For instance, instead of changing the row to edit in the current row, the Telerik RadGrid control edits data using a form beneath the row. This is due to the EditForms setting for the EditMode property of the MasterTableViewproperty. Take a look at the example below:

Figure 2: Editing in a separate form

This can be changed however; editing can occur in place by changing the EditMode property to InPlace.

Listing 5: Setting the EditMode

1. <MasterTableView … EditMode="InPlace">

Changing to in-place editing uses a more familiar GridView-like result shown below.

Figure 3: In-Place editing

A third option is to use the PopUp option; this option pops up a new window that the user can use to edit the information outside of the context of the grid altogether.

To generate the edit button you see above (edit turns to update and cancel just like the GridView does whenever editing is invoked), there are two ways to do this. Turning on AutoGenerateEditColumn at the RadGrid level generates an edit column, as well as using the GridEditCommandColumn class. I opted for the latter approach, as shown in Figure 6.

Listing 6: Generating an update column

1. <tel:GridEditCommandColumn EditText="Update" UniqueName="Update" />

Accessing Rows and Cells

The RadGrid uses the same underlying table structure that the GridView uses, which is the logical choice considering the layout of the user interface. Each row is of the type GridItem; however, its actual underlying representation is GridDataItem or GridEditableItem. This is because the GridItem class is the base class for each of these classes; the GridDataItem represents a read-only data bound item view, whereas the GridEditableItem represents an item currently being edited.

When accessing data (like in ItemDataBound), the event argument’s Item property (represented by the GridItem class) can be cast to one of these two types. This allows accessing of the cell using the unique name, which isn’t defined in the base class (the base class does have a collection of cells though).

For instance, the style of the abstract column could be changed by using the unique name to get the target cell, then change the italicized setting to true as shown in listing 7.

Listing 7: Setting the abstract column’s font to italic

1. if (e.Item is GridDataItem)
2. {
3. ((GridDataItem)e.Item)["Abstract"].Font.Italic = true;
4. }

The GridDataItem changes the abstract to italic for each and every row like you would do in the RowDataBound for the GridView; it’s the same concept here. The nice thing about this approach is that the developer isn’t forced to hard-code a positional index to get the cell; they can reference by a unique name.

The row also has some other useful properties/methods. If wanting to figure out if the row is in edit mode (outside of the underlying row type), you can also check out the GridItem’s IsInEditMode property, which is true for a row currently in edit mode. The GridItem class also has an ItemIndex and ItemType properties for determining position and type of row. Interestingly enough, the GridItem also has a RowIndex that determines the index of the row (which could be different than ItemIndex because of the Grid’s header row in the underlying table).

Auto Generated Columns

Both the GridView and the RadGrid have the ability to auto-generate the columns of the grid using the structure from the underlying data source. The RadGrid control maintains a collection of columns for each of the auto-generated columns, using the AutoGeneratedColumns collection in the GridTableView object.

This collection can be important if you want to access column information in the code-behind. Remember above, using the GridDataItem class, I accessed a column called “Abstract”, which used the unique name. The unique name wouldn’t necessarily be known in an auto generation approach. An alternative approach using this collection could be:

Listing 8: Finding an auto-generated column

1. protected void rgCourses_ItemDataBound(object sender, GridItemEventArgs e)
2. {
3. if (e.Item is GridDataItem)
4. {
5. GridDataItem dataItem = (GridDataItem)e.Item;
6. var column = this.rgCourses.MasterTableView.AutoGeneratedColumns.First(i => i.HeaderText == "Abstract");
7. dataItem[column].Font.Italic = true;
8. }
9. }

Using LINQ, the master table view’s generated columns is queried for a column name with the header “Abstract”, the name of the column. In this case, the unique name probably matches the header text, but in case it doesn’t, the method finds a matching header and uses the column to set the italics for.

Conclusion

In this article, we learned a few tricks for working with the RadGrid control, and how to adjust it to add functionality for certain tasks, and how to support working with its object model on the server-side.

Google adds to search

Google has begun rolling out 3 new additions to its search engine on November 20th. The search engine giant added a Promote, Remove and Comment buttons beside each search to help users define their results better.



The Promote feature will allow you to move results up to the top of the list of your results, for future searches. This little addition to the search engine will help users by adding their favourite web sites to the top of each individual search result, that brings back that page. So for instance, if a user wished to promote www.neowin.net to the top of the page, and query a search for a keyword on the front page, it would place Neowin.net on the top of your search results. This is a benefit for people who promote their favourite sites like Neowin to return the first result.

Beside the Promote button, comes the Remove button. This button will delete that result from your future searches, to prevent it from coming back up again. This could be helpful in blocking those web sites that provide no helpful information to you. This is a great way to stop going back to the same bad result time and time again.

Finally, the Comment button, where users can leave a comment about any result, making it useful for coming back to later. Users can add helpful comments for other users, or for themselves when visiting the site next time.

Google has become one step closer to being your next bookmark organizer. Now you can view, save and edit your favourite sites all within Google. The bad thing about these features is, the fact most people don't search the same thing all the time, making it hard to take advantage of some of these features.