0% found this document useful (0 votes)
5 views7 pages

Merging Rows and Columns Techniques

The document outlines three methods for merging rows and columns in a dataset, including using the 'Rowspan' property and a custom 'Span Method'. It provides specific steps for creating a dataset, binding it to a table, and implementing the merging techniques. The document also includes code snippets for defining merge methods and instructions for previewing the results.

Uploaded by

CHIRAG GUPTA
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
5 views7 pages

Merging Rows and Columns Techniques

The document outlines three methods for merging rows and columns in a dataset, including using the 'Rowspan' property and a custom 'Span Method'. It provides specific steps for creating a dataset, binding it to a table, and implementing the merging techniques. The document also includes code snippets for defining merge methods and instructions for previewing the results.

Uploaded by

CHIRAG GUPTA
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Merge Rows & Columns

Overview

This example demonstrates three methods for merging rows and columns.

Method 1: Merge rows using the "Rowspan" property in "Appearance"

Method 2: Merge rows using the expression in the "Rowspan" property in "Appearance"

Method 3: Custom merge columns using the "Span Method" in "Span Config"

Sample rowsColumnMerge

Specific steps
1. Create a new dataset

1-1. Click on the [add] button of the [DataSet List].

1-2. Modify the ID property to tableData

1-3. Double click on the LocalData attribute and enter the following values: (sample data)

{id: 10001,lastName: 'Test1',firstName: 'Test1',nickName: 'T1',role: 'Develop',sex: 'Man',age: 28,address: 'test abc'},

{id: 10002,lastName: 'Test2',firstName: 'Test2',nickName: 'T2',role: 'Develop',sex: 'Woman',age: 28,address: 'Guangzhou'},

{id: 10003,lastName: 'Test3',firstName: 'Test3',nickName: 'T3',role: 'PM',sex: 'Woman',age: 28,address: 'Shanghai'},

{id: 10005,lastName: 'Test5',firstName: 'Test5',nickName: 'T5',role: 'Designer',sex: 'Woman',age: 24,address: 'Shanghai'},

{id: 10006,lastName: 'Test6',firstName: 'Test6',nickName: 'T6',role: 'Designer',sex: 'Woman',age: 24,address: 'Shanghai'}

1-4. Click the


button to save the

tableData
data under the [DataSet List].

2. Drag a Table container and bind the dataset

2-1. Drag and drop a Table container to the empty space in the detail section and bind it to the DataSet.

2-2. Modify the ID attribute to mergeRowsTable tablefor merging rows

2-3. Set the Data Source attribute to the dataset created in step 1 tableData

2-4. Drag 5 Input Column components to the title of the Table container

Set the Title and Field properties of the 5 columns to firstName lastName nickName role sex

2-5. Check the "Stripe" and "Border" properties under "Appearance."

[Link] the Table, modify the ID attribute to mergeColumnsTable (table for merging columns)
3. Merge Rows

Perform the following operations on the Table "mergeRowsTable"

3-1. Merge rows using the "Rowspan" property in "Appearance"

a. Click on the "sex" column of mergeRowsTable. Check the "Rowspan" under "Appearance" .and the merging effect is as follows:

3-2. Merge rows using the expression in the "Rowspan" property in "Appearance"

a. Write mergeRowMethod

Click on a blank area to display the toolbar, click "Init," and enter the following code

