Assign a Click event handler to the Column header in a Grid

[sushanth009Member]

Hello Guys,

I have a Grid with 4 columns . I am inserting a check box image in the First column and assigning it a click handler to change the image checkbox_checked or checkbox_unchecked based on the class name.


{text: 'cc', datafield: 'Check', editable: false, width: colWidth * 0.4, cellsrenderer: columnRenderer, renderer: headerRenderer },


In the columnRenderer and headerRenderer functions I am returning the checkbox image.

The click event seems to be working for the columns .

But for the Header the click handler dosen’t seem to fire.

Can someone help me out with this .

[Peter StoevKeymaster]

Have you tried the ‘columnclick’ event?

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

Thanks for the reply. I have not tried the ‘columnclick’ event. Is it a default evnet or does it come with jqxGrid. I am anot sure how that is done . It will be helpful if you can provide me with an example.

What I have tried is set the column initially.

columns: [ // Column names

{text: '', datafield: 'Check', editable: false, width: colWidth * 0.4, cellsrenderer: columncheckboxRenderer, renderer: headercheckboxRenderer },
.......
]

Next is the cellsrenderr event and the renderer event


// Set the Column cell as a Checkbox Image
var columncheckboxRenderer = function(row, column, value) {
return ""
}

// Function to Set the Header text at run time
var headercheckboxRenderer = function(value) {
return ''
}


The Click Image function changes the image based on the class assigned to the Image.. It is working for the columns but not the Column Header..

// Click Event handler associated with the Column cell Checkbox Image
function clickImage(v) {
var image = $(v).find('img');
if ($(image).length) {
if ($(image).hasClass('image-unchecked')) {
$(image).attr({ 'src': '../../Images/checkbox_on.png', 'class': 'image-checked' }).removeClass('image-unchecked');
} else {
$(image).attr({ 'src': '../../Images/checkbox_off.png', 'class': 'image-unchecked' }).removeClass('image-checked');
}
}
}


It would be helpful if you can give me an input as where I am going wrong.. Thanks

[sushanth009Member]

The Html tag was displayed as a Inline image .. The code in the renderer is


// Set the Column cell as a Checkbox Image
var columncheckboxRenderer = function(row, column, value) {
return // ''
}

// Function to Set the Header text at run time
var headercheckboxRenderer = function(value) {
return // ''
}

The added // after the return for dispaly purpose.. It does not appear in my code..

[sushanth009Member]

Sorry for the multiple posts when I am trying to return the html string it seems to be rendering it directly to the browser. So I had to break up the html tag for the renderer function.

The Html tag was displayed as a Inline image .. The code in the renderer is

// Set the Column cell as a Checkbox Image
var columncheckboxRenderer = function(row, column, value) {
var dummyClass = ‘image-unchecked’
var html = ‘span style=”margin:4px;float:left”‘;
html = html + ‘img class=”‘ + dummyClass + ‘” src=”../../Images/checkbox_off.png” / /span’;
return html;
}

// Function to Set the Header text at run time
var dummyClass = ‘image-unchecked’
var html = ‘span style=”margin:4px;float:left”‘;
html = html + ‘ img class=”‘ + dummyClass + ‘” src=”../../Images/checkbox_off.png” / /span’;
return html;
}

Removed the tags to display the code..

[Peter StoevKeymaster]

Hi sushanth009,

The ‘columnclick’ is an event that the jqxGrid raises when a column header is clicked.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[sushanth009Member]

sure.. I tried the ‘columnclick’ event and it works fine.. Thanks for your response.

[Author]

Posts