1. Home
  2. Forum
  3. ASP.NET Web Forms
  4. Freeze width not set

Freeze width not set

Hi,

In the grid, I have set the first column to 180 in width

<ej:Column Field="ColumnName" Width="180" 

when I apply  IsFrozen="true"   to the column I am unable to set the width to 180

I get an unexpected column size that I can't make 180? If I turn IsFrozen = false all is correct.

How can I freeze the first column and still maintain 180 in width? I have submitted the page and css to support my issue.



Attachment: Test.aspx_2ba8cddc.zip

13 Replies
SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 14, 2018 12:46 PM UTC

Hi David, 

Thanks for contacting Syncfusion support. 

Query: How can I freeze the first column and still maintain 180 in width? 
 
In the attached View page we did not find any columns definition for the grid but in the incident you have mentioned that you have specified the column width as 180. Also ,we found that you have given Width and Height directly as a property to the ejGrid. The ejGrid does not have a direct property as width and height.  

Also if you use Frozen columns AllowScrolling must be enabled. You can set the height and width for grid in scrollSettings. 

Please refer the below documentation for details of scrollSettings and Frozen columns. 




If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 


DP David Price June 14, 2018 01:10 PM UTC

Hello,

Please have a look at the test file enclosed it will show you that when I use

IsResponsive="true"

The grid frozen columns are messed up



without IsResponsive="false"  display is correct ?




I would like to use IsResponsive=true on the page?



Attachment: Test.aspx_5a905612.zip

DP David Price replied to David Price June 14, 2018 01:28 PM UTC



I have updated the test file to show you exactly my issue with the frozen column

with IsResponsive="true"



IsResponsive="false"



When its set to false it is displaying correctly

Attachment: Test.aspx_5fac7a8c.zip

SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 15, 2018 04:28 AM UTC

Hi David, 

According to your query we suspect that you need to enable both isResponsive and Frozen Columns. But Frozen columns are not supported with isResponsive feature of Grid. Please refer the below documentation for more details. 



If you need any further assistance please get back to us. 

Regards, 
Sathyanarayanamoorthy 


DP David Price June 15, 2018 06:37 AM UTC

Hi,

I don't see anything in your documentation that says isResponsive and Frozen Columns can't be used together?

DP David Price June 15, 2018 07:56 AM UTC

Hello,

Please see example 

Columns display correctly




If I try and freeze the first column

 <ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="true" AllowPaging="True">
                <ScrollSettings FrozenColumns="1" />  
  </ej:Grid>

The display is all messed up




If I try and change the width it gets even worse

 <ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="true" AllowPaging="True">
                <ScrollSettings Width="180"  FrozenColumns="1" />  
        </ej:Grid>





How can I display the columns normally with the first column frozen? Since the data is dynamic I don't know the columns to set it up since they are dynamic.







Attachment: GridFeatures.aspx.designer_e7ee730b.zip

SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 18, 2018 12:35 PM UTC

Hi David, 

We have checked with the provided code example in our sample and we are not able to reproduce the mentioned issue on our side. We have prepared a sample with the provided code example which can be downloaded from the below location. 


Please refer the below code example. 



<div>   
        <ej:Grid ID="OrdersGrid" runat="server" AllowScrolling="true" AllowPaging="True">                 
            <ScrollSettings  FrozenColumns="1" />   
        </ej:Grid>                
</div> 
 
[aspx.cs] 
 
