Frozen columns on the mobile view

[Rizwan]

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,

Attachment: Frozen_columns_on_the_mobile_view_be7f2fbd.zip

[Rajapandiyan Settu]

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. 

Created: https://ej2.syncfusion.com/javascript/documentation/api/grid/#created 

refreshColumns(): https://ej2.syncfusion.com/javascript/documentation/api/grid/#refreshcolumns 

@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> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_unfreeze_mobileview1296438317.zip 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Rizwan]

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.

[Rajapandiyan Settu]

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.   

   

dataBound: https://ej2.syncfusion.com/javascript/documentation/api/grid/#databound  

refreshColumns(): https://ej2.syncfusion.com/javascript/documentation/api/grid/#refreshcolumns    

   

[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  

[Rizwan]

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.

[Rajapandiyan Settu]

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>    

 

   

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/mvc_grid_window_resize960573190.zip 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S 

[Rizwan]

The problem is solved, 

Thank you for helping me solve this problem.

[Rajapandiyan Settu]

Hi Rizwan, 

 

You’re welcome. We are glad that the provided solution resolved your requirement.   

   

Regards,   

Rajapandiyan S