jQuery UI Widgets Forums Grid Assign a Click event handler to the Column header in a Grid

This topic contains 6 replies, has 2 voices, and was last updated by  sushanth009 11 years, 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • sushanth009
    Member

    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 Stoev
    Keymaster

    Have you tried the ‘columnclick’ event?

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com


    sushanth009
    Member

    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

    • This reply was modified 11 years, 12 months ago by  sushanth009.
    • This reply was modified 11 years, 12 months ago by  sushanth009.
    • This reply was modified 11 years, 12 months ago by  sushanth009.
    • This reply was modified 11 years, 12 months ago by  sushanth009.

    sushanth009
    Member

    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..

    • This reply was modified 11 years, 12 months ago by  sushanth009. Reason: Format the Html elemnents
    • This reply was modified 11 years, 12 months ago by  sushanth009. Reason: Format the Html elements

    sushanth009
    Member

    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..

    • This reply was modified 11 years, 12 months ago by  sushanth009. Reason: Removed the tags to display the code

    Peter Stoev
    Keymaster

    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


    sushanth009
    Member

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.