List<Orders> order = new List<Orders>(); 
        List<string> str = new List<string>(); 
 
        List<EmployeeInfo> Info = new List<EmployeeInfo>(); 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            str.Add("<ul><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li><li>Lorem Ipsum is simply dummy text of the printing and typesetting (3rd party integration)</li><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li></ul>"); 
            str.Add("<ul><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li><li>Lorem Ipsum is simply dummy text of the printing and typesetting (3rd party integration)</li><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li><li>Lorem Ipsum is simply dummy text of the printing and typesetting </li></ul>"); 
 
            BindDataSource(); 
 
        } 
 
        private void BindDataSource() 
        { 
            int code = 10000; 
            Info.Add(new EmployeeInfo("")); 
            for (int i = 1; i < 10; i++) 
            { 
                order.Add(new Orders(code + 1, "ALFKI", str, i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin")); 
                order.Add(new Orders(code + 2, "ANATR", str, i + 2, 3.3 * i, new DateTime(1990, 04, 04), "Madrid")); 
                order.Add(new Orders(code + 3, "ANTON", str, i + 1, 4.3 * i, new DateTime(1957, 11, 30), "Cholchester")); 
                order.Add(new Orders(code + 4, "BLONP", str, i + 3, 5.3 * i, new DateTime(1930, 10, 22), "Marseille")); 
                order.Add(new Orders(code + 5, "BOLID", str, i + 4, 6.3 * i, new DateTime(1953, 02, 18), "Tsawassen")); code += 5; 
            } 
            this.OrdersGrid.DataSource = order; 
            this.OrdersGrid.DataBind(); 
        } 

Refer the below screenshots. 

  1. Before using the Frozen columns

 

2.After using the Frozen columns. 

 

If you still face the issue please share the following details. 

  1. Share the Essential studio versions.
  2. If possible please try to reproduce the mentioned issue in the attached sample.

Regards,
Sathyanarayanamoorthy 



DP David Price June 19, 2018 06:50 AM UTC

Hello,

Using your example and and version 16.1451.0.24 of grid

<ej:Grid ID="OrdersGrid" MinWidth="900" Width="1280" runat="server" AllowResizeToFit="true" AllowResizing="true" AllowScrolling="true" AllowPaging="true" >       </ej:Grid> 

The grid is displayed correctly 




Now when I add IsFrozen=true the column sizing is messed up



So I try adding a width

 <ScrollSettings Width="380"  FrozenColumns="1" />    

It makes no difference .


1 . How can I make the columns width larger ? and control each of them to my required sizing ?









Attachment: Default.aspx.designer_48e1fc54.zip

SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 20, 2018 12:43 PM UTC

Hi David, 

We have confirmed that the issue “When Frozen Columns and AllowResizeToFit is enabled then Columns width is not set properly” as a defect. This issue will be fixed in the release Volume 2 SP1 2018 which is expected to be rolled out at the end of July 2018. 

Regards,
Sathyanarayanamoorthy 


DP David Price June 20, 2018 02:04 PM UTC

Hello,

Instead of the columns auto-creating can I dynamically set them up in the code behind at run time, then I would be able to set the widths?

SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 21, 2018 12:20 PM UTC

Hi David, 

Query: Instead of the columns auto-creating can I dynamically set them up in the code behind at run time, then I would be able to set the widths 
 
Yes, you can able to define the columns in code behind at run time.  

Please refer the below code example. 

 
[aspx.cs] 
 
  private void BindDataSource() 
        { 
            int code = 10000; 
            Info.Add(new EmployeeInfo("")); 
            for (int i = 1; i < 10; i++) 
            { 
                order.Add(new Orders(code + 1, "ALFKI", str, i + 0, 2.3 * i, new DateTime(1991, 05, 15), "Berlin")); 
                ------------------------- 
 
           } 
 
            List<Column> col = new List<Column>(); 
 
            col.Add(new Column() { Field = "OrderID", HeaderText = "OrderID", Width = 80, }); 
            col.Add(new Column() { Field = "CustomerID", HeaderText = "CustomerID", Width = 80, }); 
            col.Add(new Column() { Field = "EmployeeID", HeaderText = "EmployeeID", Width = 80, }); 
            ------------------ 
             
                                   …... 
 
            this.OrdersGrid.DataSource = order; 
            this.OrdersGrid.Model.Columns = col; 
            this.OrdersGrid.DataBind(); 
        } 

We have prepared a sample for your reference which can be downloaded from the below location. 


Regards, 
Sathyanarayanamoorthy

DP David Price June 21, 2018 03:31 PM UTC

Thank you I think this is a solution. How can I setup EditTemplate from the code behind

e.g.

 <ej:Column Field="Head" Width="350" HeaderText="Head" CssClass="XCla" HeaderTextAlign="center" DisableHtmlEncode="false" HeaderTemplateID="#XHead"  > 
      <EditTemplate Create="create" Read="read" Write="write" />
 </ej:Column>






SE Sathyanarayanamoorthy Eswararao Syncfusion Team June 22, 2018 03:50 PM UTC

Hi David, 

Query: How can I setup EditTemplate from the code behind 

You can set up the Edit Template for the Columns in the server side as in the below code example. 

In the below code example Edit template can be given in the code behind but the respective JavaScript functions must be given in the view page. 
 
[aspx.cs] 
  List<Column> col = new List<Column>(); 
 
            col.Add(new Column() { Field = "OrderID", HeaderText = "OrderID", Width = 80, }); 
            col.Add(new Column() { Field = "CustomerID", HeaderText = "CustomerID", Width = 80, EditTemplate = new EditTemplate() { Create = "create", Read = "read", Write = "write" } }); 
            col.Add(new Column() { Field = "EmployeeID", HeaderText = "EmployeeID", Width = 80,  }); 
            col.Add(new Column() { Field = "Employee", HeaderText = "Employee", Width = 80, }); 
            col.Add(new Column() { Field = "Freight", HeaderText = "Freight", Width = 80 }); 
            col.Add(new Column() { Field = "OrderDate", HeaderText = "OrderDate", Width = 300, }); 
            col.Add(new Column() { Field = "ShipCity1", HeaderText = "ShipCity1", Width = 80, } 
 
[aspx] 
 
<div>   
        <ej:Grid ID="OrdersGrid" MinWidth="900"  runat="server"  AllowScrolling="true" AllowPaging="true" >    
                <ScrollSettings Width="400" FrozenColumns="1"  />  
            <EditSettings AllowEditing="true" />         
        </ej:Grid>                
</div> 
 
 
 
    <script> 
         function create() { 
            return $("<input>"); 
        } 
 
        function write(args) { 
            obj = $('#<%= OrdersGrid.ClientID %>').ejGrid('instance'); 
            var data = ej.DataManager(obj.model.dataSource).executeLocal(new ej.Query().select("CustomerID")); 
            args.element.ejAutocomplete({ width: "100%", dataSource: data, enableDistinct: true, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); 
        } 
 
        function read(args) { 
            args.ejAutocomplete('suggestionList').css('display', 'none'); 
            return args.ejAutocomplete("getValue"); 
        } 
        $(function () { 
            $('#<%= OrdersGrid.ClientID %>').keyup(function (e) { 
                if ( e.keyCode == 40 && $(e.target).hasClass("e-autocomplete")) { 
                    var gridid = $('#<%= OrdersGrid.ClientID %>').attr("id"); 
                    var autocomp = $("#" + gridid + "CustomerID").ejAutocomplete("instance") 
                    if (autocomp.getValue() != "" && autocomp.getActiveText() != "No suggestions") 
                        $(e.target).val(autocomp.getActiveText()); 
                } 
            }); 
        }); 
    </script> 
 

Please refer the below documentation for details of Edittemplate. 



If you need any further assistance please get back to us. 

Regards,
Sathyanarayanamoorthy 


Loader.
Up arrow icon