Kendo UI jQuery Headers display in the footer on Chrome

7 posts, 0 answers
  1. Jaime
    Jaime avatar
    4 posts
    Member since:
    Dec 2018

    Posted 08 Jul 2020 Link to this post

    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

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 10 Jul 2020 Link to this post

    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

  3. Jaime
    Jaime avatar
    4 posts
    Member since:
    Dec 2018

    Posted 15 Jul 2020 in reply to Ivan Danchev Link to this post

    Hi Ivan,

     

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

    Regards

  4. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 17 Jul 2020 Link to this post

    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

  5. Jaime
    Jaime avatar
    4 posts
    Member since:
    Dec 2018

    Posted 22 Jul 2020 in reply to Ivan Danchev Link to this post

    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

  6. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2153 posts

    Posted 24 Jul 2020 Link to this post

    Hi Jaime,

    Ok, take your time.

    Regards,
    Ivan Danchev
    Progress Telerik

  7. Jaime
    Jaime avatar
    4 posts
    Member since:
    Dec 2018

    Posted 06 Aug 2020 in reply to Ivan Danchev Link to this post

    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

Back to Top