Don Wibier's Blog
  • ASP.NET Reporting - Sub-reports, Report Explorer and more (Coming soon in v15.2)

    In the v15.2 release of our ASP.NET Reporting controls, we have implemented a couple of really exciting must-have features!

    Sub-reports

    One of the things we’ve built is support for sub-reports. This allows you to embed (several) existing pre-made reports into a new report.

    We have created a new control for this functionality which is the XRSubreport. You can drag it onto the design-surface in the Report Designer, double click it and start creating the new sub-report just the same way as designing the parent report.

    Subreports - Add a Subreport

    When working with sub-reports, you will see a number of tabs below the report designer which allow you to switch between the various reports.

    Subreport - Tabs

    Once you’re finished creating a new sub-report, you will need to save the sub-report as separate definition on the web-server. For this we have added a Save (As) dialog:

    Subreport - Save Dialog

    Alternatively, you can also specify the Report Source URL in the object inspector of XRSubreport control if you want to use an existing report.

    Subreport - Report Source Url

    For the sub-reports features to work, we needed to change a couple of things in the reports storage mechanism. This requires you (the developer) to implement a report storage class so the reporting engine and designer are able to locate available sub-reports on the server for processing. This class is also used for saving new or modified report definitions on the server.

    This reports storage class was already available on the WinForms counterpart where it is an optional feature. With the v15.2 release of the ASP.NET reporting suite, it has become something mandatory to implement. We will obviously provide you with a number of examples so you can use this new feature without problems!

    Report Explorer

    To improve the design experience as well as the productivity when designing reports, we have included a new feature; The Report Explorer.

    Report Explorer - Control Properties

    The Report Explorer allows you to quickly navigate through different parts of your report, such as bands, styles and formatting rules. When selecting one of the nodes in the explorer, you will be able to delete it or modify it’s properties by clicking the appropriate button in the explorer.

    The Report Explorer also gives you a quick and convenient way on creating new styles and formatting rules by selecting the styles node and next click the ‘+’ button.

    Report Explorer - Add a Style

    By dragging a style of formatting rule from the explorer onto a control, this style or rule will be applied.

    Report Explorer - Apply a Style

    RichText support

    We have redone the XRRichText control to fully support embedding RichText content (or database fields containing this) in your reports. It allows you to put either static, data-bound or content loaded from a file into your reports.

    RTF

    The XRRichText control also provides WYSIWYG rendering of RTF, HTML or plain text content in the Report Designer.

    Register for v15.2 webinar

    To see all the new features coming out for the v15.2 release, sign up for the "v15.2: What's New for ASP.NET Developers":

    Click here to register

    Let me know what you think of this upcoming reporting sweetness!

  • DEVIntersection is coming to Amsterdam!

    DEVintersection Europe, a cool new developer event is coming to Amsterdam from October 14th till October 16th with an awesome speaker line-up!

    Print

    The sessions are all about the latest technologies and tools, and I can assure you that you will leave the event fully reloaded with inspiration and ideas.

    DevExpress is proud to be gold sponsor of this event, and John and I will be manning our booth where we will be giving away goodies, holding daily raffles, and showing you some cool demos of our products.

    We are very grateful to our DevExpress customers in Europe for continuing to support us. As a demonstration of our gratitude, we have secured a substantial discount from the event organizers, so if you haven't bought your ticket for DEVIntersection yet, make sure to contact John Martin. He can give you details on how to get your ticket for a reduced price.

    When you’re there, make sure to stop by our booth to say “Hi” and get a raffle ticket.

    See you in Amsterdam!

  • We will be at DDD East Anglia Cambridge…and you?

    This Saturday, September 26th, is the third edition of DDD East Anglia, which takes place in Cambridge, UK. DevExpress will be there manning a booth with a selection of the latest in cotton apparel for the discerning conference goer, some cool demos of our components and, of course, free hugs from Rachel.

    Yes! Rachel and I will both be visiting! Not only that, but I will also present a session on Responsive Web Design for Developers, where I will show you what this responsive business is all about and how to get started with it.

    We are a proud sponsor of this event, and during the DevExpress-sponsored coffee breaks at 11.35am and 3pm grab a cup and check the raffle ticket on it to see if you have won a prize. Yes, that’s right, the DevExpress DDD East Anglia Bottle Tombola is back!

    We’ve got a selection of brews, condiments and tipples from around the Eastern region and they could be yours if your number comes up!

    East-Anglia-Bottle-Tombola-2014
    Picture taken by Craig Murphy, Sept 2014.

    If you are attending, come visit us.

    See you in Cambridge!

  • dotNed usergroup meeting

    On the 27th of August, DevExpress hosted a dotNed user group meeting in Rotterdam, The Netherlands. I found a very nice location in the harbor of Rotterdam.

    DSC00909

    It is wood craftsmen shop / historical shipyard and museum where they are reconstructing one of the historical naval ships of the time of Pirates Of The Caribbean.

    DSC00914DSC00939DSC00931

    For all attendees, we had some sandwiches and drinks…

    DSC00912DSC00913DSC00911

    and after a short introduction of Dennis Vroegop, I did a session on how to consume Azure Mobile Services with a DevExtreme JavaScript App.

    DSC00915DSC00927DSC00921

    After the session, everybody got a UI Superhero shirt from John, and there was time to talk with us and other developers as well.

    DSC00944DSC00935DSC00931

    Are you involved in the developer community or organizing events in your area ? Let me know!

  • Creating an Office 365 Clone with DevExpress ASP.NET

    Recently Mehul and I did a webinar about one of our newest demo applications called “DevExpress Documents”.

    We talked about the functionality, its architecture and how modular and reusable this demo is constructed.

    Why build an Office 365 Clone?

    A lot of companies like the Office 365 approach. All documents are stored in one central place and there is no need for specific workstation configuration and deployment. In fact if you want to have a BYOD (Bring Your Own Device) policy, this is the perfect way to go!

    Since not all companies are using Office 365, it must come with a caveat.

    All documents created and stored on Office 365 are stored in a third-party cloud. This means that you don’t know for sure who has access to them, which is against the security policies of many companies.

    With this demo and the webinar, we would like to show you that we have all the building blocks for creating your own document management system which can be easily hosted in-premises, or a local service provider, but with the same ease of use as Office 365.

    How to build an Office 365 Clone?

    From a UI perspective, besides the login page, this application contains only 3 pages:

    Default.aspx

    This is the homepage of the application, and serves the File navigation functionality. The main controls used in this page are: ASPxPanel, ASPxMenu, ASPxCallbackPanel and ASPxFileManager.

    This page shows how we’re using the responsive and adaptive settings of the ASPxPanel to do some easy positioning like keeping the header always on top in the browser window. We also use the AdaptivitySettings of the filter panel to collapse when the browser window gets smaller than a certain width.

    Another cool thing in this demo is the fact that we are switching FileSystemProviders of the ASPxFileManager through a callback depending on the selected filter.

    RichTextEdit.aspx

    This page serves as editor and viewer of RichText documents like *.doc, *.docx, *.rtf and others. It provides a nice example on how to use an external ASPxRibbon control together with the ASPxRichEdit.

    SpreadsheetEdit.aspx

    This page serves as an editor and viewer of Spreadsheet documents like *.xls, *.xlsx and others. It contains an ASPxRibbon and an ASPxSpreadsheet control. Like the RichTextEdit.aspx page, it shows how to use an external ASPxRibbon together with an ASPxSpreadsheet control.

    The Service Oriented Architecture of DevExpress Documents

    If you check out the code behind of the Default.aspx, you will notice that there is not a lot of code in it, except for some initialization. This is because we have chosen a Service Oriented Architecture for this application.

    If you check Wikipedia’s definition of the Service Oriented Architecture, you will find:

    “A service-oriented architecture (SOA) is an architectural pattern in computer software design in which application components provide services to other components via a communications protocol, typically over a network.”

    In the Documents application the services will not communicate over a network, but the first part of the definition certainly applies.

    We have defined a number of services which communicate with each other without knowing from each other what is happening under the hood.

    An example of this is the DocumentService which handles all document related tasks like locking, editing, creating etc. This service needs data access to fulfill its tasks and therefore, it will communicate with the DataService . The DocumentService is completely unaware of the fact  that the DataService is using Entity Framework to access the database.

    An advantage of this architecture is that your application is pretty well structured even when it grows in time.

    Another plus of this approach is that if you would like to use another ORM like our own XPress Persistent Objects (XPO), you could create another DataService which facilitates XPO and replace the E.F. DataService with this one.

    The Services in the DevExpress Documents application

    The services are located in the ~/App_Code folder, and it is definitely worth checking them out. We have defined the following services for the application:

    Data service

    The Data Service which manage all interaction with the database used for the application.

    Document service

    The Document Service which will manage the document locking, and keeps track of opened files etc.

    File System service

    The File System Service will process all file related operations like Opening, Editing, Uploading, Directory creation and modification etc.

    Image service

    The Image Service will process anything related with image related functionality like the users avatars and thumbnail processing.

    User service

    The User Service will provide and  manage all user related functionality like validation and activity tracking

    These services are all managed by an application object which is the DXApplication instance. One of the reasons for this approach is that it is very structured, but we also need to manage some global (shared) data like locked files etc.
    The DXApplication object is an excellent place to store that kind of information.

    A final note on the demo app

    You can find the source of this demo in the %PUBLIC%\Documents\DevExpress Demos 15.1\Components\ASP.NET\CS\Documents folder where I’d like to mention that this project is a Web-Site project. My guess is that most of you will use Web Application projects, so if you want to use portions of code in your Web Application Project, you will need to change a couple of things before it will work.

    If you’re interested in converting this Web-Site project into a Web Application project, let me know. I will put up another blog post with detailed instructions later on how to do that.

    Also let me know if you have created your own Office 365 Clone or incorporated this functionality in your own project!

  • Entity Framework and DevExpress ASP.NET

    Last week Mehul and I did a webinar on Entity Framework and DevExpress.ASP.NET.

    Intro

    What is Entity Framework?

    Entity Framework is an Object Relational Mapping (ORM) tool, much like our own Xpress Persistent Objects (XPO).

    An ORM is a layer between the data storage, and your business logic which allows you to manipulate and query your data store by using C# objects instead of working with SqlConnections, SqlCommands, Datareaders and SQL statements!

    It means that you have C# classes which represent all entities (tables) in your database and by decorating classes and properties inside those classes, you can specify things like table names, fieldnames, indexes and relationships in your data.

    Under the hood of the ORM tool, the appropriate SQL commands are being created runtime, which also means that if you want to change to a different database backend, if the ORM supports it, you can do that without changing any of your C# code! A good example of this is our own XPO, which supports more than a dozen different database back ends by only changing the connection string.

    Why Entity Framework?

    With the introduction of MVC, it became clear that the use of an ORM together with the MVC design pattern is an excellent combination since you are already working with models (objects) in MVC, and you are working with objects again to get and store information in the database.

    Because of this, Microsoft has been putting some great effort in expanding and optimizing the earlier versions of Entity Framework to what it is today (and will become in the future) and they have even added support for WebForms applications as well by delivering an EntityDataSource to the WebForms Toolbox.

    Because it is clear that Entity Framework is the Microsoft way to go, we have already changed over all of our demo applications from Sql Data readers to EntityFramework in v15.1.

    This gives you the opportunity to see what is involved in start using an ORM.

    What did we cover in the Webinar?

    Mehul showed you a couple of different methods on how to start with Entity Framework:

    Code first

    This means that you will create your data-model directly in C# classes and when you start the application, the ORM will sync the database structure with the C# class hierarchy. This is the strategy Microsoft advices.

    Database first

    In this scenario, the database is modeled and there will be some synchronization design-time to keep your class hierarchy up to date with the database structure

    Model first

    This approach will open a designer in Visual Studio which allows you to design your database, where when finished, the C# classes will be created / updated as well as the database structure.

    Demonstrated approaches

    I have showed you 3 approaches on how to access the data from the Chinook Sample Database, by using the Code First approach. Inside Visual Studio there is a feature which allows you to start a Code First project by existing database. This wizard will analyze the database structure and create the Code First classes for you.

    I have used the Chinook Demo Database for this which is freely available on CodePlex at: https://chinookdatabase.codeplex.com/

    Microsoft Entity DataSource

    The first demo I did was by using the Microsoft Entity Datasource control. It is important to get an updated version from NuGet since the version installed in your toolbox is for Entity Framework v4.5 where the default version as of writing is v6.x.

    NuGetEFDatasource

    This version has limited design-time support and you need to type the DB Context class and the desired entity property manually.

    The Microsoft Entity Datasource was setup quickly and also supports standard CRUD operations out of the box which I showed with our DevExpress ASP.NET GridView control including standard CRUD operations.

    DevExpress EntityServerModeDataSource

    Since the sample database does not have mega much data, I am talking about millions of records, the Entity Datasource control performs its task quickly. This will change though when there is a huge database involved and you want to enable the DevExpress ASP.NET GridView’s sorting, grouping, paging, filtering etc.

    You can see the impact on our demo site at: http://demos.devexpress.com/ASPxGridViewDemos/DataBinding/LinqDataSourceServerMode.aspx

    For such usage, we have delivered the DevExpress EntityServerModeDataSource control. It allows you to perform the required tasks on large datasets much quicker because this control determines what kind of data store is behind the your ORM model and fires the most optimal SQL statements. We have taken some of our XPO expertise and put it in this control.

    Also our visual controls like the GridView, DataView and CardView know if they are connected to our EntityServerMode DataSource, and will communicate slightly different with it which results in a dramatic performance increase!

    Since this control’s main meaning of live is data reading, you will need to code a number of events manually to allow standard CRUD operations.

    Standard ObjectDataSource

    While this control was initially released with ASP.NET v2, it is still one of my favorite controls when doing WebForms and data access.

    It allows you to totally separate the business logic from the presentation layer and you also have total control on what data to fetch when you enable certain properties on the control.

    This control needs a class which implements a number of methods for Selecting and optionally for Updating, Inserting and Deleting.

    I have shown you that you can use LINQ queries inside the Select method to fetch results from the datastore. Entity Framework will transform these LINQ queries to SQL statements under the hood.

    Conclusion

    In case you haven’t checked an ORM like Entity Framework out, we would urge you to take a look at it since it helps you in developing secure and modern applications. We have shown you that it is not MVC proprietary technology and that our DevExpress data controls can take full advantage of it.

    You can download the demo project I have been building, as usual, from my GitHub account at: https://github.com/donwibier/DXWebFormsEF.

    In the project on GitHub, you will notice that I did implement the CRUD operations, and some additional powerful methods in the ObjectDataSource class for real paged data fetching with LINQ, in combination with Sorting and Filtering.

    Let me know what you have already done with Entity Framework or if you’re facing any difficulties!

  • ASP.NET File Manager - Custom Templates (Shipping in v15.1)

    In our v15.1 release we have another exciting feature implemented for the ASP.NET File Manager. Template support for the File Container!

    What is the File Container?

    The ASP.NET File Manager control contains a tool bar and two panes; a Folder Container and a File Container as illustrated in the image below:

    What does this mean?

    With the template support for the items inside the File Container, you can now change how files are represented, and depending on the template, add some custom functionality to the individual items. There are 2 different templates you can implement, one for the Thumbnail view and one for the Details view.

    The item which is used to bind the template to is a FileManagerItem instance. At runtime this will be either a FileManagerFile or a FileManagerFolder type, depending on the item being processed.

    The FileManagerItem type exposes the following properties available for data binding:

    • FullName
    • Id
    • LastWriteTime
    • Length
    • Name
    • RelativeName
    • ThumbnailUrl

    The FileManagerFile type, which descends from the FileManagerItem type, exposes all the properties above plus 2 additional ones:

    • Extension
    • Folder

    The FileManagerFolder also descends from the FileManagerItem type and has one additional property:

    • Parent

    How can I use this feature?

    Let’s assume you want to use the DevExpress ASP.NET FileManager for displaying image thumbnails with the possibility to preview the image in a popup:

    This behaviour can be build by using the following template:

       1: <ItemTemplate>
       2:     <div style="<%# GetThumbStyle(Container.DataItem)  %>">
       3:          <div style="width: 100%; height: 30px;" class="transparent">
       4:               <div style="float:left">
       5:                     <dx:ASPxButton ID="ASPxButton1" runat="server" AutoPostBack="False" 
       6:                          UseSubmitBehavior="False"
       7:                          ImageSpacing="0px" RenderMode="Link" 
       8:                          ClientSideEvents-Click='<%# GetPreviewClick(Container.DataItem) %>'>
       9:                          <Paddings Padding="0px" />
      10:                          <Image IconID="actions_show_16x16">
      11:                          </Image>
      12:                     </dx:ASPxButton>
      13:               </div>
      14:               <div style="float:left;padding-left:5px;">
      15:                     <span class="item-name">
      16:                          <%# Path.GetFileNameWithoutExtension((string)Eval("Name")) %><br />
      17:                          <%# String.Format("{0:#,##0} kb", Convert.ToDouble(Eval("Length"))/1024)%>
      18:                     </span>
      19:               </div>
      20:          </div>
      21:     </div>
      22: </ItemTemplate>

    For this template to work, I have created some C# helper methods for the data binding. They look like:

       1: protected string GetPreviewClick(object item)
       2: {
       3:     FileManagerFile file = item as FileManagerFile;
       4:     if (file != null)
       5:     {
       6:          return String.Format("function(s, e) {{ previewDlg.PerformWindowCallback(previewDlg.GetWindow(0), '{0}')}}", 
       7:                                               VirtualPathUtility.ToAbsolute(file.FullName));
       8:     }
       9:     return "";
      10: }
      11:  
      12: protected string GetThumbStyle(object item)
      13: {
      14:     List<string> result = new List<string>();
      15:     FileManagerFile file = item as FileManagerFile;
      16:     if (file != null)
      17:     {
      18:          result.Add(String.Format("width: {0}", fm.SettingsFileList.ThumbnailsViewSettings.ThumbnailWidth));
      19:          result.Add(String.Format("height: {0}", fm.SettingsFileList.ThumbnailsViewSettings.ThumbnailHeight));
      20:          result.Add(String.Format("background: url({0}) no-repeat", file.ThumbnailUrl));
      21:          result.Add("padding-top: 70px");
      22:     }
      23:     return String.Join(";", result.ToArray());
      24: }

    There is a bit more code involved to load and show the ASPxPopupControl and to create custom thumbnail images by utilizing the CustomThumbnail event.

    To test this example on your own machine, you can download the demo source code here, and let me know if you have any questions about it.

  • ASP.NET File Manager - Enhancements (Shipping in v15.1)

    We have added some very useful features to the DevExpress ASP.NET FileManager in v15.1

    OneDrive® Inspired Selection

    A lot of users do not know how to perform multi selection within MS-Windows list controls by holding down the Shift or Ctrl key while selecting multiple items with the mouse.

    In the web-interface of OneDrive®, and also the Windows File Explorer of Windows 8, Microsoft has added a really nice feature; when hovering over an item, a checkbox will appear with all selectable items and when you tick the first one, the checkboxes will stay visible so you can easily select multiple items without the use of the Ctrl or Shift key.

    We have put in this same functionality inside our FileManager so you can offer this feature to your end users as well!

    FolderItems in Filemanager area

    For easier navigation, we have included the sub-folders of the currently selected folder in to the file area. This means you can navigate quicker through the file structure because you don’t need to move your mouse forward and back from the File Area to the Folder Tree. We also included the Parent-folder there as well.


    image

    Breadcrumbs with path info for navigation

    To make navigation even better, you can now add the breadcrumbs feature containing the current location on top of the File Area. It allows you to jump to any of the parent folders with just a single click, and navigate your way from there.

    image

    Uploading files without the Upload panel visible

    You can now hide the upload panel from the file manager. In this instance, file upload operations can be initiated by using the upload button, by dropping a file to the control's file area, or by clicking an element specified as a File Upload dialog trigger.

    The last feature I'd like to mention is that we have implemented templates for the File Area. I will explain more on this subject in a separate post.

    With all these enhancement, our FileManager behaves almost like the native Windows Explorer and it is available for ASP.NET WebForms as well as MVC!

  • ASP.NET Design-Time Feature Browser (Shipping in v15.1)

    Our UI controls are some of the most feature–rich controls in the market, but enabling or disabling certain features means that you need to dig (deep) in your object inspector and the documentation to find the required ones. And that can take a bit of time.

    In v14.2 we added the Designer Dialog, and now, to make life even easier, we've introduced our Feature Browser into that dialog. Those of you also using our WinForms controls will already know what I mean with that, since we introduced this in v14.1 for our WinForms controls.

    What is the Feature Browser exactly?

    In the Feature Browser we have grouped certain “desired behavior” or appearance features together. This makes it easy to access the properties needed for some functionality since they are put right next to each other.

    Not only did we filter the properties per feature, we also embedded context sensitive help on a specific feature (instead of a property) all together in the same dialog. You can even click hyperlinks inside the help to set one or more properties in a single operation!

    Where can I find it?

    The Feature Browser is available for 2 complex controls: the GridView and HTML Editor. It appears when you click the Task button in the Design Surface, followed by clicking the Designer item inside the task menu.

    The first page of the Designer contains the Feature Browser, and this allows you to setup the control in seconds.

    The Feature Browser for the GridView control

    Since the GridView control is the most complex control in our ASP.NET suite and setting up things like ServerMode, Master-Detail, Sorting, Grouping, Summaries and Totals require you to jump into the documentation (at least for the first time), we have put context sensitive help right into the Feature Browser. There is no longer any need to switch back and forth into the documentation.

    Feature Browser for the HTML Editor

    Though the HTML Editor ships with tons of features like the Tag Inspector, Place holders, Content Element Filtering and choosing to use a Toolbar or Ribbon Control, it is now simpler to configure. Just like with the GridView, there is no need to jump into the documentation.

    For that reason, the Context Sensitive help is not included in the HTML Editor Feature Browser. Instead we have made certain choices more visual. For example, changing the Toolbar mode will show you immediately what the appearance will be, and which items are available in the toolbar or ribbon.

    Let me know how much it speeds up your development time, or if you’re missing certain features!

  • ASP.NET Charts - Runtime Chart Designer (v15.1)

    Over the few years we’ve had web-based charts, we’ve always had a Visual Studio-based designer for customizing and creating charts. 

    Using this designer, you can specify the elements that make up a chart, such as the one or more data series, the chart types, and so on.

    Feedback from customers has been positive, but – and there’s always a but – customers also wanted the same kind of functionality for their users.

    So, I am happy to announce that, with v15.1, we’re releasing a brand new ASP.NET runtime charts designer for WebForms.

    Before you ask, the designer is implemented as a separate control . Drop the new ASP.NET ChartDesigner control on a form, add a few lines of code that will allow the control to determine where to load and save the customized chart definition, and you’re all set: your users will now be able to customize the chart as and how they wish, in the browser of their choice.

    Customization options

    So what chart options can they customize? Initially, with v15.1, they’ll be able to

    • Add and remove chart elements like series, legends, titles.
    • Customize chart element appearance and layout like fonts, colors, positions of elements.
    • Manage data bindings of the series.

    Register for the v15.1 webinars

    If you want to see the chart designer in action together with all other new charting features, click here to register for the “What's New for Reporting & Dashboards (v15.1)”.


1 2 3 4 5
6
7 8 9
LIVE CHAT

Chat is one of the many ways you can contact members of the DevExpress Team.
We are available Monday-Friday between 7:30am and 4:30pm Pacific Time.

If you need additional product information, write to us at info@devexpress.com or call us at +1 (818) 844-3383

FOLLOW US

DevExpress engineers feature-complete Presentation Controls, IDE Productivity Tools, Business Application Frameworks, and Reporting Systems for Visual Studio, along with high-performance HTML JS Mobile Frameworks for developers targeting iOS, Android and Windows Phone. Whether using WPF, ASP.NET, WinForms, HTML5 or Windows 10, DevExpress tools help you build and deliver your best in the shortest time possible.

Copyright © 1998-2017 Developer Express Inc.
All trademarks or registered trademarks are property of their respective owners