How to force Grid to render in Phone mode?

This KB showcase the example to force the grid to render in phone mode at resolution more than 321px.

Solution

To render the Grid in phone mode at resolution more than 321px use the setPhoneModeMaxWidth method.

Step 1: Render the Grid control.

HTML

JS

MVC

ASP

.Net core

Angular

TS

Step 2: Set the desire higher resolution width in setPhoneModeMaxWidth method in grid load event.

Step 3: Need to set same value for max-width in “ejgrid.responsive.css” file.

Refer the below code snippets:

You can get the ejgrid.responsive.css file from the below mentioned location:

{Program file folder}\Syncfusion\Essential Studio\{Version}\JavaScript\assets-src\css\web\responsive-css\ejgrid.responsive.

Refer this css files in head tag:

Output Screenshots

Figure 1: Phone mode with normal resolution

   Figure 2: Phone mode with higher resolution