Grid row height and header issue

[Rizwan]

Hi,

I am facing two problems in the grid working in the frozen column.

1. Row height is not equal when I am using the "Column Chooser" option for the column show/hide.

2. The grid header also hides in the same case but when clicking on the refresh button everything gets OK.

Please keep in mind I am using frozen columns.

Video and code are attached please check.

Thank you.

Grid row height and header issue

Attachment: row_height_and_header_hide_issue_aa33ba3d.zip

[Ajith Govarthan]

Hi Rizwan, 

Thanks for contacting Syncfusion support. 

Query: Row height is not equal when I am using the "Column Chooser" option for the column show/hide. & The grid header also hides in the same case but when clicking on the refresh button everything gets OK. 

 

Based on the attached code example we have prepared sample and found everything works fine at our end. For your convenience we have attached the sample, please refer them for your reference. 

Code Example: 

Index.cshtml 

<div class="control-section"> 

 

    @{ 

        List<object> commands = new List<object>(); 

        commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

        commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

    } 

 

    @Html.EJS().Grid("DefaultPaging").ShowColumnChooser(true).DataSource((IEnumerable<object> 

        )ViewBag.datasource).Columns(col => 

        { 

            col.HeaderText("Manage Records").IsFrozen(true).Width("160").Commands(commands).Add(); 

 

            col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

            col.Field("CustomerID").IsFrozen(true).HeaderTemplate("#employeetemplate").HeaderText("Customer Name").Width("170").Add(); 

            col.Field("OrderDate").HeaderTemplate("#datetemplate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

            col.Field("Freight").IsFrozen(true).Template("#template").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

            col.Field("ShipCountry").Width("150").Add(); 

            col.Field("ShipCity").Template("#template1").Add(); 

 

        }).Height("400").AllowGrouping().AllowPaging().Toolbar(new List<string> 

            () { "Add", "Edit", "Delete", "Cancel", "ColumnChooser" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Render() 

</div> 

 

<script id="template" type="text/x-template"> 

    <div class="template_checkbox"> 

        ${if(Freight < 13)} 

        <input type="checkbox" checked> ${else} 

        <input type="checkbox"> ${/if} 

    </div> 

</script> 

<script id="template1" type="text/x-template"> 

    <div class="template_checkbox"> 

       <button>${ShipCity}</button> 

    </div> 

</script> 

 

<script id="datetemplate" type="text/x-template"> 

    <span class="e-icon-calender e-icons headericon"></span> Order Date 

</script> 

 

<script id="employeetemplate" type="text/x-template"> 

    <span class="e-icon-userlogin e-icons employee"></span> Emp ID 

</script> 

 

<script> 

    

 

  

    var initial = true; 

 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/urladaptorsample_mvc_template-1621543614.zip 

If you still face the issue then, please try to reproduce the issue in the attached sample to find the root cause of the issue. 

Regards, 

Ajith G. 

[Rizwan]

Hi,

I think our understanding is not the same on these points.

1. Row height is not equal when I am using the "Column Chooser" option for the column show/hide, with freeze columns.

2. The grid columns header hides when is "Column Chooser" option for the column show/hide again, with freeze columns.

The code and snapshot is attached.

Attachment: Again_acece015.zip

[Ajith Govarthan]

Hi Rizwan, 

Thanks for the update. 

Query: Grid row height and header issue 

Based on your attached code example and screenshot, we have prepared sample and in that we have placed the Grid component inside the Tab component. In the prepared sample, we have also enabled the column templates, header templates, frozen columns and Textwrap features, which works fine at our end without any mentioned issues. For your convenience we have attached the sample for more information. 

Code Example: 

Index.cshtml 

 

@using Syncfusion.EJ2; 

@using Syncfusion.EJ2.Navigations; 

@{ 

    ViewBag.Title = "Grid UrlAdaptor"; 

} 

@{ 

    List<object> commands = new List<object>(); 

    commands.Add(new { type = "Edit", buttonOption = new { iconCss = "e-icons e-edit", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Delete", buttonOption = new { iconCss = "e-icons e-delete", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Save", buttonOption = new { iconCss = "e-icons e-update", cssClass = "e-flat" } }); 

    commands.Add(new { type = "Cancel", buttonOption = new { iconCss = "e-icons e-cancel-icon", cssClass = "e-flat" } }); 

} 

 

<div class="e-sample-resize-container"> 

    @Html.EJS().Tab("ej2Tab").Items(new List<TabTabItem>{ 

      new TabTabItem { Header = new TabHeader { Text = "Grid_1" }, Content = "#Grid1" }, 

      new TabTabItem { Header = new TabHeader { Text = "FaceBook" }, Content = "#Grid2" } 

    }).Render() 

</div> 

<div id="Grid1" style="display: none"> 

 

    @Html.EJS().Grid("DefaultPaging").ShowColumnChooser(true).AllowTextWrap().DataSource(ds => ds.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor").InsertUrl("/Home/Insert").RemoveUrl("/Home/Remove").UpdateUrl("/Home/Update")).Columns(col => 

    { 

    col.HeaderText("Manage Records").IsFrozen(true).Width("160").Commands(commands).Add(); 

 

    col.Field("OrderID").HeaderText("Order ID").Width("120").IsPrimaryKey(true).Filter(new { type = "CheckBox" }).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.IsFrozen(true).HeaderTemplate("#headtemplate").Template("#template").HeaderText("Customer Template").Width("170").Add(); 

 

    col.Field("CustomerID").IsFrozen(true).HeaderTemplate("#employeetemplate").HeaderText("Customer Name").Width("170").Add(); 

    col.Field("OrderDate").HeaderTemplate("#datetemplate").HeaderText("Order Date").Width("130").EditType("datepickeredit").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("Freight").Template("#template").HeaderText("Freight").Width("120").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

    col.Field("ShipCountry").Width("150").Add(); 

    col.Field("ShipCity").Template("#template1").Add(); 

 

    }).Height("400").AllowGrouping().AllowPaging().Toolbar(new List<string> 

        () { "Add", "Edit", "Delete", "Cancel", "ColumnChooser" }).AllowFiltering().FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).EditSettings(edit => { edit.AllowEditing(true).AllowAdding(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Batch); }).Render() 

 

</div> 

<div id="Grid2" style="display: none"> 

    Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates and fellow students Eduardo Saverin, Andrew McCollum, Dustin Moskovitz and Chris Hughes.The founders had initially limited the website's membership to Harvard students, but later expanded it to colleges in the Boston area, the Ivy League, and Stanford University. It gradually added support for students at various other universities and later to high-school students. 

 

</div> 

<script id="template" type="text/x-template"> 

    <div class="template_checkbox"> 

        ${if(Freight < 13)} 

        <input type="checkbox" checked> ${else} 

        <input type="checkbox"> ${/if} 

    </div> 

</script> 

<script id="template1" type="text/x-template"> 

    <div class="template_checkbox"> 

        <button>${ShipCity}</button> 

    </div> 

</script> 

 

<script id="datetemplate" type="text/x-template"> 

    <span class="e-icon-calender e-icons headericon"></span> Order Date 

</script> 

 

<script id="employeetemplate" type="text/x-template"> 

    <span class="e-icon-userlogin e-icons employee"></span> Customer ID 

</script> 

 

<script id="headtemplate" type="text/x-template"> 

    <span class="e-icon-userlogin e-icons employee"></span> template data 

</script> 

 

<script> 

 

 

 

    var initial = true; 

 

</script> 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/frozen_sample_new-490168039.zip 

If you still face the issue, then please share the below details to find the root cause of the issue. 

1. If possible, please try to reproduce the issue in the attached sample.

2. Share the video demonstration of the reported issue.

 

3. Are you facing the issue while editing the Grid rows?

 

4. Ensure the Syncfusion Essential Studio version.

 

Regards, 

Ajith G.