Kendo UI jQuery Headers display in the footer on Chrome

[Jaime]

Hi, I have defined a grid inside a tabstrip. Everything is fine with all the grids, but couple of them that started to display the header underneath the bottom. This does not happen on Edge. The rendered HTML shows the Header at the button of the grid content so I have the results displayed but the header isn't showing at the top. The web app is developed with .NET Core 2.2. 

This is the grid code:

$("#priceChangeAnalysisGrid").kendoGrid({
                                        dataSource: {
                                            transport: {
                                                read: priceChangeAnalysisUrl + "?priceListId=" + priceListId + "&thresholdValue=" + thresholdValue
                                            },
                                            pageSize: 10
                                        },
                                        sortable: true,
                                        pageable: {
                                            refresh: true,
                                            pageSizes: true,
                                            buttonCount: 10
                                        },
                                        scrollable: false,
                                        columns: [
                                            {
                                                field: "ProductCode",
                                                title: "Merchant Product Code",
                                                width: 200
                                            }, {
                                                field: "ProductDescription",
                                                title: "Merchant Product Description",
                                                attributes: {
                                                    style: "font",
                                                    style: "text-align: left;"
                                                }
                                            }, {
                                                field: "UnitOfMeasure",
                                                title: "Unit of Measure",
                                                attributes: {
                                                    style: "font",
                                                    style: "text-align: let;"
                                                },
                                                width: 200
                                            }, {
                                                field: "Change",
                                                title: "Change",
                                                width: 450
                                            }, {
                                                field: "ExistingUnitPrice",
                                                title: "Existing Price",
                                                attributes: {
                                                    style: "text-align: right;"
                                                },
                                                width: 100
                                            }, {
                                                field: "StartDate",
                                                title: "Start date",
                                                attributes: {
                                                    style: "text-align: right;"
                                                },
                                                width: 100
                                            },{
                                                field: "NewUnitPrice",
                                                title: "New Price",
                                                attributes: {
                                                    style: "text-align: right;"
                                                },
                                                width: 100
                                            }, {
                                                field: "PriceChangeUnits",
                                                title: "Price change",
                                                attributes: {
                                                    style: "text-align: right;"
                                                },
                                                width: 100
                                            }, {
                                                field: "PriceChangePercentage",
                                                title: "% change",
                                                attributes: {
                                                    style: "text-align: right;"
                                                },
                                                width: 100
                                            }, {
                                                field: "ManufacturerJustification",
                                                title: "Justification Provided",
                                                width: 150,
                                                attributes: {
                                                    style: "font"
                                                }
                                            }, {
                                                field: "ExcludeFromUpload",
                                                title: "Excluded from upload",
                                                width: 100,
                                                template: "<a class='btn btn-link colorBlue' type='button' id='button${PricingImportId}' onclick='onExcludeFromUploadPrice("" + "excludedFromUploadPriceAnalysis" + "", "" +  "@excludeFromUploadUrl" + "", "" + "${PricingImportId}" + "")'><i id='excludedFromUploadPriceAnalysis" + "${PricingImportId}" + "' class='fa fa-toggle-off'></i></a>",
                                                attributes: {
                                                    style: "font",
                                                    style: "text-align: center;"
                                                }
                                            }

 

CSS:

#priceChangeAnalysisGrid .k-link {
    color: black !important;
}

.hidden {
    display: none;
}

.k-button.k-upload-button {
    color: #fff;
    background-color: #009639;
    border-color: #009639;
}

 

What could it be happening here?

Thanks in advance

 

[Ivan Danchev]

Hi Jaime,

Try refreshing the Grid in the TabStrip's activate event handler. This is needed because the tab acts as a container and initially it is not visible (has 0 height and width), and this could cause issues with the nested component's size and dimensions calculation. So refreshing the Grid in the Activate event, allows it to re-render properly.

Attach the handler in the TabStrip's configuration, e.g.:

activate: onTabStripActivate

The handler would look like this:

function onTabStripActivate(e) {
	var grid = $("#priceChangeAnalysisGrid").data("kendoGrid");
	grid.refresh();
}

If several Grids exhibit the issue, refresh them as well. You can also conditionally refresh only the Grid that is nested in the currently selected tab, instead of all Grids every time a tab is selected.

Regards,
Ivan Danchev
Progress Telerik

[Jaime]

Hi Ivan,

 

Thanks for the suggestion. I tried this and didn't work. Any other idea, please?

Regards

[Ivan Danchev]

Hi Jaime,

Attached to this reply you can find a sample runnable project. In the Index view a Grid is initialized in the first tab of a TabStrip. The header is displayed correctly. Could you modify the example accordingly so that it demonstrates the issue and attach it back for further review?

Regards,
Ivan Danchev
Progress Telerik

[Jaime]

Hi Ivan

I have just come back from annual leave. I will try this and let you know how it goes,

 

Thanks, very much appreciated

J

[Ivan Danchev]

Hi Jaime,

Ok, take your time.

Regards,
Ivan Danchev
Progress Telerik

[Jaime]

Hi Ivan,

Hope you are well. This wasn't the issue. I have found the problem and sorted it. I have learnt something new and that's what really matters.

Many thanks for your help guys!
Cheers

Jaime