In this blog post we will have a look at some of the Visual studio extensions that have been created for Syncfusion MVC components. Given the nature of MVC products, a bit of configuration needs to be done before we can actually start with using a required control in the application. I call this as the Configuration phase of the application . Lets look at the steps in this phase:
1. Adding Reference Assemblies – add the required assemblies .
2. Adding Scripts – add the Jquery and the MicrosoftAjax scripts.
3. Adding Codes to the Web.config File – add the appropriate namespaces and register the handlers.
4. Adding Resource Manager - register the MvcStaticResourceManager that helps in registering the css and scripts required to display and add functionality to the controls.
Once we are done with the Configuration phase, we may then move to the design phase where we actually start designing the application by using the desired controls.
In this blog post I will focus my attention to the configuration phase. Obviously, all the above mentioned configuration steps are mandatory in order to start using the controls, but wouldn’t be great if we could just bypass this phase and start designing the application right away. Most other platforms come with the luxury of a toolbox and a designer where you can quickly drag and drop the controls unlike MVC. So in order to compensate (in a way) for this, we have created predefined project templates for all our MVC controls namely Grid, Tools, Gauge, Schedule and Chart . These predefined project templates will take care of all the configurations required in order to start using a particular MVC control, so you can focus on the design part alone.
The following steps explain how you can start using the custom project templates:
1. Download the project templates for VS2010. Unzip the folder ‘SyncfusionMVC’. This folder contains the project templates for all the Syncfusion MVC products namely Grid, Tools, Schedule, Chart and Gauge.
2. By default , the project templates in VS2010 are stored in the following location:
%UserProfile%\Documents\Visual Studio 2010\Templates\ProjectTemplates
As we have created the templates for C# alone , it will be more meaningful to place them under the folder Visual C# . (Note: Do not unzip the inner folders which are shown in the image above)
Figure 1: Syncfusion MVC project templates
3. Now restart your Visual Studio 2010 and click on New Project . Expand the Visual C# node and you will find the SyncfusionMVC node as a child node.
As you see on the right , the project templates for all the products are displayed. To use them, just select the appropriate template and start using the controls right away.
To show how really effortless it is to get started with using the Syncfusion MVC controls using these templates, let us create a simple application using the Syncfusion RichTextEditor control (RTE). So to use the RTE control, we first navigate to VS2010 --> New Project –> Visual C# –> Syncfusion MVC, then select MvcToolsApplication project template. Name the application and click OK.
This will create a new MVC application with all the predefined settings ( which we call as the steps of the Configuration phase).
As you will see in the References section, the Tools and Shared Mvc references are already added.
The Web.Config file will contain the assembly references , the namespaces and all the handlers. Also the scripts and the RegisterStaticResources() will be added in the Site.Master .
Now all that we will have to do is create an object of the RTE control in the view.
Run the solution and up comes the RTE on your screen. !!!
More in Store!
Empty projects
In the same way , all other projects can be configured in just one click (by using this template ) and you can straight away start designing your application. The project templates attached in this blog are derived from default MVC 2 project templates and therefore they will contain all the junk that come along with it. We will also provide similar Empty MVC project templates (just as MS does) in our upcoming release (2010 Volume 4). These project templates will get installed automatically along with the setup for MVC controls in our upcoming version.
Version Manager- VS2010 Add-In
Apart from this we will also provide a VS2010 Add-in for configuring the version numbers in these project templates. By default we will upgrade the project templates to refer to the latest version of the assemblies installed , however if you are using any other version, then this add-in can be used to update the version in your Web.Config files.
Its not over yet!
Item Templates
So with these project templates , the configuration phase is taken care of! How would it be if we go one more step ahead and configure the control too for you . Here comes the T4 template to the rescue! We will provide custom item templates for our grid and editor controls , which make use of the strongly typed views , so that binding to these controls also becomes a one step process just as the configuration phase. Stay tuned for a preview of the Item templates , will blog about them in my next post.
Download Syncfusion MVC Project Templates for VS2010 here:
Syncfusion’s WPF chart control has been built to deliver very high performance. Performance is an important criterion in the following two scenarios:
Syncfusion offers around 35+ chart types. For more popular charts, you could find FastCharts like “FastLine”, “FastScatter”, etc. For better performance, use these FastCharts.
In FastCharts, the most efficient WPF rendering ways are used. For example, in the default column charts, Rectangle shape (WPF’s Shape-derived class) is used to draw the column charts; whereas in the FastColumn, DrawingVisual is used to draw the rectangles. FastLine uses one PolyLine instead of multiple Line shapes when compared to regular line charts. Please refer to the following WPF class hierarchy diagram:
DrawingVisual, which is derived from Visual, is the lowest-level rendering object in the WPF. Whereas Shapes sits three levels on top of the class hierarchy, adding all the higher-level WPF essentials like layout, events, data-bindings, animations, etc. So, with a column type plotting 1000 points, the chart creates 1000 WPF rectangle shapes; whereas FastColumn creates visuals instead and manages the layout and hit-testing. With only a few points, you may not notice any differences, but with thousands of points, using FastChart types would yield around 10 times an improvement in load time with less memory foot-prints.
Using the FastChart types instead of a regular chart has some limitations since the chart uses low-level DrawingVisual objects. With the FastChart types, animations and custom templates are not possible. All the other common features like changing the chart’s color, mouse-events support and ToolTips are available.
The other scenario where performance comes into the picture is with real- time data charts. When new points are added to the underlying data source, a chart has to refresh very fast to render the new points.
With Syncfusion’s chart, when new points are added, only a partial rendering happens; just the new point will be appended to the existing chart.
Say, for example, in “FastLine”, when a new point is added, a new line will be appended to the existing PolyLine - no redrawing. But when the added points reach the maximum x-axis range, the chart has to recalculate the x-axis range again and redraw the graph. To handle this scenario, you could make use of the ChartSeries.AutoDiscard property. When new values are added at run time, AutoDiscard can be set to following options:
When set to ExtendRange, the x-axis range is extended when the added points reach the maximum x-axis range. Say initially that the x-axis has 0-50, when the 50th point is added, the x-axis range will update to 0-100. In this case, the whole chart rendering takes place only once when the maximum range is reached. If new points are appended until they reach the 100th value, then the range will change to 0-200 and so on. This reduces the frequent redrawing of the chart series.
With ResetRange, old values are discarded and only the new range is shown. Say from 0-50 initially, and when the 50th point is added, the x-axis range changes to 50-100, then to 100-150 and so on.
If data points are updated in a batch—for example, 100 points every second, then it doesn’t make sense to update the chart area after each point addition. In that case, you could freeze the ChartArea rendering until all the points are added and redraw the ChartArea just once. For that you could use the ChartArea.BeginInt() and ChartArea.EndInt() methods as below.
chartArea.BeginInit();
//updating 100 points per second
for (int i = 0; i < 100; i++)
{
DataList.Add(new Data { X = rnd.Next(0, 6000), Y = rnd.Next(0, 100) });
}
chartArea.EndInit();
I hope you find these tips help you to fine-tune your chart’s performance.
Thanks!
Syncfusion License Management Portal is an easy way to manage your licenses on-line. You can add users, assign/remove licenses, manage compliance, create projects/groups, review incidents by projects/groups, get reports on license assignments and generate keys. Out portal makes it easy to get a complete overview of your team's component usage to ensure you are getting the most out of your investment. If you are interested in using this portal for your team, contact sales at sales@syncfusion.com, 888-9DOTNET (888-936-8638).
Here are two short videos showing how to implement a Syncfusion grid in an ASP.NET MVC application. Both videos together take a bit more than 10 minutes and the result is a functional databound grid with paging, sorting and filtering. Part 1 mostly details setting up the application and creating the datasource. Part 2 focuses on getting the grid up and running. Enjoy!
Please take a look at this quick video showing how XlsIO can be used to update and create PivotTable in an Excel workbook.
