Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout | Syncfusion Blogs
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (179).NET Core  (28).NET MAUI  (215)Angular  (112)ASP.NET  (51)ASP.NET Core  (83)ASP.NET MVC  (90)Azure  (41)Black Friday Deal  (1)Blazor  (228)BoldSign  (15)DocIO  (24)Essential JS 2  (109)Essential Studio  (200)File Formats  (69)Flutter  (133)JavaScript  (226)Microsoft  (120)PDF  (82)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (948)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (45)Webinar  (52)Windows Forms  (61)WinUI  (71)WPF  (163)Xamarin  (160)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (9)Business intelligence  (55)Button  (4)C#  (158)Chart  (141)Chart of the week  (55)Cloud  (15)Company  (443)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (70)Development  (662)Doc  (8)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (14)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (19)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (513)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (43)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (4)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (31)Solution Services  (4)Spreadsheet  (11)SQL  (14)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (393)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (619)What's new  (334)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout

Empowering Mobile Users with Syncfusion React Data Grid’s Adaptive UI Layout

As technology advances, users’ demands also advance regarding software interfaces. One area where this is particularly evident is in the realm of data grids. To meet these demands, Syncfusion has introduced a new layout design for its grid component, specifically designed to provide an optimal viewing experience and improve usability on small screens.

This feature ensures that users can easily interact with the grid on various devices, improving the overall usability of the component.

Enable Adaptive UI Layout in Syncfusion React Data Grid

One of the most significant features of this new layout design is the ability to render row elements in both vertical and horizontal modes. In today’s mobile-first world, vertical rendering of row elements is becoming increasingly necessary. This feature allows more rows to be shown on the screen at once and can make it easier for users to scroll and interact with the grid. This can be useful for mobile devices, tablets, and small screens.

The UI interaction-oriented features such as filtering, sorting, searching, and dialog editing were also redesigned to fit small screens.

To enable the adaptive UI layout and vertical rendering mode, developers need to set the enableAdaptiveUI property of the grid to true and the rowRenderingMode property to vertical. This will unleash the full potential of this new layout design.

We’ve included the following example to give you a better idea of this new layout.

Note: We’ve integrated the grid with a mobile layout for this example to give you a mobile experience.

import { ColumnDirective, ColumnsDirective, GridComponent, Inject } from '@syncfusion/ej2-react-grids';
import { AggregateColumnsDirective, AggregateColumnDirective, AggregateDirective, AggregatesDirective } from '@syncfusion/ej2-react-grids';
import { Filter, Sort, Edit, Toolbar, Aggregate, Page } from ‘@syncfusion/ej2-react-grids’;
import * as React from ‘react’;
import { data } from './datasource';
function App() {
    const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: ‘Dialog' };
    const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];
    const validationRule = { required: true };
    const orderidRules = { required: true, number: true };
    const filterOptions = { type: 'Excel' };
    const renderingMode = 'Vertical';
    let grid;
    
    const load = () => {
        grid = document.getElementById('adaptivebrowser').ej2_instances[0];
        grid.adaptiveDlgTarget = document.getElementsByClassName('e-mobile-content')[0];
    };
    
    const footerSum = (props) => {
        return (<span>Total Models: {props.Count}</span>);
    };
    
    let menuFilter = { type: 'Menu' };
    let checkboxFilter = { type: 'CheckBox' };
    
    return (<div className="e-adaptive-demo e-bigger">
            <div className="e-mobile-layout">
              <div className="e-mobile-content">
                  <GridComponent id="adaptivebrowser" dataSource={data} height='100%' ref={g => grid = g} enableAdaptiveUI={true} rowRenderingMode={renderingMode} allowFiltering={true} allowSorting={true} allowPaging={true} filterSettings={filterOptions} toolbar={toolbarOptions} editSettings={editSettings} created={created}>
                    <ColumnsDirective>
                      <ColumnDirective field='SNO' headerText='S NO' width='150' isPrimaryKey={true} validationRules={orderidRules}></ColumnDirective>
                      <ColumnDirective field='Model' headerText='Model Name' width='200' editType='dropdownedit' validationRules={validationRule}/>
                      <ColumnDirective field='Developer' headerText='Developer' width='200' filter={menuFilter} validationRules={validationRule}></ColumnDirective>
                      <ColumnDirective field='ReleaseDate' headerText='Released Date' editType='datepickeredit' type='date' format='yMMM' width='200'></ColumnDirective>
                      <ColumnDirective field='AndroidVersion' headerText='Android Version' width='200' filter={checkboxFilter} validationRules={validationRule}></ColumnDirective>
                    </ColumnsDirective>
                    
                    <Inject services={[Filter, Sort, Edit, Toolbar, Aggregate, Page]}/>
                      <AggregatesDirective>
                       <AggregateDirective>
                        <AggregateColumnsDirective>
                          <AggregateColumnDirective field='Model' type='Count' footerTemplate={footerSum}> </AggregateColumnDirective>
                        </AggregateColumnsDirective>
                      </AggregateDirective>
                    </AggregatesDirective>
                  </GridComponent>
              </div>
            </div>
            
            <br></br>
              <div className="datalink">Source:
                <a href="https://en.wikipedia.org/wiki/List_of_Android_smartphones" target="_blank">Wikipedia: List of Android smartphones</a>
              </div>
            </div>);
}
export default App;

The next images show the adaptive layout’s horizontal and vertical rendering modes.

Vertical Rendering Mode
Vertical Rendering Mode
Horizontal Rendering Mode
Horizontal Rendering Mode

Data Grid Features with Adaptive UI Layout

Now, let’s look at the different grid features in the new layout. The following .gif demonstrates the new layout’s sorting, filtering, searching, and dialog editing features and how to interact with them.

Data Grid with Adaptive UI Layout

References

For more details, refer to our documentation and demos.

Conclusion

The adaptive UI layout feature in Syncfusion’s React Data Grid offers a unique solution for grid lovers and users looking for optimal viewing and improved usability on small screens.

With the ability to render row elements in vertical mode, developers can create more user-friendly and efficient interfaces for small-screen devices.

Please try out this great feature and provide valuable feedback in the comments section.

Are you already a Syncfusion user? You can download the product setup here. If you’re not yet a Syncfusion user, you can download a free 30-day trial.

You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed