Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Grid View
  [Expand]Card View
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Site Navigation and Layout
  [Expand]File Management
  [Expand]Multi-Use Site Controls
  [Expand]Scheduler
  [Expand]HTML Editor
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Gauges
  [Expand]Data Editors
  [Expand]Spell Checker
  [Collapse]Query Builder
   [Collapse]Getting Started
     Lesson 1 - Add a Query Builder to a Web Application
     Lesson 2 - Use the Resulting Query
   [Expand]Visual Elements
    Binding to Data
    Obtaining the Resulting Query
    Localize the Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Lesson 2 - Use the Resulting Query

This lesson will teach you how to use a SQL query string generated by the ASP.NET Query Builder control to supply DevExpress data-aware web controls with data.

  1. Open the web application created in the Lesson 1 of this tutorial and add a new Web Form to the project.

  2. Select the newly added Web Form in the Solution Explorer and click the Design button to open the visual designer for this web form.

  3. Expand the DX.17.2: Data and Analytics Toolbox tab and drop the ASPxGridView control onto the page.

    The added Grid View will be used to display data obtained from a database by executing a query generated by the Query Builder control.

  4. Switch to the Web Form containing the Query Builder added in Lesson 1 and handle the ASPxQueryBuilder.SaveQuery event. This event occurs on the server side every time the Query Builder's Save () toolbar command is clicked and provides access to the resulting query string. Add the following code to the handler to save the query string and redirect a browser to the page containing a Grid View.

  5. Add a provider-specific connection string that will be used by the Grid View to the application's Web.config file.

  6. Switch to the Web Form containing the Grid View. On the Page_Load event, call the ASPxWebControl.DataBind method of the Grid View. Next, handle the System.Web.UI.Control.DataBinding event of the Grid View to bind it to data using the SQL query generated by the Query Builder as show below.

  7. Run your web application, use the Query Builder to construct a query and click the Query Builder's Save toolbar command to view the result.

Expanded See Also

How would you rate this topic?​​​​​​​