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 didn’t work, Especially,using height: auto !important; doesn’t show any text on the header.

Thanks in advance.