Freeze width not set

[David Price]

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

[Sathyanarayanamoorthy Eswararao]

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. 

https://help.syncfusion.com/aspnet/grid/scrolling 

https://help.syncfusion.com/aspnet/grid/scrolling#frozen-columns 

https://help.syncfusion.com/aspnet/grid/scrolling#freeze-particular-columns 

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

Regards, 

Sathyanarayanamoorthy 

[David Price]

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

[David Price]

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

[Sathyanarayanamoorthy Eswararao]

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. 

https://help.syncfusion.com/js/grid/scrolling#frozen-columns 

https://help.syncfusion.com/js/grid/responsive  

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

Regards, 

Sathyanarayanamoorthy 

[David Price]

Hi,

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

[David Price]

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

[Sathyanarayanamoorthy Eswararao]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/138104/7z/WebApplication211782699330.7z  

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 

[David Price]

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

[Sathyanarayanamoorthy Eswararao]

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 

[David Price]

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?

[Sathyanarayanamoorthy Eswararao]

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/138104/7z/Sample-214869546.7z  

Regards, 

Sathyanarayanamoorthy

[David Price]

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>

[Sathyanarayanamoorthy Eswararao]

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. 

https://help.syncfusion.com/aspnet/grid/editing#cell-edit-template  

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

Regards,
Sathyanarayanamoorthy