This is a migrated thread and some comments may be shown as answers.

Kendo UI jQuery Headers display in the footer on Chrome

6 Answers 70 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jaime
Top achievements
Rank 1
Jaime asked on 08 Jul 2020, 12:54 PM

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

 

6 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 10 Jul 2020, 11:49 AM

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

0
Jaime
Top achievements
Rank 1
answered on 15 Jul 2020, 02:26 PM

Hi Ivan,

 

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

Regards

0
Ivan Danchev
Telerik team
answered on 17 Jul 2020, 10:29 AM

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

0
Jaime
Top achievements
Rank 1
answered on 22 Jul 2020, 07:22 PM

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

0
Ivan Danchev
Telerik team
answered on 24 Jul 2020, 03:38 PM

Hi Jaime,

Ok, take your time.

Regards,
Ivan Danchev
Progress Telerik

0
Jaime
Top achievements
Rank 1
answered on 06 Aug 2020, 10:50 AM

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

Tags
Grid
Asked by
Jaime
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Jaime
Top achievements
Rank 1
Share this question
or