Sung Kim

Putting Anything in a Cell? - Custom Editor Provider for WebDataGrid

[Infragistics] Sung Kim — Tue, 17 Mar 2009 15:10:00 GMT

Have you already considered the RowEditTemplate and Templated Column features but would rather use a custom editor provider? Do you want to use a WebHtmlEditor to edit a cell? How about a chart? Well our WebDataGrid was built from the ground up to allow customer to do such customization without having to rewrite our control. In this post, I am going to show you the basics in making the Microsoft DropDownList become an editor provider for the WebDataGrid. If you aren’t interested in the details, here’s how you would use my DropDownProvider class in your WebDataGrid:

protected void Page_Load(object sender, EventArgs e)
{
    //reference to the custom provider
    DropDownProvider ddprov = null;

    if (!IsPostBack)
    {
        //creates a new provider and adds it to the grid
        ddprov = new DropDownProvider();
        ddprov.ID = "DropDownProvider1";
        this.WebDataGrid1.EditorProviders.Add(ddprov);
        //hooks up the provider to the column by key
        EditingColumnSetting colSet = new EditingColumnSetting();
        colSet.ColumnKey = "Country";
        colSet.EditorID = ddprov.ID;
        this.WebDataGrid1.Behaviors.EditingCore.Behaviors.CellEditing.ColumnSettings.Add(colSet);
    }
    else
    {
        //gets a reference to the provider when posting back
        foreach (EditorProviderBase epd in this.WebDataGrid1.EditorProviders)
        {
            if (epd.ID == "DropDownProvider1")
            {
                ddprov = (DropDownProvider)epd;
            }
        }
    }
    //gets the DropDownList and binds it
    DropDownList ddl = (DropDownList)ddprov.GetEditor();
    ddl.DataSource = getCountries();
    ddl.DataBind();
    ddl.ID = "editor1";
}

The above code is similar to this documentation on using the built in editor providers. The difference being that there is no design time support. If you want the sample, it is at the bottom of this post. If you want to know how this is done so that you could do one of your own, read on.

Where to Start

Getting started is one of the hardest things. Without a guide on how to do something, it is a lot of trial and error. When I started on this, I was thinking to myself “how am I supposed to do this?” Then I realized, we have ten editor providers that shipped with the product!

Looking at the Source Code

As long as you have a subscription to our product, you have the source code for it. If you want to follow along, go get it in your downloads section of our website.

Looking at the source code is not easy. You really have to invest the time to understand it. All of our ASP.NET AJAX controls are in the Infragistics.Web assembly. Once you open that solution, and go to the Infragistics35.Web.UI project, navigate to the GridControls –> WebDataGrid –> EditorProviders folder. In there you will find the code for how we did our editor providers. I looked through a couple of them and noticed that the one for the WebSlider was fairly simple. All it did was inherit from EditorProvider<Type> and overrode two items. I did the same, hooked up my custom provider to the grid and ran the project. I double clicked on a cell and there was my dropdown list being used as a provider.

public class DropDownProvider : EditorProvider<DropDownList>
{
    //the types that this editor provider can edit
    protected override bool CanEditType(Type t)
    {
        string name = t.FullName;
        if (t.Name == "String")
            return true;
        return false;
    }
    //class name that defines behavior on the client side
    protected override string ClientObjectClassName
    {
        get
        {
            return "Infragistics.Web.UI.DropDownProvider";
        }
    }
}

The Client Side

