Category Archives: Developer Express

Using Bootstrap with the DevExpress ASP.NET Data Grid

DX + Bootstrap
I’ve been having a lot of fun lately (and been quite productive) using Bootstrap as a way to lay my sites out before giving them a final visual style. The past three websites I’ve done have used Bootstrap and I love the CSS classes it provides and the speed with which I can develop a nice, consistent, responsive site with it.

In my most recent project I’ve been working on integrating some of the MVC Extensions from DevExpress with good success. However, one quirk had me scratching my head. My customer was generally very happy with the ASP.NET Data Grid but wanted a few additional features, one being the ability for the user to specify the page size for the grid. Easy enough – I thought – it’s just a setting after all.

However, this is what I saw after enabling the setting:

Page Size Item Before

After some poking around using the Developer Tools in Chrome, I was able to identify the CSS in Bootstrap that was interfering with the rendering of the ASP.NET Data Grid. Here is the CSS I used to fix the issue:

/* for playing happy with DX */
td.dxpDropDownButton img {
    max-width: none;
}

td.dxpComboBox input {
    margin-bottom: 0px;
    padding: 0px 0px;
}

With that bit of CSS in place the control now renders properly:

Page Size Item After

Note that there’s also a post available from DevExpress here on fixes for common CSS issues with Bootstrap. However, using that method requires overwriting your bootstrap.css file.

Improvements to Server Mode Grid in DevExpress VCL 12.2

Version 12.2 of the DevExpress VCL controls brings several improvements to the Server Mode feature of the ExpressQuantumGrid control. Both Advantage Database and PostgreSQL are now supported. There is also now support for in-place editing and banded table views when using Server Mode.

But one of the most welcome improvements, I think, is the new capability to specify custom SQL for the SELECT statement that the Server Mode data source components will use. When I last blogged about ExpressQuantumGrid Server Mode, the most vocal feedback was the need to specify custom SELECT statements. Until now this was only possible using Views within the underlying database. But starting with 12.2, DevExpress has introduced two new entries to the collection of Server Mode components to support using custom queries: TdxServerModeADOQueryDataSource and TdxServerModeDBXQueryDataSource. These are counterparts to the existing data source components that feature a SQL property for specifying the SELECT statement.

To see how easy this is to put into practice, download an open my sample from this blog post. Make sure you’ve also created a database and used the contained SQL scripts to create and populate the LotsaRows table.

Open Unit1 and select the Design tab. Delete the existing TdxServerModeADODataSource and replace it with a TdxServerModeADOQueryDataSource.

Setting up the TdxServerModeADOQueryDataSource component is very similar to setting up its non-query counterpart. For the Connection property select the existing ADOConnection1 component and for the SQLAdapter property, specify MSSQL Adapter. For the new SQL property, click the ellipsis button and enter the following SQL statement:

With the SQL statement specified, click the drop down arrow next to KeyFieldNames and select the ID column. Finally, set Active to True.

That’s it for setting up the TdxServerModeADOQueryDataSource. Now, select the Server Mode table view on the form and bind it to the TdxServerModeADOQueryDataSource using the DataController.DataSource property.

At this point you should see that the project is working again more or less as it did in my previous blog post. A million rows of data show, quickly, within the TcxGrid control, featuring fast grouping and sorting.

To actually see the new feature in practice, add a new TcxCheckBox to the main form, adjusting the grid control and giving it a proper caption.

And handle the Click event of the TcxCheckBox with the following code:

procedure TForm1.Column3CheckBoxClick(Sender: TObject);
var
  SQL: string;
begin
  //improve performance by disabling gridview updates during data operations
  cxGrid1DBTableView1.BeginUpdate;
  try
    dxServerModeADOQueryDataSource1.Active := False;

    //build SQL statement based on checkstate
    SQL := 'SELECT * FROM LotsaRows';
    if Column3CheckBox.Checked then
      SQL := SQL + ' WHERE Column3 = 1';

    dxServerModeADOQueryDataSource1.SQL.Text := SQL;
    dxServerModeADOQueryDataSource1.Active := True;
  finally
    cxGrid1DBTableView1.EndUpdate;
  end;
end;

And that’s it! By swapping out the existing TdxServerModeADODataSource for its query-enabled counterpart, we can now specify a custom SQL SELECT statement and still benefit from “blazing fast” population, sorting, and grouping of one million rows of data.

You can download the updated Delphi sample source code here.

Open Source Solution for Migrating from ExpressScheduler to XtraScheduler

Introduction

Express2XtraScheduler is a .NET solution consisting primarily of two assemblies and a WinForms utility that simplify importing database data from the format stored by the DevExpress VCL ExpressScheduler into a format supported by the WinForms XtraScheduler control.

