word-break:break-all for jqxgrid column headers

Question

var CreatedTABLETGrid = function (catid) {

var columns =
    [

        { text: 'Integrator/Online/Business Partner', datafield: 'StockRange', columntype: 'textbox', filtercondition: 'contains', width: '3%', cellclassname: 'stockcolumns' }
    ];

var gridData = generatedata();
var source =
{
    totalrecords: gridData.length,
    localData: gridData,
    datafields:
        [
    
            { name: 'StockRange', type: 'string' },
   
        ],
    datatype: "array"
};
var dataAdapter = new $.jqx.dataAdapter(source);    
$("#ProductPriceList").jqxGrid(
    {
       
        theme: "ui-redmond",
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        columnsresize: true,
        groupable: true,
        sortable: true,
        showfilterrow: true,
        filterable: true,
        autoshowfiltericon: true,
        selectionmode: 'multiplecellsextended',
        columns:columns
        
       
    });}

I have this ProductPriceList grid. I want to apply word-break to the header of the columns. I tried to apply custom CSS below :

#columntableProductPriceList {
    word-wrap: break-word !important;
    /* IE 5.5+ and CSS3 */
    white-space: normal !important;
    /*height: auto !important;*/
    vertical-align: text-top !important;
    padding-top: 2px !important;
    padding-bottom: 3px !important;
}

But this didn't work, especially, using height: auto !important; doesn't show any text in the header.

Thanks in advance.

Answer 1

jqxgrid don't support warpped text in column header. The only way to do so is to setup your own rules to detect some changes for example: $("#ProductPriceList").on('columnresized', function (event) { ... }. Then you need to calculate the new height for different <div>. Finally update the new height to <div> and refresh the jqxgrid. I personally don't suggest you to use it, because just a little inappropriate setup can cause bugs and other unexpected display issue. Unless you know what you're doing.

Example: https://jsfiddle.net/u8r5632g/ (You need to modify it to fit your case!)

html code:

<div id="ProductPriceList"></div>

css code:

#ProductPriceList .jqx-grid-column-header {
    height: auto !important;
    white-space: normal !important;
    word-break: break-all !important;
}

JavaScript + jQuery code:

$(document).ready(function () {
    function updateColumnTableHeight() {
        var headerHeight = $('#ProductPriceList .jqx-grid-column-header').outerHeight();
        
        $('#columntableProductPriceList').height(headerHeight);
        
        // Select all elements with the specified class
        var elements = document.querySelectorAll('.jqx-widget-header.jqx-widget-header-ui-redmond.jqx-grid-header.jqx-grid-header-ui-redmond');
        // Loop through the NodeList and set the height for each element
        elements.forEach(function(element) {
            element.style.height = headerHeight+36+'px'; //+36 because of filter search input field
        });
    }

    // Data fields and columns definitions
    var columns = [
        { text: 'Integrator/Online/Business Partner', datafield: 'StockRange', columntype: 'textbox', filtercondition: 'contains', width: '10%', cellclassname: 'stockcolumns' }
    ];

    var gridData = generatedata();

    var source = {
        totalrecords: gridData.length,
        localData: gridData,
        datafields: [
            { name: 'StockRange', type: 'string' }
        ],
        datatype: "array"
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    // Initialize jqxGrid with settings
    $("#ProductPriceList").jqxGrid({
        theme: "ui-redmond",
        width: '100%',
        //autoheight: true,
        
        autorowheight: true,
        autoheight: true,
        height: 500,
        
        source: dataAdapter,
        columnsresize: true,
        groupable: true,
        sortable: true,
        showfilterrow: true,
        filterable: true,
        autoshowfiltericon: true,
        selectionmode: 'multiplecellsextended',
        columns: columns
    });
    
    $("#ProductPriceList").on('columnresized', function (event) {
        updateColumnTableHeight();
        $(this).jqxGrid('refresh');
    });
    
    async function funcRetrieve() {
        // Wait for the grid to be fully loaded before calling updateColumnTableHeight()
        await new Promise(resolve => setTimeout(resolve, 400));
        updateColumnTableHeight();
        $(this).jqxGrid('refresh');
    };
    
    funcRetrieve();
});