DataGrid Templates

NOTE: DataGrid templates are supported only on Desktop Web platform for non-MVC projects. Data Grid templates are not available for MVC projects.

What is a DataGrid Template

Grid Template is a FlexContainer containing widgets with proper alignment and UI. These templates are used to render columns and rows in the DataGrid widget.

Where to use a DataGrid Template

The Grid Templates are used to:

  • support template type to columns.
  • support template type to headers.
  • specify the column span while setting the data to the column.

Creating a DataGrid Template

When you want the same information to be displayed across all the grids in the DataGrid widget in an application, you can use the Grid Template feature in Quantum Visualizer.

To create a grid template at the application-level, follow these steps:

  1. From Quantum Visualizer, open the project.
  2. Navigate to the Design view of the project.
  3. Navigate to the Templates tab.
  4. Inside the tab expand Desktop > Grids.
  5. Right-click on Grids and select New Template.
    A new template is created with a child FlexContainer widget. Drag and drop the widgets as required.

You can set the created grid template for a row or a column using the Master Data Property of DataGrid. Previously in the Master Data property for a DataGrid you could only specify text for the column header template and column template. Using the Grid template, you can set images to be a part of the column header template or the column template.

You can use the following widgets to define a Grid Template:

  • FlexContainer
  • Button
  • Calendar
  • CheckBoxGroup
  • ListBox
  • Image
  • Label
  • RadioButtonGroup
  • RichText
  • TextArea
  • TextBox

Using DataGrid Template

To use Grid Template in an application, follow these steps:

  1. From the Project explorer, navigate to the form containing the DataGrid widget.
  2. Right-click on the form and select Fork.
    The Fork Platforms window opens.
  3. For Desktop, check the box under the HTML5 SPA column.
    Click OK. . The form is now forked for Desktop Web platform and new window appears as <formname>[Web].

    NOTE: The development activities for desktop web should happen in<formname>[Web] only. Although the newly created form, remains accessible in the desktop forms.

  4. Drag-drop a DataGrid widget on the form.
  5. From the Properties panel navigate to the Data Grid section.
  6. Click Edit for the Data property.
    The Master Data window appears.
  7. Under the Column Type column, from the drop-down, select the Template.
  8. Under the Column Template column, click the button, and select the required template.
  9. Click OK.