Contents

  • Express2XtraScheduler.Core.dll provides the functionality needed to import data from one format to another given a pair of database settings
  • Express2XtraScheduler.UI.dll provides UI controls for mapping source and destination database settings
  • Express2XtraScheduler.exe uses these assemblies to provide a simple utility for transferring data
  • ExpressSchedulerInterop.dll is a Delphi DLL used to read resource information stored as Delphi variants

Express2XtraScheduler App

The solution also contains two simple applications that allow testing both VCL and WinForms scheduler data: ExpressSchedulerApp and XtraSchedulerApp.

Resources

Below are links to blog posts that discuss some of the techniques used by this solution:

Availability

The source code for the Express2XtraScheduler solution is available immediately on this public Git repo hosted at Bitbucket.

Getting Started with the DevExpress VCL Wizard Control

Version 12.2 of the DevExpress VCL controls contains the long awaited ExpressWizard control. DevExpress released a WinForms version, their XtraWizard control, over four years ago. They have now delivered a native version of this same control for the Delphi VCL.

Features of the ExpressWizard control mirror those touted by DevExpress for their XtraWizard control:

  • You can design dialogs that conform to either the Wizard 97 or Wizard Aero standard… creating standard based UIs has never been easier.
  • Cutting-edge interfaces are only a few clicks away and developers can be certain that their wizard control will look and feel the same as all other DevExpress controls within their applications.
  • By using DevExpress fade in/fade out effects, developers can easily enhance their wizards during page transition operations.

It’s worth noting that the ExpressWizard control is a new product in the VCL subscription. This means that, when installing 12.2, you should select “Modify and Update” rather than simply “Update”. This will allow you to select ExpressWizard for installation.

DX VCL Setup

To get started with the ExpressWizard control, create a new VCL Forms Application in Delphi. Next, use the File, New, Other menu item to display the New Items dialog. Select Delphi Files on the left. On the right you’ll see a new entry: DevExpress 12.2 Wizard Form.

New Items Template

Select this item and click OK.

Using this Wizard Form template nets you three things:

  1. A new form descended from TdxWizardControlForm. This is necessary to support the Aero glass features of the TdxWizardControl (similar to the TdxRibbonForm).
  2. A TdxWizardControl parented on the new form
  3. A single TdxWizardControlPage added to the wizard control

The TdxWizardControl is also found on the component palette and can be dropped on any form. However, if you want to use the Aero style wizard, you’ll need to change your form’s ancestor. Starting in this manner (versus the template) will also give you an empty wizard control with no pages.

To check out the basic features of the wizard control, I’d like a total of three pages: a Welcome page, an Agreement page, and a Finished page. For the Agreement page, I’d like the Next button disabled until the user checks a checkbox. I’d also like the wizard to use the Aero style rather than the Wizard 97 style.

Pages can be added to the wizard control in two ways, both available from the TdxWizardControl and TdxWizardControlPage context menus.

Wizard Context Menu

You can either click New Page directly, or click Page Collection Editor to display a dialog for managing the wizard pages.

Page Collection Editor

Using one of these two methods, add two new pages to the TdxWizardControl. As with the rest of the DevExpress VCL controls, the designtime editors and experience are top notch. You can actually click on the Next and Back buttons at designtime to switch through the wizard pages.

Use the Next and Back buttons to select each wizard page. Then, adjust the Header.Title property so that the pages read Welcome, Agreement, and Finish. You can also adjust the Header.Description property, but this line of text will not be visible when using the Aero style wizard.

Next, add a TcxCheckBox to the Agreement page in the wizard and adjust its Caption property to indicate accepting the agreement.

Added Checkbox

In order to show the wizard we’ll need some code on our main form. Open up Unit1 and click the Design tab. Add a TcxButton to the form. While we’re here, let’s take a very quick look at a new feature of the TcxButton in 12.2. Set the Kind to cxbkCommandLink. Assign values to both the Caption and CommandLinkHint properties. Bump the Font.Size property up to 12 and resize the control to fit its contents. Finally, assign a OnClick event handler with the following code:

uses Unit2;

{$R *.dfm}

procedure TForm1.cxButton1Click(Sender: TObject);
begin
  Form2 := TForm2.Create(Self);
  try
    Form2.ShowModal;
  finally
    Form2.Free;
  end;
end;

Click Run (or press F9) to check out the new button style.

TcxButton Runtime

Pretty nice huh?

Click the TcxButton to show the wizard dialog. You’ll see that, with no code, you can click Back and Next to navigate through the pages. In addition, the Back button automatically disables when you are on the first page. Also, the Next button caption automatically changes to Finish when you are on the last page of the wizard. However, clicking Finish and Cancel do not currently do anything. In addition, we need some code for our “agreement” and the wizard is still not the Aero style.

Close the app and return to Unit2. Select the TdxWizardControl and set the ViewStyle property to wcvsAero in the Object Inspector. Handle the OnCreate event of the TdxWizardForm itself with the following code to initialize the wizard:

