- Home
- Forum
- ASP.NET MVC - EJ 2
- Frozen columns on the mobile view
Frozen columns on the mobile view
Hi,
Can you please help with the best practice utilization freeze columns in a responsive view?
By default particular column freeze on the desktop, but when the mobile view these columns are unfrozen.
I want Frozen columns not to freeze on the mobile view.
for the timing, I am using (HideAtMedia) but it is not good practice because, why I write duplicate code.
Please check my code and screen shorts.
Thank you,
Thank you,
Attachment: Frozen_columns_on_the_mobile_view_be7f2fbd.zip
SIGN IN To post a reply.
7 Replies
1 reply marked as answer
RS
Rajapandiyan Settu
Syncfusion Team
May 10, 2021 12:40 PM UTC
Hi Rizwan,
Thanks for contacting Syncfusion support.
Query: By default particular column freeze on the desktop, but when the mobile view these columns are unfrozen.I want Frozen columns not to freeze on the mobile view.
Based on your query, you want the frozen columns only in the desktop view and need to show it as normal column when in mobile view.
We have prepared a sample with your requirement. In which dynamically set the isFrozen property of column as undefined when run it in mobile view. Please find the below code example and sample for your reference.
|
@Html.EJS().Tooltip("allTabtooltip").Target(".e-unboundcelldiv").ContentTemplate(@<div>
@Html.EJS().Created("created").Columns(col =>
----
}).Render()
</div>).Render()
<script>
function created(args) {
// check the machine is mobile or desktop
var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
for (var i = 0; i < this.columns.length; i++) {
// unfreeze the column
this.columns[i]["isFrozen"] = undefined;
}
// refresh the columns to affect the changes in Grid
this.refreshColumns();
}
}
</script>
|
Please get back to us if you need further assistance with this.
Regards,
Rajapandiyan S
RI
Rizwan
May 21, 2021 11:23 AM UTC
Thank you replyed and supported,
The solution working fine on the device, and helpful for me.
But the my problem is Frozen remove small size screen like .HideAtMedia("(min-width: 500px)").
Because we use multiple size screen therefore i want this solution.
Frozen removed on small size screen.
RS
Rajapandiyan Settu
Syncfusion Team
May 24, 2021 12:03 PM UTC
Hi Rizwan,
You’re welcome.
Query: But the my problem is Frozen remove small size screen like .HideAtMedia("(min-width: 500px)"). Because we use multiple size screen therefore i want this solution.
Frozen removed on small size screen.
Based on your requirement, you want to unfreeze the columns for smaller screen. You can achieve your requirement by using the following code example in the dataBound event of Grid.
|
[index.cshtml]
@Html.EJS().Grid("FrozenGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSelection(false).AllowResizing().Height("410").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("140").IsFrozen(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("140").IsFrozen(true).Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").IsFrozen(true).Width("200").Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCity").HeaderText("Ship City").Width("200").Add();
col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).DataBound("dataBound").Render()
<script>
var flag = true;
function dataBound(args) {
if (flag) {
flag = false;
// get the screenwidth var screenWidth = window.innerWidth;
// make the condition as you want
if (screenWidth <= 800) {
for (var i = 0; i < this.columns.length; i++) {
// unfreeze the column
this.columns[i]["isFrozen"] = undefined;
}
// refresh the columns to affect the changes in Grid
this.refreshColumns();
}
}
}
</script> |
Please get back to us if you need further assistance with this.
Regards,
Rajapandiyan S
RI
Rizwan
June 5, 2021 01:13 PM UTC
Can you please provide me the same solution for window resize?
The solution working only data-bound.
when I shrink the browser window manually using the mouse, it is not working.
RS
Rajapandiyan Settu
Syncfusion Team
June 7, 2021 10:54 AM UTC
Hi Rizwan,
Thanks for your update.
Query: Can you please provide me the same solution for window resize? when I shrink the browser window manually using the mouse, it is not working.
Based on your requirement, you want to freeze/unfreeze the columns when we resizing the window screen. You can achieve your requirement by using the following code example in the resize event of Window.
|
[index.cshtml]
@Html.EJS().Grid("FrozenGrid").DataSource((IEnumerable<object>)ViewBag.DataSource).AllowSelection(false).AllowResizing().Height("410").Columns(col =>
{
col.Field("OrderID").HeaderText("Order ID").Width("140").IsFrozen(true).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("Freight").HeaderText("Freight").Width("140").IsFrozen(true).Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("OrderDate").HeaderText("Order Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("CustomerID").HeaderText("Customer Name").IsFrozen(true).Width("200").Add();
col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
col.Field("ShippedDate").HeaderText("Shipped Date").Width("130").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
col.Field("ShipCity").HeaderText("Ship City").Width("200").Add();
col.Field("ShipAddress").HeaderText("Ship Address").Width("150").Add();
col.Field("ShipCountry").HeaderText("Ship Country").Width("150").Add();
}).DataBound("dataBound").Render()
<script>
var flag = true;
// bind resize to the window
window.addEventListener("resize", windowResize);
function windowResize(args){
var screenWidth = window.innerWidth;
var grid = document.getElementById("FrozenGrid").ej2_instances[0];
// get the grid columns
var columns = grid.getColumns();
// unfreeze the column for smaller screen
if (screenWidth <= 800) {
if(grid.element.getElementsByClassName('e-frozencontent').length > 0){
for (var i = 0; i < columns.length; i++) {
if( columns[i].field == "OrderID" || columns[i].field == "Freight" || columns[i].field == "CustomerID"){
columns[i]["isFrozen"] = undefined;
}
}
// refresh the columns to affect the changes
grid.refreshColumns();
}
}else{
// freeze the columns for bigger screen
if (grid.element.getElementsByClassName('e-frozencontent').length == 0){
for (var i = 0; i < columns.length; i++) {
if( columns[i].field == "OrderID" || columns[i].field == "Freight" || columns[i].field == "CustomerID"){
columns[i]["isFrozen"] = true;
}
}
// refresh the frozen columns to affect the changes
grid.freezeRefresh();
}
}
}
function dataBound(args) {
if (flag) {
flag = false;
// get the screenwidth
var screenWidth = window.innerWidth;
// make the condition as you want
if (screenWidth <= 800) {
for (var i = 0; i < this.columns.length; i++) {
// unfreeze the column
this.columns[i]["isFrozen"] = undefined;
}
// refresh the columns to affect the changes in Grid
this.refreshColumns();
}
}
}
</script>
|
Please get back to us if you need further assistance with this.
Regards,
Rajapandiyan S
Marked as answer
RI
Rizwan
June 8, 2021 09:21 AM UTC
The problem is solved,
Thank you for helping me solve this problem.
RS
Rajapandiyan Settu
Syncfusion Team
June 9, 2021 04:36 AM UTC
Hi Rizwan,
You’re welcome. We are glad that the provided solution resolved your requirement.
Regards,
Rajapandiyan S
SIGN IN To post a reply.