I was ecstatic that such little code was needed to get my control in the cell. My enthusiasm soon died when I realized that I have to write the JavaScript to send data to and from my DropDownList and the grid. I went back to the source code and found the relevant code in igWebDataGridEditorProviders.js under the GridControls –> WebDataGrid –> js folder. In there, I saw that certain methods were overridden depending on the editor provider. I copied some of the code and changed the class names and ran it. Not so lucky this time. I ran into some JavaScript errors. Apparently, my JavaScript needed to be executed after the initialization of our code because of namespaces. I moved the link to my JavaScript file to the end of the body section. After I got past that error, I started debugging the scripts and wrote the code specific to my DropDownList. I made the most changes to get_value, set_value, and _show methods. The get_value and set_value methods are called when passing the values to and from the grid to the editor provider. I changed this to work with the selectedindex property. The _show method, called when showing the editor, was modified to find the grid’s table element. This is necessary so that the control will be hidden when clicking in the grid region, ending edit mode. After these mild changes, the values were getting passed correctly to and from the editor and my editor provider was done or so I thought…

    $IG.DropDownProvider.prototype =
{
    get_value: function() {
        /// <summary>
        /// Overrides the EditorProvider object's property.
        /// Gets/sets the value to/from the underlying DropDownList. 
        /// </summary>
        /// <returns type="Object">Current value in editor.</returns>
        var val = this._editor ? this._editor[this._editor.selectedIndex].text : this._old;
        return this._areEqual(val, this._old) ? this._old0 : val;
    },
    set_value: function(val) {
        /// <summary>Sets initial value in editor.</summary>
        /// <param name="val">Value for editor.</param>
        this._old0 = this._old = val;
        var editor = this._editor;
        if (!editor)
            return;
        for (var x = 0; x < editor.length; x++) {
            if (editor[x].text == val) {
                editor.selectedIndex = x;
            }
        }
        this._old = editor[editor.selectedIndex].text;
    }

More Changes

This sample really started because of a support case. After a few days, my solution came back with a problem. It would give an exception when posting back. Looking through the stack trace, I traced it back to a GetType method call on the full name of my custom class. Since the GetType method will only look in the current assembly (Infragistics.Web), that method was returning null and made the application crash. After some additional digging, the origin of the class name was traced back to a member of ICollectionObject called GetObjectType. I implemented that interface and overwrote that method to return the full name in addition to the assembly. Done! Right? Nope. The assembly name seemed to contain the ‘~’ character. Since, we use that character internally as a separator, I moved my class to a separate class library. It compiled, ran and everything was fine.

string ICollectionObject.GetObjectType()
{
    return (this.GetType().FullName + ", " + this.GetType().Assembly.FullName).Replace('.', '~');
}

Cleaning it up

Since it was already being separated into a separate class library, it didn’t make much sense to have to link JavaScript files in my ASP.NET website. So I moved that file and started the process of registering it as a resource in my code behind of my aspx. I never had to embed resources before so I had to do some digging to find out how to do it. It is fairly straight forward, you need to set an WebResource attribute in your class and you have to set the BuildAction property on the file to be an Embedded Resource. I used the ScriptReference object and added it to my ScriptManager. I ran it and got JavaScript errors due to timing. I decided to wrap my JavaScript definitions in a method and used RegisterStartupScript to execute my method to initialize my editor provider on the client side. Happiness returned momentarily as the application runs without issues.

[assembly: System.Web.UI.WebResource("CustomProviders.js.CustomProviders.js", "text/javascript")]

Never really done

I realized that I may have moved the link to the script out of the aspx but it was still in the application. I looked for a way to remove all references to my script from my application and came across the InitializeEditor method. After realizing I needed a reference to the Page and ScriptManager, I made a constructor that received those two items as parameters. You probably know what going to happen next. You guessed it. It works until I posted back.

The error message read something like “The object does not have a parameterless constructor”. Sigh. If I can’t pass in my references to the page and scriptmanager, how am i going to register my script? The only link I have to my parent (the grid) was internal and I did not have access in my class. I had a reference to my editor but it did not yet belong to the page. After some tinkering, I decided to leverage the DropDownList and handle its PreRender event. At that time, it was late enough that everything was added to the page. I used the static GetCurrent method off the ScriptManager class to obtain the current ScriptManager and I was finally done.

protected override void InitializeEditor()
{
    ((DropDownList)this.EditorControl).PreRender += new EventHandler(DropDownProvider_PreRender);
    base.InitializeEditor();
}

void DropDownProvider_PreRender(object sender, EventArgs e)
{
    Page page = this.EditorControl.Page;
    ScriptManager sm = ScriptManager.GetCurrent(page);

    ScriptReference sr = new ScriptReference("CustomProviders.js.CustomProviders.js", this.GetType().Assembly.FullName);

    sm.Scripts.Add(sr);
    ScriptManager.RegisterStartupScript(page, typeof(Page), "initDDP", @"<script type='text/javascript'>initDropDownProvider();</script>", false);
}

Now you know

Not only do you know the basics to get started in making one of your own editor providers but you also saw the process that goes into a support case that is on the complicated side.

Possible Improvements

There are probably a few things that can be done to improve this. Leave comments below with your thoughts. The purpose of this post was to get you started if you needed to use an editor provider over a Templated Column or the RowEditTemplate feature. With this outline, you really should be able to use any control as an editor provider. You may run into issues but at least it won’t be the ones I ran into.

Sample uses NetAdvantage 8.3.20083.1009 CLR 3.5 and Visual Studio 2008

Full Sample (contains website and code library project, both must reference the same version of NetAdvantage)

Just my CustomProviders dll that contains my DropDownProvider (references 8.3.20083.1009 CLR 3.5)

Publishing Dynamic Files - PDF/XPS Creation Using the Infragistics Document Library

[Infragistics] Sung Kim — Thu, 19 Feb 2009 00:59:00 GMT

So you want to publish your data to a PDF. You've come to the right place to learn about how to not only generate these documents but to manipulate and style them as well. Before we begin, let's familiarize ourselves with the object that the PDF is going to be generated from. In our toolset, we provide a code library to generate these reports called the Infragistics Document Engine. This engine contains all the elements to create and fill a Report object which can then be published to either PDF or XPS, Microsoft's XML paper specification, through a simple method call. Also, since this is a code library, this can be used in both Web and Win platforms.

Explanation regarding content :

Since this can be done on both platforms, the post will be explained through the ASP.NET point of view. Almost all of the code is identical in a Windows Forms environment. The general outline will be an explanation of content, followed by commented code, and then a screenshot of the result.

Exporting in 2ish seconds

Here at Infragistics, we try to make things easy as possible while at the same time providing rich customization options. You can export your grids to our reports without even looking at the Document Engine API. To accomplish this, you will want to drag a UltraWebGridDocumentExporter on to your form where you have your UltraWebGrid that is bound to some data. You will also want to drag on some sort of UI element like a button to initiate the export of the grid's data. Once you have those components on your design surface, handle the clicking of the button and export the data like so:

UltraWebGridDocumentExporter1.Export(UltraWebGrid1);

Generated PDF:

There are some customization options you have off the exporter component. I suggest taking a look at the members of the UltraWebGridDocumentExporter if you want to modify things like Margin, Orientation, or AutoResizing.

The Infragistics Document Library

So you now have a document that you can pass around. This was created from one line of code but it involves many different elements that are nested inside of each other. Here is a link to the elements so you will at least be aware of the cl***I will be talking about.

Essentially, you have elements that layout the content and have certain restrictions on what can be placed inside of them. The basic hierarchy is Report -> Section -> Layout -> Content. Table that shows what can be placed inside of what.

Basically, you create a report then add a section. You can add content like text and images to the section or if you need a more complex layout, use additional layout elements like grids and flows.

The grid and table is essentially very similar with the main difference being the grid requires columns.

The band and group is essentially the same thing with the main different being the group does not have headers, footers, and dividers.

The container element allows you to inject xml.

The flow element allows you to have content that continues from one column to another (think newspapers).

The site element allow you to have complete control over positioning (think absolute positioning through css).

The rest of the elements are pretty self explanatory. Chain (keeps things together), Gap (creates gaps), Rotator (rotates content), Rule (creates a rule), Stretcher (fills the rest of the page).

You also have Trees, Lists, and Text to display content.

Finally, you can also add a Canvas to almost any element to start drawing circles and other primitives.

Common Changes

You may need the following using statements for the code samples below:

using Infragistics.Documents.Report;

using Infragistics.Documents.Report.Section;

using Infragistics.Documents.Report.Text;

using Infragistics.Documents.Graphics;

using Infragistics.Documents.Report.Table;

using Infragistics.Documents.Report.Grid;

using Infragistics.Documents.Report.Band;

using Infragistics.Documents.Report.Flow;

using System.Xml;

Adding headers and footers

Let's make some customization so it doesn't look like just a table of data. To do that, we are going to work with the elements described above. Off the UltraWebGridDocumentExporter object, the export method has a few overloads, one of which allows you to export to a section. To take advantage of this overload, you want to create a the document then add the section. You then make any customization you need and then export the grid to the specified section.

Code for creating a header and page numbers:

//creates a report object
Report r = new Report();
//adds a section to add content to
ISection s1 = r.AddSection();
//sets properties on the section
//to add page numbers
s1.PageNumbering.SkipFirst = true;
s1.PageNumbering.OffsetY = -18;
s1.PageNumbering.Template = "Page [Page #] of [TotalPages]";
//adds a header to the PDF
ISectionHeader s1header = s1.AddHeader();
s1header.Height = 20;
s1header.Repeat = false;
//adds text to the header area
IText s1headertitle = s1header.AddText(0, 0);
s1headertitle.AddContent("Sung's Awesome PDF");
s1headertitle.Alignment = TextAlignment.Center;
IText s1headertimestamp = s1header.AddText(0, 0);
s1headertimestamp.AddContent("Produced: ");
s1headertimestamp.AddDateTime("MM/dd/yyyy hh:mm:ss");
s1headertimestamp.Alignment = TextAlignment.Right;
//exports the grid to the section
this.UltraWebGridDocumentExporter1.Export(this.UltraWebGrid1, s1);
 

PDF with Header:

Exact view of rows

Now I want to export the data based on the current view. Very similar to a screen print, say you only wanted to export the rows that are current expanded. To accomplish this you will want to handle the InitializeRow event of the UltraWebGridDocumentExporter and see if the row is not expanded. If not, skip the exporting of its children through a simple property setting.

if (!e.Row.Expanded)
{
    e.SkipDescendants = true;
}

Exported PDF after only expanding the 2nd row on the ASPX page:

Formatting Rows or Cells

Now let's add styling to certain rows. Maybe the end user is interested in the Orders that are associated with a specific Employee. The following uses the InitializeRow event as above and formats the UltraWebGrid's row. This style is then translated to the PDF when it is created.

Code for styling the row:

//orders table
if (e.Row.Band.Index == 1)
{
    //if the cell value in the employeeid column
    //is 1
    if ((int)(e.Row.Cells.FromKey("EmployeeID").Value)==1)
    {
        //set the style on the row
        //any style set on the row or cell gets applied
        //to the pdf 
        e.Row.Style.BackColor = System.Drawing.Color.Pink;
    }
}

Pink rows in the orders table that have an Employee ID of 1:

Adding Hyperlinks to your document

Besides displaying information, you may want users to be able to quickly go to a url by clicking on an element inside the PDF. To accomplish this, you will want to handle the CellExporting event so that you can create your own content for the appropriate cell. After you find the cell you want to modify, make use the hyperlink feature that is available off the IText element. You may also want to style it differently so that the end user knows it can be clicked on.

Code to replace plain text with a hyperlink in the CustomerID column:

//if the CustomerID column
//and its on the first level
if (e.GridCell.Column.Key == "CustomerID" & e.GridCell.Band.Index == 0)
{
    //style for the hyperlink
    Infragistics.Documents.Report.Text.Style bluelink = new Infragistics.Documents.Report.Text.Style(new Font("Aria", 8, FontStyle.Underline), Brushes.Blue);
    //adds the text with the hyperlink 
    e.ReportCell.AddText().AddContent(e.GridCell.Value.ToString(), bluelink, new Hyperlink(this.Request.Url.ToString() + @"?ID=" + e.GridCell.Value.ToString()));
    //cancels the creation of the normal output
    //for this cell
    e.Cancel = true;
} 
 

Links in PDF:

ASP.NET page is shown when clicking on the "ANATR" hyperlink:

Explanation of PDF generated in the Portfolio Manager Sample

There is a great example of PDF customization in our samples browser called the Portfolio Manager written by Tony Lombardo. You can find the generated PDF here.

Screenshot of Portfolio Manager PDF:

Now that is a great looking pdf. The code is available when you download and install the samples on your machine but I thought I should explain how this is done. There are several events that you want to take advantage of when using our exporter. As we did before this sample makes use of a Export"ing" as opposed to an Export"ed" event. These are the events you want to handle when you want to create your own content for a given region. This following code segment is taken from the RowExporting event off the UltraWebGridDocumentExporter. It creates a chart and p***a reference to the current section and the chart it wants exported to the user defined BuildTable method.

Code in the RowExporting Event:

//if we are exporting the first band/level
if (e.GridRow.Band.Index == 0)
{
    //table used to provide data to the chart
    DataTable tempTable = new DataTable();
    tempTable.Columns.Add("AccountType",typeof(System.String));
    tempTable.Columns.Add("Balance",typeof(System.Decimal));
    //generate data for the chart
    for (int i = 0; i < e.GridRow.Rows.Count; i++)
    {
        tempTable.Rows.Add(new object[] { " "+e.GridRow.Rows[i].Cells.FromKey("AccountType").Value, e.GridRow.Rows[i].Cells.FromKey("Balance").Value });
    }
    //instantiates and sets properties on the chart
    Infragistics.WebUI.UltraWebChart.UltraChart chart = new Infragistics.WebUI.UltraWebChart.UltraChart("chart");
    chart.ChartType = Infragistics.UltraChart.Shared.Styles.ChartType.PieChart3D;
    chart.ColorModel.ModelStyle = Infragistics.UltraChart.Shared.Styles.ColorModels.CustomLinear;
    chart.DataSource = tempTable;
    chart.Height = Unit.Pixel(230);
    chart.Width = Unit.Pixel(420);
    chart.TitleBottom.Extent = 0;
    chart.TitleTop.Text = "Current Asset Allocation";
    chart.TitleTop.HorizontalAlign = StringAlignment.Center;
    chart.TitleTop.Font = new Font("Verdana", 15);
    chart.TitleTop.FontColor = Color.Blue;
    chart.TitleTop.Margins.Top = 10;
    chart.Transform3D.Scale = 100;
    chart.DataBind();
    chart.Legend.Margins.Top = 40;
    chart.Legend.Visible = true;
    chart.Legend.Location = Infragistics.UltraChart.Shared.Styles.LegendLocation.Right;
    chart.Legend.SpanPercentage = 30;
    chart.Legend.BorderThickness = 0;
    chart.Border.Thickness = 0;
    //calls a method to create the layout for each record
    //passing in the section/region of the pdf, grid row information
    //and the chart we just created
    BuildTable(((ISection)e.ContainingTable.Parent),e.GridRow,chart);
}
//sets a booleon so that it does not create the
//default layout of each row in the PDF
e.Cancel = true;

Here is the BuildTable method that creates a Grid element for each row. You will see the use of alternating styles, RowSpan for the last column, and formatting through padding, margin, and size:

private void BuildTable(Infragistics.Documents.Report.Section.ISection section,Infragistics.WebUI.UltraWebGrid.UltraGridRow row, Infragistics.WebUI.UltraWebChart.UltraChart chart)
{
    //creates a grid element to layout the contents of each row
    Infragistics.Documents.Report.Grid.IGrid grid = section.AddGrid();
    //sets some layout properties on the object
    grid.Borders.Corners.All= new Infragistics.Documents.Report.Corner(Infragistics.Documents.Graphics.Pens.DodgerBlue, Infragistics.Documents.Utils.Converter.PixelsToPoints(10));
    grid.Borders.All = new Infragistics.Documents.Report.Border(Infragistics.Documents.Graphics.Pens.DodgerBlue);
    grid.Margins.All = Infragistics.Documents.Utils.Converter.PixelsToPoints(10);
    grid.Paddings.All = Infragistics.Documents.Utils.Converter.PixelsToPoints(10);
    //creates 3 columns for laying out the grid
    IGridColumn labels=grid.AddColumn();
    IGridColumn data = grid.AddColumn();
    IGridColumn chartCol = grid.AddColumn();
    //sets the width of each column
    labels.Width = new Infragistics.Documents.Report.RelativeWidth(15);
    data.Width = new Infragistics.Documents.Report.RelativeWidth(25);
    chartCol.Width = new Infragistics.Documents.Report.RelativeWidth(60);
    //cell count is used to designate the amount
    //of rows created
    int rows = row.Cells.Count;
    //two styles are created to simulate an alternate style
    Infragistics.Documents.Report.Background background1 = new Infragistics.Documents.Report.Background(new Infragistics.Documents.Graphics.LinearGradientBrush(new Infragistics.Documents.Graphics.Color(Color.WhiteSmoke), new Infragistics.Documents.Graphics.Color(Color.Gainsboro), 2f));
    Infragistics.Documents.Report.Background background2 = new Infragistics.Documents.Report.Background(new Infragistics.Documents.Graphics.LinearGradientBrush(new Infragistics.Documents.Graphics.Color(Color.Gainsboro), new Infragistics.Documents.Graphics.Color(Color.WhiteSmoke), 2f));
    for (int i = 0; i < rows; i++)
    {
        //creates a new row on the layout grid for each cell value
        IGridRow irow = grid.AddRow();
        //adds a cell for the label
        //and adds a IText
        IGridCell cell = irow.AddCell();
        cell.Paddings.All = Infragistics.Documents.Utils.Converter.PixelsToPoints(3);
        cell.AddText().AddContent(row.Cells[i].Column.Header.Caption);
        //alternates the style applied
        if (i % 2 == 0)
        {
            cell.Background = background1;
        }
        //adds another cell for displaying 
        //the value
        cell = irow.AddCell();
        cell.Paddings.All = Infragistics.Documents.Utils.Converter.PixelsToPoints(3);
        cell.AddText().AddContent(row.Cells[i] != null && row.Cells[i].Value != null ? row.Cells[i].Value.ToString() : "");
        //alternate style again
        if (i % 2 == 0)
        {
            cell.Background = background2;
        }
        //final cell for displaying the chart
        cell = irow.AddCell();
        cell.Paddings.All = Infragistics.Documents.Utils.Converter.PixelsToPoints(10);
        cell.Alignment.Horizontal = Infragistics.Documents.Report.Alignment.Right;
        //creates a canvas element that the chart
        //can render an image to
        Infragistics.Documents.Report.ICanvas canvas = cell.AddCanvas();
        canvas.Borders.Corners.All = new Infragistics.Documents.Report.Corner(Infragistics.Documents.Graphics.Pens.DimGray, Infragistics.Documents.Utils.Converter.PixelsToPoints(5));
        canvas.Borders.All=new Infragistics.Documents.Report.Border(Infragistics.Documents.Graphics.Pens.DimGray);
        canvas.Height = new Infragistics.Documents.Report.FixedHeight(Infragistics.Documents.Utils.Converter.PixelsToPoints(307f));
        canvas.Width=new Infragistics.Documents.Report.FixedWidth(Infragistics.Documents.Utils.Converter.PixelsToPoints(560f));
        //only creates a chart once for each row
        if(i==0)chart.RenderPdfFriendlyGraphics(canvas.CreateGraphics());
        cell.RowSpan = rows;
    }
}

PDF from scratch

Up till now we worked with the exporter component to generate PDF files. We are now going to use a lot of what we went over to create a PDF from scratch. You will need a reference to the Infragistics.Document assembly. All this code is executed in a button click and is broken up into 3 segments. The first segment deals with creating the report and a section. We then add a header, define some styles and add a grid to layout the first level of the header. I chose to use a grid and the ability to span columns so that I didn't have to define widths. I also use some alignment and some styles on the IText elements.

Code for part 1:

//creates the report
Report r = new Report();
//creates the section
ISection sect1 = r.AddSection();
//creates a non repeating header
ISectionHeader sect1Head = sect1.AddHeader();
sect1Head.Repeat = false;
sect1Head.Height = 80;
 
//styles used in the header
Infragistics.Documents.Report.Text.Style headerstyle = new Infragistics.Documents.Report.Text.Style(new Font("Old English Text MT", 32), Brushes.Black);
Infragistics.Documents.Report.Text.Style headerSmall = new Infragistics.Documents.Report.Text.Style(new Font("Arial", 8), Brushes.Black);
Infragistics.Documents.Report.Text.Style headerTiny = new Infragistics.Documents.Report.Text.Style(new Font("Arial", 6), Brushes.Black);
 
//adds a group to the header to help layout contents
IGroup sect1HeadGroup = sect1Head.AddGroup(0, 0); 
//using grid to layout first set of elements
IGrid sect1HeadGroupGrid = sect1HeadGroup.AddGrid();
//using the gridpattern to style the grid
GridPattern gridPattern = new GridPattern();
gridPattern.Margins = new Margins(5);
gridPattern.Paddings = new Paddings(10);
sect1HeadGroupGrid.ApplyPattern(gridPattern);
//adds 5 columns, columns must be added for a grid element
sect1HeadGroupGrid.AddColumn();
sect1HeadGroupGrid.AddColumn();
sect1HeadGroupGrid.AddColumn();
sect1HeadGroupGrid.AddColumn();
sect1HeadGroupGrid.AddColumn();
//frist row of the grid in the header
IGridRow headergridrow1 = sect1HeadGroupGrid.AddRow();
IGridCell r1c1 = headergridrow1.AddCell();
IText r1c1text = r1c1.AddText();
r1c1text.AddContent("Everything you need to know about NetAdvantage");
r1c1.Borders = new Borders(new Pen(Colors.Black, DashStyle.Solid), 2);
IGridCell r1c2 = headergridrow1.AddCell();
r1c2.ColSpan = 3;
IText sect1HeadText = r1c2.AddText();
sect1HeadText.Alignment = TextAlignment.Center;
sect1HeadText.AddContent("The Sung Kim Times", headerstyle);
IGridCell r1c5 = headergridrow1.AddCell();
IText r1c5text = r1c5.AddText();
r1c5text.AddContent("NetAdvantage 9.1 Releasing Soon!");
//adds a rule after the grid
sect1HeadGroup.AddRule();

Code needed to export the PDF to the browser:

Response.AddHeader("Content-Disposition", "attachment; filename=" + "doc.pdf");
Response.AddHeader("Content-Transfer-Encoding", "binary");
r.Publish(Response.OutputStream, FileFormat.PDF);
Response.Flush();
Response.End();

Generated PDF w/ custom header

The 2nd part deals with adding an additional level of of the header. I chose to use two separate grids so that I could use the rule element and split the content. For the 2nd section, I do more of the same with adding text to cells with some styling.

Code for 2nd part:

//2nd grid for the 2nd row of content
IGrid sect1HeadGroupGrid2 = sect1HeadGroup.AddGrid();
sect1HeadGroupGrid2.AddColumn();
sect1HeadGroupGrid2.AddColumn();
sect1HeadGroupGrid2.AddColumn();
sect1HeadGroupGrid2.AddColumn();
sect1HeadGroupGrid2.AddColumn();
//adds text to various cells with some styles
IGridRow headergridrow2 = sect1HeadGroupGrid2.AddRow();
headergridrow2.AddCell().AddText().AddContent("VOL. I....No. 1", headerSmall);
headergridrow2.AddCell().AddText().AddContent("Copyright 2009 The Sung Kim Times", headerTiny);
headergridrow2.AddCell().AddText().AddContent("TUESDAY, JANUARY 27, 2009", headerSmall);
headergridrow2.AddCell();
headergridrow2.AddCell().AddText().AddContent("Printed in New Jersey, ONE DOLLAR", headerTiny);
//adds a rule to seperate content
sect1HeadGroup.AddRule();
sect1.PageMargins = new Margins(20);

Generated PDF w/ two Grids in the headers:

Now that the header is done, this last part creates the content for the newsletter. Again, I create some styles and add a flow element to the section. I chose to use the flow so that I could emulate the newsletter outline. I load a rss feed into an XmlDocument and filter out the unnecessary data. I then go through each article and create text elements for the pertinent data. I chose to use the table element here so that I could keep content,author and published date, on the same line and also use the KeepSolid property to keep the title, author, and date all together (not split between columns/pages). For the title of each article, I also used a hyperlink so that one could navigate to the actual article by clicking. The description/article portion is relatively long so I add that as a separate IText element. Also, I am using the AddRichContent method as opposed to AddContent method since the description element contains html. If you were to use AddContent, you would have all the tags rendered in your pdf.

Code for the content of the newletter:

//styles used in the report
Infragistics.Documents.Report.Text.Style postTitle = new Infragistics.Documents.Report.Text.Style(new Font("Arial", 18, FontStyle.Underline), Brushes.Blue);
Infragistics.Documents.Report.Text.Style postDescrip = new Infragistics.Documents.Report.Text.Style(new Font("Arial", 10), Brushes.Black);
Infragistics.Documents.Report.Text.Style dateStyle = new Infragistics.Documents.Report.Text.Style(new Font("Aria", 8, FontStyle.Italic), Brushes.Black);
 
//flow used to layout content
IFlow flow = sect1.AddFlow();        
//adding two columns to the flow
IFlowColumn flowcolumn1 = flow.AddColumn();
flowcolumn1.Width = new RelativeWidth(50);
flowcolumn1.Margins.Top = 10;
flowcolumn1.Margins.Right = 10;
IFlowColumn flowcolumn2 = flow.AddColumn();
flowcolumn2.Width = new RelativeWidth(50);
flowcolumn2.Margins.Top = 10;
flowcolumn2.Margins.Left = 10;
//loading data from a rss feed
XmlDocument myfeed = new XmlDocument();
//use the following if you do not have a dropdownlist with urls
//myfeed.Load(@"http://blogs.infragistics.com/blogs/MainFeed.aspx?GroupID=15&Type=AllBlogs");
myfeed.Load(this.DropDownList1.SelectedItem.Value);
//selects the articles from the feed
XmlNodeList articles = myfeed.SelectNodes("rss/channel/item");
//goes through each article
foreach (XmlNode article in articles)
{
    //table used to keep the title and author together
    ITable table = flow.AddTable();
    //keeps content from splitting
    table.KeepSolid = true;
    ITableRow tabler0 = table.AddRow();
    ITableCell tabler0c0 = tabler0.AddCell();
    IText title = tabler0c0.AddText();
    title.AddContent(article["title"].InnerText, postTitle, new Hyperlink(article["link"].InnerText));
    ITableRow tabler1 = table.AddRow();
    ITableCell tabler1c1 = tabler1.AddCell();
    tabler1c1.Width = new FixedWidth(100);
    tabler1c1.AddText().AddContent("by: " + article["dc:creator"].InnerText);
    ITableCell tabler1c2 = tabler1.AddCell();
    tabler1c2.Width = new RelativeWidth(100);
    tabler1c2.AddText().AddContent("published: " + article["pubDate"].InnerText, dateStyle);            
    IText description = flow.AddText();
    description.Style = postDescrip;
    description.AddRichContent(article["description"].InnerText);
}

Final PDF with the header, two columns using the Flow element, and html content through the AddRichContent method:

Additional Comments

You can also export out latest and greatest WebDataGrid to PDF, XPS, and Excel. Take a look at this post by our ASP.NET Product Manager Murtaza Abdeali.

Sample uses the following:

-Infragistics NetAdvantage 2008 Volume 3 CLR 3.5

-Visual Studio 2008

Get full sample here. (388kb)

Just get the Newsletter Sample here. (7kb)

Chart University - Chart 101 and Some 201 301 401 Stuff

[Infragistics] Sung Kim — Fri, 05 Sep 2008 23:41:00 GMT

Charts are fun and apparently useful. They give people the ability to relate information quickly and effectively. They show trends and patterns through the use of polygons in different locations and of varying sizes. Most will probably agree with me on what I have said so far except for the fun part. If you have ever tried to make your own chart, it is definitely not fun. If you succeed, it will look primitive at best and unless you spent a great deal of resources to architect it to be easily extensible, any changes you require down the road will only add more code and bloat your custom control. That is why using our UltraChart control, included in both NetAdvantage for Windows Forms or NetAdvantage for ASP.NET, will make your job much simpler and will impress stubborn crowds with minimal effort.

Where to start...

This post is going to show you the steps required to get familiar with our chart and will show some of the extensibility built into our UltraChart control. Now, before I continue, I want to mention that anything I talk about here will apply to both WinChart and WebChart. Since both are built on the same core code base, your WinChart code will affect your WebChart in the same manner and vice versa. Also, I will use UltraChart to refer to both WinChart and WebChart. A warning, this post is fairly long. Even though this post shows the evolution of an UltraChart as we continue to add to it, you may jump around as each part does not depend on another. Finally, it would be useful to bring in the following namespaces in your using statements:

using Infragistics.UltraChart.Core.Primitives;
using Infragistics.UltraChart.Resources.Appearance;
using Infragistics.UltraChart.Core;

ChartType

I usually learn by doing. So let's do by dragging on a chart control onto your design surface. One of the first properties you should get aquainted with is the ChartType property. This property will dictate the type of chart that is shown to the user to visualize your data. There are many different values for the ChartType enumeration, Line, Bar, Column, Funnel, Candle, Bubble, Treemap, Radar, Heat Map, Pie, Histogram, and Gantt to name some. In addition, there are 3D and 2D variations to some of these charts. For learning purposes, I am going to pick the 2D Column Chart. Complete list here for 2D and 3D.

Data.DataSource

So, we know how we want to visualize the data. But what good is a chart if it has nothing to plot? There are many ways to provide the UltraChart data. You can use an array, class derived from CollectionBase, DataSet, DataView, DataTable, IBindingList, IList, XML file, or Series object. We are going to use a DataTable in this sample, but you can click on any of the above types to go to a help article that walks you through consuming the other types of data sources.

Another step completed. We know where we are going to get the data from and which ChartType will render that data. But, we do not know what kind of arrangement of data or the datatypes the chart expects. This brings us to..

Chart Data Requirements

Here are the requirements for 2D and 3D charts. You will see that there are various requirements for each chart type. Some are more demanding than others. And it's a good thing the Column chart is not one of those demanding types as it only requires one numeric column. So let's create a DataTable with one numeric column. We should be good to go, right? Yes, if you want a chart to render. No, if you want to render in a specific way. By saying no, I am not talking about little tweaks to make the chart to look perfect, but instead you not only need to know what kind of data is necessary but how the UltraChart will interpret that data. In the "ChartTypes" section of the documentation, there are "Working with (insert ChartType here) Data" articles under each ChartType. These articles will give you a sample DataTable and a rendered chart to show you how the data will be represented by that specific chart type. Here's the article for the 2D Column Chart. Based on that example, I created the DataTable shown below.

Code for my DataTable that I will be using:

DataTable dt = new DataTable();
dt.Columns.Add("Month", typeof(string));
dt.Columns.Add("Leads", typeof(int));
dt.Columns.Add("Sales", typeof(int));
dt.Rows.Add("January", 120, 50);
dt.Rows.Add("February", 90, 44);
dt.Rows.Add("March", 70, 22);
dt.Rows.Add("April", 66, 21);
dt.Rows.Add("May", 80, 42);
dt.Rows.Add("June", 85, 48);
ultraChart1.Data.DataSource = dt;
ultraChart1.Data.DataBind();

Here is what my Chart looks like:

Minor Customizations (201)

Now that you should be able to make a chart of any type, let's go into some minor customizations that each of those charts may require.

Custom Axis Range

By default, the axis will scale based on the lowest and highest values, 21 and 120 in this case. If you wanted to set it to show from 0 to 200, you can do that by setting the RangeType to Custom, RangeMax to 200, and RangeMin to 0 on the Y axis.

ultraChart1.Axis.Y.RangeType = Infragistics.UltraChart.Shared.Styles.AxisRangeType.Custom;
ultraChart1.Axis.Y.RangeMax = 200;
ultraChart1.Axis.Y.RangeMin = 0;

Chart after modification:

ColorModel

There are many different ways to control the coloring scheme of chart elements. To do so you want to modify the ColorModel.ModelStyle property to the setting you wish to use. I am going to demonstrate the CustomLinear setting in this sample but you can see the other various ways to modify the appearance being used here.

ultraChart1.ColorModel.ModelStyle = Infragistics.UltraChart.Shared.Styles.ColorModels.CustomLinear;
ultraChart1.ColorModel.CustomPalette = new Color[]{Color.Orange, Color.Orchid, Color.PapayaWhip};

Chart after modification:

Legend

It really isn't too necessary in this sample. But there are cases where a legend can make a chart much more readable. To make use of a legend, simply set it to be visible and set its location like so:

ultraChart1.Legend.Visible = true;
ultraChart1.Legend.Location = Infragistics.UltraChart.Shared.Styles.LegendLocation.Bottom;

Chart after modification:

TitleTop

You may also want to give your chart a title and you can make use of our TitleTop, TitleBottom, TitleLeft, and TitleRight properties. You will want to set the Visible property to true and the Text property for what you wish to display.

ultraChart1.TitleTop.Visible = true;
ultraChart1.TitleTop.Text = "Leads and Sales for Q1 and Q2 of 2008";

Chart after Modification:

Modifications that Require More than 3 Lines of Code (301)

There are also some modifications that are not as simple as flipping a property. These require using some of the events of the UltraChart and some knowledge of elements that make up one of these charts.

Changing the Color of an Item Based on a Condition (2D only)

To change the color of an element, known as a Primitive in the UltraChart world, you want to handle the ChartDrawItem event. In this event, you can check the properties and settings of the current primitive to see if you want to make any modifications. Here are some common properties and conditions you would look at:

e.HasData - if the Primitive being drawn is tied to any data
e.Primitive.Path - Path is a string that signifies where a element lies
- Border.Title.Top is for the Primitive for TitleTop
- Border.Title.Grid.Y is for something on the Y Axis
- Border.Title.Legend is for something in the Legend
e.Primitive.Value - value associated with the given element, usually the data value for a bar or line
certain type of primitive - some types of primitives

private void ultraChart1_ChartDrawItem(object sender, Infragistics.UltraChart.Shared.Events.ChartDrawItemEventArgs e)

{

//try casting the current primitive

//being drawn to a Box

Box b = e.Primitive as Box;

//if current primitive is not a

//box, return

if (b == null)

{

return;

}

//if path is null

if (b.Path == null)

{

//if the value is below 30

if ((double)b.Value < 30)

{

//change the fill and fillstopcolor to red

//setting both since gradients are being used

b.PE.Fill = Color.Red;

b.PE.FillStopColor = Color.Red;

}

Chart after Modification:

Adding Text to the Bars/Columns/Points (2D only)

Charts can be used for getting a general feel for the data or getting exact figures. If the latter is required, you would make use of a ChartTextAppearance object and add it to to the ChartText collection for that ChartType. For a column chart, it would be chart.ColumnChart.ChartText. For a line chart, it would be chart.LineChart.ChartText.

ChartTextAppearance cta = new ChartTextAppearance();
cta.Visible = true;
//-2 signifies all rows or all columns
cta.Row = -2;
cta.Column = -2;
ultraChart1.ColumnChart.ChartText.Add(cta);
 

Chart after Modification:

Adding Various Primitives to the Chart (2D only)

Sometimes you need to add extra elements that are not provided in the data source or even if the data was available, the chart would not interpret that extra information in the manner necessary. To clarify, imagine if you needed to add a target line to your sales chart. If this value was in your table, your column chart would try to make a column out of it as there is no way to specify that value as a target line. Since this line is not directly related to your data, you would have to draw this line in yourself. To do that, you would handle the FillSceneGraph event, create primitives and add them to the SceneGraph.

Code to add a red target line to a column chart:

private void ultraChart1_FillSceneGraph(object sender, Infragistics.UltraChart.Shared.Events.FillSceneGraphEventArgs e)
{
    //gets the X and Y axis
    IAdvanceAxis x = (IAdvanceAxis)e.Grid["X"];
    IAdvanceAxis y = (IAdvanceAxis)e.Grid["Y"];
    //checks if axis exist
    if (x != null)
    {
        //figures out the coordinate to draw 
        //a line at y=100
        int target = 100;
        int yVal = (int)y.Map(target);
        //note: the x axis is a string axis
        //that means that 0 stands for the first 
        //column and 50 stands for the 50th 
        //column                
        int xStart = (int)x.Map(0);
        int xEnd = (int)x.Map(50);
        //creates the line primitive based
        //on the coordinates
        Line l = new Line(new Point(xStart, yVal), new Point(xEnd, yVal));
        //sets the color of the line
        l.PE.Stroke = Color.Red;
        //adds it to the scene
        e.SceneGraph.Add(l);
    }
}

Chart after Modification:

Customizations that are Considered Advanced (401)

There are certain changes that are not necessarily difficult but take a few steps to complete. I will go into a couple of them here.

Custom Labels

There are many areas of text in a chart, whether it is axis tickmark labels, series labels, items labels, chart text, or tooltips. These can be configured to show different text based on a FormatString property off that object. There are some tokens that you can make use of such as <DATA_VALUE> or <ITEM_LABEL> (complete list here) but they do not encompass other more complex scenarios. That's where the IRenderLabel interface comes in. It allows you to customize any of the text on a chart that is configurable via the FormatString property.

To implement this feature, you have to have a class that implements IRenderLabel. This interface has one member, ToString, which will be responsible for returning the string you want displayed given the context being passed in. In this method, you will have access to things like the value of the element you are setting the text for, the row and column the element corresponds to in your table, and even things like the item and series labels that correspond to the given element. Using this information, which is passed in as a hashtable, you can determine your output string and simply return that string. This string will then show up in your chart.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Infragistics.UltraChart.Resources;
namespace WinChart101
{
    class CustomToolTips:IRenderLabel
    {
        #region IRenderLabel Members
        public string ToString(System.Collections.Hashtable context)
        {
            return (string)context["ITEM_LABEL"] +": "+ ((double)context["DATA_VALUE"]).ToString("#")+ " Thousand";
        }
        #endregion
    }
}

Once you have your class set up, you have to hook it up to your chart. You can do that by doing the following:

//Create a hash table. This table will be used to associate a 
//IRenderLabel object with a particular format string
Hashtable myHashTable = new Hashtable();
//Add a custom label string. 
//The first param is the string
//The second param is the IRenderLabel object which will translate the string into the text the user will see on the screen.
//Note that this example is only creating one custom label. You can create as many different custom labels as you want. 
//For each custom label, create a seperate IRenderLabel class and 
//add an entry to the hash table linking the custom label string to the renderer.
myHashTable.Add("MyLabel", new CustomToolTips());
//Attach the Hash table to the Chart
this.ultraChart1.LabelHash = myHashTable;
//Assign the custom label to the ToolTip
this.ultraChart1.Tooltips.Format = Infragistics.UltraChart.Shared.Styles.TooltipStyle.Custom;
this.ultraChart1.Tooltips.FormatString = "<MyLabel>";

old Chart Tooltips:

NEW Chart Tooltips:

Note: This could have been done just by using the following:

this.ultraChart1.Tooltips.Format = Infragistics.UltraChart.Shared.Styles.TooltipStyle.Custom;
this.ultraChart1.Tooltips.FormatString = "<ITEM_LABEL>: <DATA_VALUE:#> Thousand";

The above was to show how you can set your chart to use a class that implements IRenderLabel. Typically, you would use this for when the context is not readily available, ie. when data is in another table.

Composite Charts (2D only)

Composite charts are comprised of various 2D chart layers placed either next to or overlapping each other. Essentially, you can take a candle chart layer, representing the high and low prices, and a column chart layer,representing the volume, and place them on a single chart control making use of the CompositeChart ChartType. To create one of these charts you would have to create the following:

ChartArea - canvas where charts are placed
AxisItem - represents the X or Y axis, requirements based on the ChartType of the ChartLayerAppearance
ChartLayerAppearance - represents the ChartType layer, ie ColumnChart or ScatterChart
Series - provides data to each layer, types of Series that should be used with various ChartTypes

One thing to note, when working with a composite chart you have to provide data through the use of Series objects. Series objects are essentially just a single set of data, that can be bound or not bound. To help visualize what it would represent, think of each line being a series object in a LineChart and the orange columns being one series while the purple columns being another series in my column chart example above. Also, these Series objects can be used with all chart types, not just composite.

Since the code for creating these is quite long, I am not including any code for them here. You can take a look at the walkthroughs in our documentation where there are complete articles on creating these charts through the wizard, designer, and code.

Examples of Composite Charts (pictures only)

Composite Chart w/ Composite Legend:

Multiple Y-Axis w/ Line Layers:

Area and Line Chart in Top Area w/ Spline and Spline Area Chart on Bottom Area:

Pop Quiz!

"Huh?" Don't "huh" me. What would a university be without pop quizzes? (that wasn't the pop quiz)

How do you specify different icons for the scatter chart?
How can I set up my chart to have drill down (where you can click on a chart element to get a chart with further detailed information)?
How can I set up the chart to allow zooming/scaling?
How to I get a chart into a PDF document?
How can I use the chart to plot just one or two values effectively? (think gauges, like a thermometer)

Answers (no looking before attempting the questions!)

So, how'd you do? Don't feel too bad if you didn't know any of the them. I really didn't cover any of those topics. I just was showing you that there are lots more to charts and this post does not cover everything that has to do with chart. If you come up with any more questions that you can't find the answer to after reviewing the documentation, community site, and knowledge base, make use of the resources you have available, our support team and the forums. For the questions above, here are the answers.

Each ChartType has a different set of properties that affect it. In the "ChartTypes" section of the documentation, there are "(insert ChartType here) - Specific Properties" articles under each ChartType. For the ScatterChart, there is a Icon property that controls which icon is used.
You can implement the IDrillDown interface. Help articles that explains this here.
Different answers for Win or Web
1. Win - can be set for x, y or both
  
  ultraChart1.Axis.X.ScrollScale.Visible = true;
  
  ultraChart1.Axis.X.ScrollScale.Scale = .5;
2. Web - must set at design time so that the control will copy over the necessary scrollbar images
  
  UltraChart1.EnableScrollBar = true;
There is a RenderPdfFriendlyGraphics method that you would call passing in a graphics object off the pdf. (Note: Requires a reference to the Infragistics.Documents assembly)
Kind of a trick question, you could just give it that one value and it would plot just fine. However, you are probably better off using a gauge. There are three different variations, radial, linear, or digital. Like the UltraChart, you can also layer different types of gauges on top of each other (think your car speedometer that has an odometer also).

Graduation Day

If you read and understood every topic in this post, you have enough information to make most of the charts you will need in your application. Congratulations, you are now a graduate of Chart University. You will not be getting a paper diploma nor a diploma at all for that matter, just charts that will effectively convey information without causing too much stress.

Windows Forms sample uses the following:

-Infragistics NetAdvantage 2008 Volume 2 CLR 2.0

-Visual Studio 2008

Minimum requirements:

-Infragistics NetAdvantage (various version depending on feature being used)

Get Windows Forms Sample here.

ASP.NET sample uses the following:

-Infragistics NetAdvantage 2008 Volume 2 CLR 3.5

-Visual Studio 2008

Minimum requirements:

-Infragistics NetAdvantage (various version depending on feature being used)

Get ASP.NET Sample here.

Poof Goes the NavigationOverflowButtonAreaUIElement - Creation Filter Explained

[Infragistics] Sung Kim — Thu, 28 Aug 2008 20:57:00 GMT

Rising Cost of Real Estate - Adding (not covered) or Removing Elements in your Windows Forms Application

So you have only so much screen space to work with and you could really do without that extra bar at the bottom of the Outlook style UltraExplorerBar. You really do not have the time to go into the source code and recompile everything for such a feature. There has to be a better alternative. Right? Since you decided to use the Infragistics toolset, you are in luck. Since our controls are built on top of our Presentation Layer Framework, you can take advantage of a feature called a creation filter which allows you to keep certain elements from being created and/or allows you to create your own elements that you can embed in various areas of your controls.

To better explain, you have this:

but want this:

Getting Started

Because this deals with removing an element, you know you have to use a creation filter to accomplish this task. First you create your class and have it implement the IUIElementCreationFilter interface. It will generate two method stubs where you can hook into the various levels of elements in our controls. BeforeCreateChildElements will be called for every element before child elements of the current element is created. AfterCreateChildElements will be called after all the child elements are created and positioned.

Here is what your class will look like:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Infragistics.Win;
namespace ExplorerBar_CreationFilterCS
{
    class XPBar_CreationFilter:IUIElementCreationFilter
    {
        #region IUIElementCreationFilter Members
        public void AfterCreateChildElements(UIElement parent)
        {
        }
        public bool BeforeCreateChildElements(UIElement parent)
        {
            return false;
        }
        #endregion
    }
}
 

Hook it up

You have your class but now you have to tell the UltraExplorerBar to use that class. This step is very simple but sometimes forgotten. To do this, you just assign an instance of your class to the CreationFilter property off the control like so:

ultraExplorerBar1.CreationFilter = new XPBar_CreationFilter();

But that didn't do anything

Well we still didn't write any logic, so yes, we really haven't done anything yet. To figure out what we need to do, we need to make use of a utility call the Infragistics UIElementViewer Utility. More information on the tool and the download link can be found on Devin Rader's Blog here.

Doing Something

So let's use this spiffy new tool. Add the dialog to your toolbox (through drag drop or choose items) and drag the dialog onto your form.

Once on your form, you can show the dialog by calling the show method like so:

uiElementViewerDialog1.Show();

You then use the dialog by clicking on the binoculars and dragging it over the various areas of the Infragistics controls. This will show you the current UIElement being inspected and where the current element exists in the tree of elements.

Using the information of the class name that represents each element and the hierarchy used to construct the control, you can begin to write the logic to remove that bottom element from your control.

Writing the Code

One of the simplest creation filters you can write is when you just remove an element. To do that, in the BeforeCreateChildElements method, you check for the parent element and return true. You can only do this if the element you are trying to remove does not have any siblings. This is because the siblings will not be created in addition to the element you are interested in. Since the element we are trying to remove does have a sibling we have to take an alternative method.

So BeforeCreateChildElements is out of the equation. Let's take a look at AfterCreateChildElements. In here, you want to do the same where you check for the parent type which is the NavigationAreaUIElement type in this case. In that condition, you then call GetDescendant to retrieve the object so you can remove it from the ChildElements collection of the parent.

public void AfterCreateChildElements(UIElement parent)
{
    //checks to see if we have currently drawn the NavigationAreaUIElement's children
    //so we have access to its children which we need to modify
    if (parent is Infragistics.Win.UltraWinExplorerBar.NavigationAreaUIElement)
    {
        //gets the NavigationOverflowButtonAreaUIElement so that we can remove it
        Infragistics.Win.UIElement overarea = parent.GetDescendant(typeof(Infragistics.Win.UltraWinExplorerBar.NavigationOverflowButtonAreaUIElement));
        //if such a child exists we remove it and note its height
        if (overarea != null)
        {
            parent.ChildElements.Remove(overarea);
        }
    }            
}

When you run this code, you will notice that the control does not look quite as you would expect.

Since Windows Forms elements are essentially absolutely positioned, you have to reposition/resize all the other elements like so:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Infragistics.Win;
namespace ExplorerBar_CreationFilterCS
{
    class XPBar_CreationFilter : IUIElementCreationFilter
    {
        private int offsetHeight;
        #region IUIElementCreationFilter Members
        public void AfterCreateChildElements(UIElement parent)
        {
            //checks to see if we have currently drawn the NavigationAreaUIElement's children
            //so we have access to its children which we need to modify
            if (parent is Infragistics.Win.UltraWinExplorerBar.NavigationAreaUIElement)
            {
                //gets the NavigationOverflowButtonAreaUIElement so that we can remove it
                Infragistics.Win.UIElement overarea = parent.GetDescendant(typeof(Infragistics.Win.UltraWinExplorerBar.NavigationOverflowButtonAreaUIElement));
                //if such a child exists we remove it and note its height
                if (overarea != null)
                {
                    offsetHeight = overarea.Rect.Height;
                    parent.ChildElements.Remove(overarea);
                }
                //gets the area that shows the groups contents
                Infragistics.Win.UIElement GroupArea = parent.Parent.GetDescendant(typeof(Infragistics.Win.UltraWinExplorerBar.GroupUIElement));
                //gets the splitter used by the group buttons and the group content area
                Infragistics.Win.UIElement splitter = parent.Parent.GetDescendant(typeof(Infragistics.Win.UltraWinExplorerBar.NavigationSplitterBarUIElement));
                //gets the area which houses the group buttons
                Infragistics.Win.UIElement area = parent.Parent.GetDescendant(typeof(Infragistics.Win.UltraWinExplorerBar.NavigationAreaUIElement));
                //offsets the group button area at the bottom by the offset amount
                area.Offset(0, offsetHeight);
                //offsets the splitter by the offset amount
                splitter.Offset(0, offsetHeight);
                //resizes the group contents area to expand to fill the empty space based on the offset amount
                GroupArea.Rect = new System.Drawing.Rectangle(GroupArea.Rect.Left, GroupArea.Rect.Top, GroupArea.Rect.Width, GroupArea.Rect.Height + offsetHeight);
            }
        }
        public bool BeforeCreateChildElements(UIElement parent)
        {
            return false;
        }
        #endregion
    }
}

This is a very powerful tool that lets you do virtually anything with our Windows Forms controls. No property for that visual feature you want? No problem. Use a filter.

Oh By The Way...

There are three other types of filters out there. I may write something on them in the future, but here are some links if you want a head start:

Draw Filter

Cursor Filter

Selection Strategy Filter

Some Samples in our Knowledge Base:

Creation Filters

Draw Filters

Sample uses the following:

-Infragistics NetAdvantage 2008 Volume 2 CLR 2.0

-Visual Studio 2008

Minimum requirements:

-Infragistics NetAdvantage

Get Sample here.

Special Delivery from the Microsoft Convention Center - Devscovery Slides and Demos

[Infragistics] Sung Kim — Fri, 22 Aug 2008 04:59:27 GMT

Here are the slides and demos from my CSOM presentation that I gave this morning at Devscovery - Redmond. I added some comments in the code so that it should be easier to understand.

So that you kind of know what each sample is about, here is a brief overview on the samples and what each of them accomplish.

Aikido_Slider.aspx - Simple use of a slider updating a textbox through use of the ValueChanging event

Tree_Recursive_Checkbox.aspx - Use of recursion to check all children

WebDateChooser_SmartNavigate.aspx - Autoselect days when navigating to different months in the dropdown

WebGrid_FillOrders.aspx - Filter webcombo controls in each column based on selection of previous column (based on this sample)

WebGrid_HandlingCRUDErrors.aspx - Use WebDialogWindow to notify the end user of errors when updating the database (based on this help article)

WebTabGridDialogEditor_PageMethod.aspx - Use of Page Methods to show performant AJAX operations in conjunction with tab events and our dialog window (based on this sample but uses PageMethods)

Drag and Drop from UltraWebTree to WebSchedule - sample and walkthrough can be found here

Notes: Make sure to change the connection string in the web.config to your Northwind.

Sample uses the following (can also use CLR 2.0 version and/or Visual Studio 2005):

-Infragistics NetAdvantage 2008 Volume 2 CLR 3.5

-Visual Studio 2008

Slides

Demo

Making Your Web Pages Dance - Intro to Client Side Object Model Programming

[Infragistics] Sung Kim — Sat, 16 Aug 2008 02:11:00 GMT

“Why Would I want to make my Web Pages Dance?”

Well not really dance, but be alive and react. Using our CSOM, you can make your pages more responsive to user actions without having to post back to the server. This is all possible with JavaScript and the custom objects we expose. These custom objects represent our server side controls and has a lot of methods and properties that you can access on the client side. You would retrieve our objects through utility functions and work with them in the context of the any page or element event including the custom events available within each control.

Simple Scenario from Conception to Realization

So in case none of that made sense. Let’s start with a simple sample. Let’s say we have an Infragistics WebDateChooser, a date time picker with a calendar dropdown.

WebDateChooser:

One day, your boss comes to you and adds a new requirement. When you navigate to a different month, he wants the control to auto pick the first date for that month if no date is already selected. If a date is already selected, a date that matches the same day should be selected. So if, 8/28/2008 is selected and we navigate to June, we want 6/28/2008 to be selected. Oh and by the way, no post back.

At this point you’re probably scratching your head and saying, “Now, how do you want me to do that?” Using our CSOM, you will not only have access to pertinent data that will help you accomplish this task but will automatically persist the values you set for when you do go back to the server.

Obtaining the Custom Object

In order to obtain a custom object you have to pass the client id of a control to the utility function. There is a one or more utility functions for each control and they will be different depending on the control. The WebDateChooser utility function looks like the following:

var oCombo = igdrp_getComboById(‘<%= WebDateChooser1.ClientID %>');

Once we call this line of JavaScript, we now have a reference to the WebDateChooser object in the oCombo variable. Since we have the object, we also have access to all the members of that object.

Implementing the Solution

Now that we know how to get the object, we have to figure out where we need to access this object so we can do our custom action. If you look at the Client-Side Events for the WebDateChooser, one of them will stick out, CalendarMonthChanged. This makes sense since we want to execute our logic when the month is changed. To handle this event, we go to the ClientSideEvents property in Visual Studio, find the CalendarMonthChanged property and go to AddHandler.

Adding the handler via Properties Grid is the equivalent of doing the following in your aspx markup:

<igsch:WebDateChooser ID="WebDateChooser1" runat="server">

</ClientSideEvents>

</igsch:WebDateChooser>

Once, you handle the event you can add the necessary JavaScript code to accomplish the task.

function WebDateChooser1_CalendarMonthChanged(oCalendar, oDate, oEvent) {

//grabs the value if any of the WebDateChooser

var oldValue = igdrp_getComboById('<%= WebDateChooser1.ClientID %>').getValue();

//checks if a value exists

if (oldValue != null) {

//gets the Date for the old value, ie. 28,29

var date = oldValue.getDate();

//gets the month value for the new date

var newMonth = oDate.getMonth();

//sets the Date portion on the new date

oDate.setDate(date);

//if the month value changes, go into this loop

//month value would change if the date was not

//available for that month, ie. February 30 does not exist

//will leave when the date being set is valid for that month

while (newMonth != oDate.getMonth()) {

//resets the mont to the month it should be

oDate.setMonth(newMonth);

//decrements the date by 1

date = date - 1;

//sets the date again

oDate.setDate(date);

}

//sets the SelectedDate on the CalendarDropDown

oCalendar.setSelectedDate(oDate);

//sets the Value on the WebDateChooser

igdrp_getComboById('<%= WebDateChooser1.ClientID %>').setValue(oDate);

}

But I Want to Auto-Check Child Nodes in My UltraWebTree when a Parent Node is Checked

While the above code will not accomplish this task(obviously), it is a scenario that can be accomplished with our CSOM. Using the same procedure above you would look through the various events that are available, obtain our custom objects and work with the various members off those objects. The best thing I can recommend when implementing these solutions is to use the debugger keyword (you can use breakpoints in VS08) so you can break into specific regions of code and examine objects. Now go liven up your pages.

Sample uses the following:

-Infragistics NetAdvantage 2008 Volume 2 CLR 3.5

-Visual Studio 2008

Get Sample here.

Drop it Like its Windows - Drag and Drop on the Web

[Infragistics] Sung Kim — Fri, 08 Aug 2008 20:40:00 GMT

Drag what on my Web Page?

Drag and drop has been prevalent in Windows Forms but not so much in ASP.NET. To bridge that disparity, Microsoft is working on a Drag and Drop framework built into ASP.NET AJAX Framework. Leveraging this evolving tool, I am going to show how you how we can incorporate drag and drop functionality into an ASP.NET page, specifically one that uses Infragistics controls.

Intro to Drag and Drop

To begin, we should familiarize ourselves with the basic usage of this framework. Jeff Prosise wrote a great article on MSDN that explains how to use this framework between several div elements. Going through this article should give you the basics on setting up your page for drag and drop. Please make sure you understand the concepts, such as DragDropManager, IDragSource, and IDropTarget, illustrated in the above article as I do not go over them in this post.

Drag and Drop from UltraWebTree to WebDayView

So, just setting an UltraWebTree as a drag source and an WebDayView as a drop target should be all you would have to do. Not quite, due to the wealth of information stored in various elements in each of these controls, we have to set up each element that contains relevant information as a drag source and each specific region that can accept a drop as a drop target. The elements you are setting as sources and targets will always change depending on the control you are interfacing with, but the process by which you identify these elements should be relatively similar. Essentially, if it matters where on the control you drag from or drop to, you have to set up each element in that control separately.

Note: We could just set the UltraWebTree as a single drag source and the WebDayView as a single drop target using logic built off the elementFromPoint method, but due to Firefox 2 not having such a method ( exists in Firefox 3), such an implementation would work only in IE and Safari. Based off the cursor position, this method would be used to figure out which specific element you are over inside of each control, removing the need to set up each applicable element as a source/target.

One way to obtain the element directly under the cursor if you were to register the entire controls as a target/source:

//obtains the element that the mouse is currently over

var visual=document.elementFromPoint(window._event.clientX,window._event.clientY);

//when dragging, the visual will be directly under the cursor

//so we have to hide the visual first

visual.style.display='none';

//call the method again to obtain the element that was under the visual

var actual=document.elementFromPoint(window._event.clientX,window._event.clientY);

Drag Source Elements in an UltraWebTree

To set up certain elements as Drag Sources, we are going to use the Client Side Object Model to filter the nodes that can be dragged. For this example, we are only going to allow the first set of children under the root nodes to be a drag source. For each of these node objects, we call the getElement method to obtain the HTML element associated with that object. We then pass each of these elements into the constructor for the drag source with additional information to aid in obtaining this object later in the drop event of the target.

Code for setting each applicable child element of the UltraWebTree as a drag source:

//obtains the id rendered on the client for the UltraWebTree

var treeId='<%= UltraWebTree1.ClientID %>';

//gets the tree object using the tree utility function

var tree=igtree_getTreeById(treeId);

//gets the first level of nodes

var firstlevel=tree.getNodes();

var children;

var source;

//loops through all the first level nodes

for(var i=0;i<firstlevel.length;i++)

{

//gets the children of each first level node

    children=firstlevel[ i].getChildNodes();

    //loops through all the children on the current first level node being examined

    for(var j=0;j<children.length;j++)

    {

        //for each node, we obtain the equivalent html element then obtain the SPAN element that context the text

        var element=getElementsByAttribute(children[j].getElement(),'SPAN','igtxt','1')[0];

        //initializes the drag source with the constructor

        source=new IG.UI.AppointmentInfoDragSourceBehavior(element,children[j].Id);

        source.initialize();

    }

}

Drop Target Elements in a WebDayView

Getting each individual time slot in the WebDayView is not as simple as the previous implementation for the tree. By examining the elements that make up the control using the IE Developer Toolbar, you can see that there is an attribute applied to each of these time slots called ‘uie’ and has a value of SLOT before the identification number. The ‘uie’ attribute is actually used extensively through all the WebSchedule views and its various elements that make up the entire control.

IE Developer Toolbar being used to investigate elements of the WebDayView:

Knowing this information, I found a "getElementsByAttribute" function online that would return these elements based on those criteria of an element that has an attribute of ‘uie’ and the value of that attribute starting with ‘SLOT’. Since the original version checked for an exact match and not a ‘starts with’ condition, I added an extra boolean parameter to modify the regular expression used.

Code for setting each applicable child element of the WebDayView as a drop target:

//obtains the id rendered on the client for the WebDayView

var dayId='<%= WebDayView1.ClientID %>';

//gets every TD element from the dayview tree that

//has an attribute of uie that has a value starting with 'SLOT'

var elemArray = getElementsByAttribute($get(dayId),'TD','uie','SLOT');

var target;

//loops through retrieved elements and initializes each as a drop target

for (var i=0; i<elemArray.length; i++)

{

    target=new IG.UI.AppointmentInfoDropTargetBehavior(elemArray[ i],"Day",dayId);

    target.initialize();

}

Making the Two Play Nice with the Framework and Each Other

With the sources and targets set up, they now have to interact correctly in a drag drop operation. The first thing we should look at is the data being transferred. I could have passed the node’s text as the data in the drag drop operation, but what if I also wanted the node’s key data or text of the child nodes of the source node. To allow for such conditions I passed the actual id of the node so that the node object and its members would be available to me in the drop portion of the operation.

Using the UltraWebTree's utility function to obtain the node from the id passed through the data context in the drop event:

newact.setSubject(igtree_getNodeById(data).getText());

On the WebDayView side of things, the time slot elements do not have an id associated with them. With no id to use with our utility functions, you could not work with the information you obtain from these time slots. To remedy this, we passed in the id of the parent control in addition to another string which identifies what type of view the element belongs to.

Obtains the WebDayView and WebScheduleInfo objects in order to create an activity and configure it based on source and target information:

//gets the number after the string 'SLOT' on the uie attribute

var slotnum=parseInt(this.get_element().attributes['uie'].value.replace("SLOT",""));

//gets the dayview object from the id that was passed in through the constructor

var dayview=ig_getWebDayViewById(this._parentControlID) ;

//gets the info object

info=dayview.getWebScheduleInfo();

var interval=dayview.getTimeSlotInterval();

//gets the activities collection and creates an activity

var activities = info.getActivities();

newact=activities.createActivity();

//set the appropriate time information based on the slotnum and interval

var newDate=newact.getStartDateTime();

newDate.setHours(slotnum*interval/60);

newDate.setMinutes(slotnum*interval%60);

newDate.setFullYear(currentDay.getFullYear());

newDate.setMonth(currentDay.getMonth());

newDate.setDate(currentDay.getDate());

newact.setDuration(interval);

Going Further

Once we have everything connected, we can write the code in the drop event to do whatever operation we wanted to speed up. This specific case was to create appointments faster based on nodes in a tree. To do this, we use the slot # of the WebDayView element, translate that to a time, and set that time on a new appointment. In addition, we pull information from the node and set it as the subject of the appointment as well. Finally, we show the appointment dialog with the information we just set. We now have a drag and drop operation that removes several steps in the creation of a new appointment.

Drag and Drop in action:

Appointment Dialog Popup after Drop Operation:

Note: In the sample that is available at the bottom, I also added logic for the WebWeekView and the WebMonthView as well. I employed the same strategies to obtain the appropriate elements to set as drop targets.

What Now?

Use it of course. Before you stop reading and work on your own implementation, there are some things you want to take into consideration. This is a preview and not in the core framework. I did run into some long running script issues. It may have to do with my implementation or simply the amount of sources and targets that I have. I am not sure as of now since I did not have a chance to look at the underlying source. However, it is a powerful tool and adds an element of coolness to your application in addition to enhanced productivity. Also, this is not the only way to implement drag and drop. One other alternative is the Infragistics drag and drop framework which is available for sampling in the July 2008 Akido Community Tech Preview. I did some preliminary work with our framework and did not seem to have the long running script issues. Look for an article on that implementation in the future…

Sample uses the following:

-Infragistics NetAdvantage 2008 Volume 2 CLR 3.5

-Visual Studio 2008

Minimum requirements:

-Infragistics NetAdvantage 2007 Volume 1

-Visual Studio 2005 with ASP.NET AJAX 1.0 or Visual Studio 2008

Get Sample here.

Who?

[Infragistics] Sung Kim — Tue, 05 Aug 2008 18:09:00 GMT

So this is how blogs (or just this blog) are born. Someone (Anthony Lombardo) asks if you (me) want to blog and you (me again) say sure. And a blog is born. Seeing as this is a new blog, I feel I should introduce myself so you know who is talking. My name is Sung Kim and I work as a Technical Evangelist for Infragistics. My professional experience is entirely .NET based and I originally started at this company as a Developer Support Engineer. During my time in support, I have gauged areas where customers have most of their difficulties. Using that knowledge, I will be posting based on those problem areas. Expect to see anything .NET related in this blog. It will be fairly technical, showing “How-To”s and clarifying confusing topics.