procedure TForm2.FormCreate(Sender: TObject);
begin
  dxWizardControl1.ActivePageIndex := 0;
end;

Next, handle the OnClick event of the TcxCheckBox with the following code:

procedure TForm2.cxCheckBox1Click(Sender: TObject);
begin
  dxWizardControl1.Buttons.Next.Enabled := cxCheckBox1.Checked;
end;

Select the TdxWizardControl and handle its OnPageChanged event with the same logic:

procedure TForm2.dxWizardControl1PageChanged(Sender: TObject);
begin
  dxWizardControl1.Buttons.Next.Enabled := (dxWizardControl1.ActivePageIndex <> 1) or cxCheckBox1.Checked;
end;

Finally, handle the TdxWizardControl’s OnButtonClick event with the following code:

procedure TForm2.dxWizardControl1ButtonClick(Sender: TObject; AKind: TdxWizardControlButtonKind; var AHandled: Boolean);
begin
  if AKind = wcbkCancel then
    ModalResult := mrCancel
  else if AKind = wcbkFinish then
    ModalResult := mrOk;
end;

If you run the application again you’ll see the wizard is now functional. It starts on the Welcome page, and the Next button is disabled for the Agreement page unless the checkbox is checked. Finally, clicking Cancel or Finish dismisses the dialog.

Wizard Animated

Also, notice that each screen of the wizard fades in and out smoothly. Very nice!

You can download the Delphi source code for this example here.

Releasing the Source of a Simple Application Framework

A few years ago I blogged about, and made available on a smaller scale, a simple application framework built using RemObjects Hydra and the DevExpress WinForms controls called tide. I’ve taken some time to clean up the source code and the licensing, as well as getting the project working using the latest RemObjects and DevExpress releases.

The result is now available on Bitbucket. The source code includes a sample based on the Northwind database and the Wiki includes links to several articles on creating the Northwind sample.

Displaying the XtraScheduler Context Menu Programmatically

The XtraScheduler product from DevExpress is suite of flexible and powerful calendar controls. The scheduler control itself has a built in popup menu that displays context sensitive items when the end-user right-clicks the control.

However, it’s not immediately obvious how to display this menu, with the appropriate context options, programmatically. For instance, you may have an XtraGrid control setup synchronized with the XtraScheduler control. It would be pretty sweet if right-clicking an appointment in the XtraGrid control displayed the appropriate XtraScheduler context menu.

With some digging through the XtraScheduler classes, comments, and some trial and error, I was able to come up with the following working code:

        private void gridControl1_MouseUp(object sender, MouseEventArgs e)
        {
            if (e.Button == System.Windows.Forms.MouseButtons.Right)
            {
                SchedulerHitInfo hitInfo = new SchedulerHitInfo(SelectableIntervalViewInfo.Empty, SchedulerHitTest.AppointmentContent);
                WinFormsSchedulerMenuBuilderUIFactory uiFactory = new WinFormsSchedulerMenuBuilderUIFactory();
                SchedulerDefaultPopupMenuWinBuilder builder = new SchedulerDefaultPopupMenuWinBuilder(uiFactory, schedulerControl, hitInfo);
                IDXPopupMenu<SchedulerMenuItemId> popupMenu = builder.CreatePopupMenu();
                ((IDXDropDownControl)popupMenu).Show(schedulerControl.MenuManager, (Control)sender, new System.Drawing.Point(e.X, e.Y));
            }
        }

The first line creates a new instance SchedulerHitInfo with SchedulerHitTest.AppointmentContent specified as the element under the hit info. This controls which menu contents will be displayed. In this case, the menu contents shown when right-clicking an appointment are displayed.

The next three lines create the popup menu itself by using a WinFormsSchedulerMenuBuilderUIFactory and WinFormsSchedulerMenuBuilderUIFactory.

Finally, the last line displays the popup menu itself. The first parameter is an IDXMenuManager, which can be accessed via the MenuManager property of the scheduler control. The second parameter is the parent control for the popup menu. The final parameter is the position for the popup menu within the parent control.

Together, these lines allow you to display the XtraScheduler menu, with the appropriate context sensitive contents and at any position, from code. Hopefully this bit of code comes in handy as these classes aren’t currently (well) documented. Enjoy!

Releasing the Source of VCL Controls based on DevExpress Look & Feel

The “cx-tras” package is a set of components I created nearly ten years ago and have been maintaining since. It is a set of visual components for Delphi that support DevExpress’s Look & Feel technology. This means that they automatically adjust their look based on the appearance and skin settings used in DevExpress VCL applications. The components were originally distributed by myself on request, then by DevExpress Support for a time, and now I’m giving them a home where anyone can access the source.

Various configurations for the Office Gizmo control

Demonstration of the Text Flow Panel control

Examples of the Close Button, Expand Button, and Size Grip

You can now access the source for the cx-tras package on Bitbucket here.