How to force Grid to render in Phone mode for JavaScript?
This KB showcase the example to force the JavaScript 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
<div id="FlatGrid"></div>
JS
$(function () {
$("#FlatGrid").ejGrid({
dataSource: window.gridData,
allowPaging: true,
editSettings: { allowAdding: true, allowDeleting: true, allowEditing: true },
toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Add, ej.Grid.ToolBarItems.Edit, ej.Grid.ToolBarItems.Delete, ej.Grid.ToolBarItems.Update, ej.Grid.ToolBarItems.Cancel, ej.Grid.ToolBarItems.Search] },
allowFiltering: true,
allowSorting: true,
isResponsive: true,
load: "load",
enableResponsiveRow: true,
minWidth: 600,
filterSettings: { filterType: "excel" },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", width: 90, textAlign: ej.TextAlign.Right },
{ field: "CustomerID", headerText: "CustomerID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", width: 90 },
{ field: "ShipCity", headerText: "Ship City", width: 90 },
{ field: "Freight", headerText: 'Freight', width: 90, format: "{0:C}" }
]
});
});
MVC
@(Html.EJ().Grid<object>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.AllowPaging() /*Paging Enabled*/
.EditSettings(edit => edit.AllowEditing().AllowAdding().AllowDeleting())
.ToolbarSettings(toolbar =>
{
toolbar.ShowToolbar().ToolbarItems(items =>
{
items.AddTool(ToolBarItems.Add);
items.AddTool(ToolBarItems.Edit);
items.AddTool(ToolBarItems.Delete);
items.AddTool(ToolBarItems.Update);
items.AddTool(ToolBarItems.Cancel);
items.AddTool(ToolBarItems.Search);
});
})
.IsResponsive(true)
.EnableResponsiveRow(true)
.ClientSideEvents(eve => eve.Load ("load"))
.AllowFiltering()
.AllowSorting()
.MinWidth(600)
.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
.Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width(90).Add();
col.Field("CustomerID").HeaderText("Customer ID”).Width(90).Add();
col.Field("EmployeeID").HeaderText("Employee ID”) .Width(90).Add();
col.Field("ShipCity").HeaderText("Ship City”) .Width(90).Add();
col.Field("Freight").HeaderText("Freight”) .Format("{0:C}").Width(90).Add();
}))
[Controller]
namespace EJGrid.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
var DataSource = new NorthwindDataContext().OrdersViews.ToList();
ViewBag.data = DataSource;
return View();
}
}
}
ASP
<ej:Grid ID="FlatGrid" runat="server" AllowPaging="True" MinWidth="600" IsResponsive="true" EnableResponsiveRow="true" AllowSorting="True" AllowFiltering="True" >
<ClientSideEvents Load="load " />
<Columns>
<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" Width="90" />
<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />
<ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="80"/>
<ej:Column Field="ShipCity" HeaderText="Ship City" Width="80" />
<ej:Column Field="Freight" HeaderText="Freight" Format="{0:C}" Width="80" />
</Columns>
< FilterSettings FilterType="Excel"/>
<EditSettings AllowEditing="True" AllowAdding="True" AllowDeleting="True"></EditSettings>
<ToolbarSettings ShowToolbar="True" ToolbarItems="add,edit,delete,update,cancel,search"></ToolbarSettings>
</ej:Grid>
[CS]
public partial class _Default : Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.FlatGrid.DataSource = new NorthwindDataContext().Orders;
this.FlatGrid.DataBind();
}
}
.Net core
<ej-grid id="FlatGrid " allow-paging="true" allow-sorting="true" datasource=" ViewBag. DataSource " load="load " min-width="600 " is-responsive="true" enable-responsive-row="true" >
<e-filter-settings filter-type ="Excel"/>
<e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" ></e-edit-settings>
<e-toolbar-settings show-toolbar="true" toolbar-items='@new List<string> {"add","edit","update","cancel",”search”}' />
<e-columns>
<e-column field="OrderID" is-primary-key="true" header-text="Order ID" width="90"></e-column>
<e-column field="CustomerID" header-text="Customer ID" width="80”></e-column>
<e-column field="EmployeeID" header-text="Employee ID" width="80”></e-column>
<e-column field="ShipCity" header-text="Ship City" width="80”></e-column>
<e-column field="Freight" header-text="Freight" format="{0:C}" width="80”></e-column>
</e-columns>
</ej-grid>
Angular
<ej-grid id="FlatGrid" [dataSource]="gridData" [toolbarSettings]="toolbarItems" [editSettings]="editSettings" [minWidth]="700" [isResPonsive]="true" [allowFiltering]="true" [allowSorting]="true" [filterSettings]=”filterType" [enableResponsiveRow]="true" (load)="load($event)"
>
<e-columns>
<e-column field="OrderID" [isPrimaryKey]="true" headerText="Order ID" width="75"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="90"></e-column>
<e-column field="EmployeeID" headerText="Employee ID " width="90"></e-column>
<e-column field="ShipCity" headerText="Ship City" width="90"></e-column>
<e-column field="Freight" headerText="Freight" format="{0:C}" width="90"></e-column>
</e-columns>
</ej-grid>
TS
export class AppComponent {
public editSettings;
public toolbarItems;
public filterType;
public gridData: any;
@ViewChild('FlatGrid') Grid: EJComponents<any, any>;
constructor() {
this.filterType={filterType: ” excel”}
this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};
this.toolbarItems = { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel”,”search"]};
this.gridData = window.gridData;
load: function(e:any){
this.setPhoneModeMaxWidth(615);
}
}
Step 2: Set the desire higher resolution width in setPhoneModeMaxWidth method in grid load event.
</script>
function load(args)
{
this.setPhoneModeMaxWidth(615);
}
</script>
Step 3: Need to set same value for max-width in “ejgrid.responsive.css” file.
Refer the below code snippets:
/*overwrite from 320px to 615px*/
@media (max-width :615px) {
.e-grid.e-responsive > [id*='Dlg_wrapper'] {
width: 130px !important;
}
}
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:
<head> <link href="../content/ejthemes/responsive-css/ej.responsive.css" rel="stylesheet" /> <link href="../content/ejthemes/responsive-css/ejgrid.responsive.css" type="text/css" rel="stylesheet" /> </head>
Output Screenshots
Figure 1: Phone mode with normal resolution
Figure 2: Phone mode with higher resolution
Conclusion
I hope you enjoyed learning about how to force Grid to render in Phone mode for JavaScript.
You can refer to our JavaScript Grid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Grid example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
