Image in Grid Header

[sushanth009Member]

Hello ,

I used the renderer method to display an image in the header of the Grid view. I have given the title attribute of the image but when I hover over it it does not display the default tooltip for some reason. Can you give me your input on this.

Thanks
Sushanth

[Peter StoevKeymaster]

Hi Sushanth,

Could you provide a sample of the reported behavior?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

Hey Peter,

This is my renderer function . I am displaying the two image in the header . After the grid is rendered I see the Images but do not see the titles on it.. This is my function.

var headercheckboxRenderer = function(value) {
    return '<div style="margin:2px 4px 2px 4px;position:absolute"  ><div style="margin-bottom:2px"><img id="pdfSelectAll"  src="../../Images/bill-image.png" title="Click to Merge selected Bill Images." alt="PDF" ></img></div><div><img id="chkboxSelectAll" class="image-unchecked"  src="../../Images/checkbox_off.png" title="Select All"/></div></div>';
}

[Peter StoevKeymaster]

Hi sushanth009,

When I hover the column’s header with that rendering function, the following title is displayed: “Click to Merge selected Bill Images.”. The container of the “Select All” image is displayed below and is not visible as there’s not enough space for it and it is not possible for users to move the mouse cursor over that element.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

I increased the size of the header column by overriding the default height of 20px.
So I modified

.jqx-grid-header-energyblue /* jqx Grid Header */
{
    height: 40px !important;
    
}

After doing this I am using the same renderer function but removed the second image from it so as to provide more space for the image..
The height of the header increased but I am still not able to see the title of the pdf image..

Thanks
Sushanth

[Peter StoevKeymaster]

Hi Sushanth,

The height of the header should not be increased with CSS. You should use the columnsheight property instead.

Sets the columns height.

Code example

Initialize a Grid with the columnsheight property specified.

$('#grid').jqxGrid({ columnsheight: 30}); 

In addition, could you tell me your browser, jQuery version and jQWidgets version?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

I will try that right away. i tried testing on chrome and firefox.
jQuery version – 1.7.2
jQWidgets version – v2.0.0 (2012-April-06)

Thanks
Sushanth

[sushanth009Member]

I tried using columnsheight property but it was of no use.. The header height was showing the default value.

[Peter StoevKeymaster]

Hi sushanth009,

Did you set it when you initialize the Grid?

var dataAdapter = new $.jqx.dataAdapter(source);
$("#jqxgrid").jqxGrid(
{
    source: dataAdapter,
    columnsheight: 50,
    columns: [
        { text: 'First Name', dataField: 'firstname', width: 100 },
        { text: 'Last Name', dataField: 'lastname', width: 100 },
        { text: 'Product', dataField: 'productname', width: 180 },
        { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
        { text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
        { text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
    ]
});

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

Setting the columnsheight seemed to help. I was trying to set that in the ‘bindingcomplete’ event. Maybe that is the reason the height was not changing.

Also regarding the Image tooltip , I was not able to see it because the the div with iconscontainer class was overlapping it..
When I made the display : none .. hola… I could see the tool tip.. Maybe it was because of the z-Index.

[Author]

Posts