const mergeRowMethod = ({ row, nextRow, column }) => {


// Check if the gender and role of the current row and the next row are the same

if ([Link] === [Link] && [Link] === [Link]) {

return true;

} else {

return false;

};

b. Click on the "sex" column of mergeRowsTable. Click on the expression icon in the "Rowspan" property under "Appearance" and enter the
previously defined "mergeRowMethod variable". Click "Done" to save.

c. Click the "Save" button in the screen designer to save this design.
d. Click the "Preview" button in the screen designer to preview the form and confirm the effect

Before setting "mergeRowMethod"

After setting "mergeRowMethod":


4. Merge Columns
4-1. Perform the following operations on the Table "mergecolumnSample"

4-2. Click on the "Span Config" property to display the "Span Method" property (this property has the highest priority).

4-3. ouble click on the "Span Method" field and enter the following

({ _rowIndex, columnIndex }) => {

// Check if the row index is even

if (_rowIndex % 2 === 0) {

// If the column index is 2, merge the current cell for 1 row and 2 columns

if (columnIndex === 2) {

return { rowspan: 1, colspan: 2 }

// If the column index is 3, do not merge the current cell

else if (columnIndex === 3) {

return { rowspan: 0, colspan: 0 }


}

// If the row index is odd or the column index is not 2 or 3, do not perform any merging

// Return undefined to indicate no merging operation

4-4. Click "Done and Close" to save the code

4-5. Click the "Save" button in the screen designer to save this design

4-6. Click the "Preview" button in the screen designer to preview the form and confirm the effect.

Common questions

Powered by AI

Merging operations can enhance user interaction by reducing clutter and creating more cohesive visual groupings within table data, making it easier to discern relationships between records. Potential benefits include improved readability, more straightforward data comparisons, and a streamlined interface. However, excessive or misapplied merging might obscure individual data points or cause user confusion if the visual structure doesn't align with intuitive data interpretation. Careful balancing of merging techniques is essential to maximize benefits while minimizing drawbacks .

Using the 'Rowspan' property allows for straightforward merging of table rows based on appearance settings, typically by setting a property directly for a specific column such as 'sex'. In contrast, a custom merge method using an expression enables more complex logic by defining a function (e.g., 'mergeRowMethod') which can conditionally merge rows if certain criteria like matching gender and role are met . The 'Span Method' goes further by allowing custom logic not only for row merging but also for column merging with specific configurations like merging cells based on row and column indices .

Creating a new dataset involves several key steps: clicking the [add] button to create a new entry in the [DataSet List], modifying the ID property to 'tableData' to uniquely identify the dataset, entering a series of data objects defining each dataset row, and ultimately saving this configuration. Each step is crucial for ensuring that the dataset is properly identified, structured, and stored for subsequent usage in binding to tables, allowing these tables to reflect accurate data and enable effective merging operations .

Saving table configurations ensures that changes, especially in merging methods, are not lost and that the setup reflects the intended design, allowing further modifications if required. Previewing is equally crucial as it provides a visual confirmation of the effect of merging, helping to detect any overlooked errors or unintended results. Skipping these steps could lead to incomplete or incorrect table setups being deployed, which may misrepresent data and negate the intended enhancements of merging .

The differentiation allows for alternate row behaviors, significantly affecting the visual distribution of the table cells. Even row indices trigger specific column merging operations, while odd indices do not perform any merging action. This alternating pattern can create a visually pleasing or structured pattern that helps highlight or separate information categories, which can enhance readability and data organization .

Utilizing expressions in the 'Rowspan' property enhances row merging by allowing conditional logic to dictate when rows should be merged. For example, by defining the 'mergeRowMethod' as an expression, one can merge rows in a table only if the 'sex' and 'role' columns are identical for consecutive rows. This method adds a layer of flexibility and customization, enabling dynamic and rule-based merging rather than static or manual settings .

The logical conditions in the 'Span Method' involve checking the parity of the row index and specific conditions for column indices. For instance, if the row index is even and the column index is 2, the method configures the cell to merge across one row and two columns. Conversely, if the column index is 3, the method specifies no merging (rowspan: 0, colspan: 0). Such conditions allow selective application of merging, thus impacting table layout by ensuring that only specific cells are combined based on well-defined rules .

The 'Span Method' property is crucial when merging columns because it allows precise control over how cells are spanned across rows and columns by executing specific logic based on row and column indices. It holds the highest priority, meaning configurations in 'Span Method' override other properties. This hierarchical preference ensures that it is the final determinant of how columns are merged, providing a high degree of flexibility and refinement in format and layout design .

Copying an existing table and modifying it, such as changing the ID attribute for different purposes like 'mergeColumnsTable', streamlines the design process by leveraging pre-existing configurations and avoiding redundant setup from scratch. This approach saves time and reduces possible errors associated with manual entry, ensuring consistency in data handling and layout. It also allows for quick iteration and testing of different merging techniques without impacting the original table design .

The 'mergeRowMethod' decides to merge two rows based on whether the 'sex' and 'role' attributes of the current and next rows are identical. This implies that rows will only be visually combined if these criteria are met, enhancing the clarity and organization of data by grouping related records together, making it easier to analyze and interpret repeated patterns in datasets .

You might also like