Grid Sticky Headers inside Dialog

[Eddie Willcox]

Hi,

I am rendering a grid inside a dialog window. I have added .EnableStickyHeader(true) on the grid builder, but when I scroll, the headers are not sticking to the top. Below is my code with the dialog and the grid inside. Please let me know what I am doing wrong.

<div id="msgDialog"></div>

@Html.EJS().Dialog("viewAndConfirm").Created("vwAndConfirmCreated").Visible(false).AnimationSettings(new Syncfusion.EJ2.Popups.DialogAnimationSettings() { Effect = Syncfusion.EJ2.Popups.DialogEffect.FadeZoom }).IsModal(true).Header("View And Confirm Order").ShowCloseIcon(true).CloseOnEscape(true).Width("1500").Height("700").Target("#msgDialog").ContentTemplate(@<div>

                 @Html.EJS().Grid("vwAndConfirmGrid").EnableStickyHeader(true).Width("100%").Height("100%").Columns(col =>

            {

                col.Field("ProductCode").HeaderText("Code").HeaderText("Code").IsPrimaryKey(true).Add();

                col.Field("Description").HeaderText("Item").Width("200px").HeaderText("Item").AllowEditing(false).Add();

                col.Field("Colour").HeaderText("Colour").AllowEditing(false).Add();

                col.Field("Price").HeaderText("Price Ex VAT").Format("C2").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).AllowEditing(false).Add();

                col.Field("Pack").HeaderText("Pack").AllowEditing(false).Add();

                col.Field("Barcode").HeaderText("Barcode").AllowEditing(false).Add();

                col.Field("QtyToOrder").HeaderText("Order").AllowEditing(false).Add();

            }).DataBound("dataBound").Locale("en-ZA").GridLines(Syncfusion.EJ2.Grids.GridLine.Both).EnableAltRow(true).Render()

                 </div>).Render()

[Balaji Sekar]

Hi Eddie, 

Greetings from the Syncfusion support. 

We checked the Grid with EnableStickyHeader as working properly and we are validating the this query when rendered the Grid inside of Dialog since we will update further details on January 27, 2022 

Until then we appreciate your valuable patience. 

Regards, 

Balaji Sekar 

[Rajapandi Ravi]

Hi Eddie, 

Greetings from Syncfusion support 

Based on your shared information we have prepared a sample as per your application structure and tried to reproduce your problem at our end, but it was unsuccessful. The sticky Header was working fine at our end. Please refer the below code example and sample for more information. 

 

<div id="msgDialog"></div> 

 

 

@Html.EJS().Dialog("viewAndConfirm").AnimationSettings(new Syncfusion.EJ2.Popups.DialogAnimationSettings() { Effect = Syncfusion.EJ2.Popups.DialogEffect.FadeZoom }).IsModal(true).Header("View And Confirm Order").ShowCloseIcon(true).CloseOnEscape(true).Width("1500").Height("700").Target("#msgDialog").ContentTemplate(@<div> 

     

        @Html.EJS().Grid("Grid").Width("100%").Height("100%").DataSource((IEnumerable<object>)ViewBag.DataSource).EnableStickyHeader(true).Columns(col => 

    { 

        col.Field("OrderID").HeaderText("Order ID").Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add(); 

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

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

        col.Field("ShippedDate").HeaderText("Shipped Date").Width("140").Format("yMd").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add(); 

        col.Field("ShipName").HeaderText("Ship Name").Width("150").Add(); 

    }).Render() 

 

    </div>).Render() 

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

Screenshot: 

 

If you still face the issue, share the simple issue reproducible sample, or try to reproduce the issue in the above attached sample. 

Regards, 

Rajapandi R