Avoid selection onClick

Question

I would like to prevent onClick selection on an element of jqGrid.

How is it possible??

Here is an example for you

Go to this link http://www.ok-soft-gmbh.com/jqGrid/UnobtrusiveLinksNew.htm

In this page if I click on Michael Schumacher or Lukas Podolski related row become selected with yellow color. On the other hand if I click on Formula 1 or Football related rows are not selecting. I would like to get this behaviour upon an element in jqGrid.

UPDATE: Here is my code

$(document).ready(function() 
    {

$(function()
    { 
      $("#list").jqGrid
      ({
            url:'example.php',
            datatype: 'xml',
            mtype: 'GET',
            colNames:['RABR member in Circle','Date Sent','Status','Action'],
            colModel :
            [ 

              {name:'tax', index:'tax', width:85, align:'left',sortable:false,formatter:format_row},
              {name:'invdate', index:'invdate', width:60, align:'center',sortable:false,formatter:format_date}, 
              {name:'amount', index:'amount', width:35, align:'center', sortable:false,formatter:format_status},
              {name:'amount', index:'amount', width:55, align:'left',title:false, sortable:false,formatter:format_rate_me,beforeSelectRow: function(rowid, e) { return false; },
}, 
            ],
            pager: '#pager',
            rowNum:10,
            rowList:[10,20,30],
            viewrecords: true,
            multiselect: true,
            altclass:'myAltRowClass',
            altRows:true,
            width:624,
            height:'auto' }).navGrid('#pager',{edit:false,add:false,del:false}); 
        }) ;    


        function format_row(cellValue, options, rowObject) 
            {
                var split_result = cellValue.split("+");
                var show_result= "<img src='images1/" + split_result[0] + "'/><b id='pro_name'>"+ split_result[1] + "</b></br><b id='e_add'>" + split_result[2]+"</b>";
                return show_result;
            }


        function format_date(cellValue, options, rowObject) 
            {
                var date = "<div class='date'>" + cellValue + "</div>";
                return date;
            }


        function format_status(cellValue, options, rowObject) 
            {
                var status_image = "<img src='images/" + cellValue + ".jpg' />";
                return status_image;
            }   


        function format_rate_me(cellValue, options, rowObject) 
            {   
                var optoins = "<div class='rate_me_text'>" + cellValue + "<div class='star_div'></div><div class='down_arrow'></div>   <div class='options'><ul><li class='add_me'><a href='#'>Add as a friend</a></li><li class='view_circle'><a href='#'>View Circle Members(23)</a></li><li class='send_msg'><a href='#'>Send messages</a></li><li class='add_to_watch'><a href='#'>Add to watch list</a></li><li class='gifting'><a href='#'>Give a gift</a></li><li class='remove'><a href='#'>Remove from Circle</a></li><li class='block'><a href='#'>Block</a></li><li class='report'><a href='#'>Report abuse</a></li></ul></div></div>";              
                return optoins;
            }

    });

I would like to get avoid selection on click upon .down_arrow class.

thanks for reply

UPDATE

"@Oleg"

Finally I done it .

here is the code

altclass:'myAltRowClass',
        altRows:true,
        beforeSelectRow: 
        function(rowid, e) 
        { 
            var iCol = $.jgrid.getCellIndex(e.target);

            if (iCol >=4) 
            {
                return false;
            }
            else
            {
                return true;
            }
        },
        width:624,

Thanks for your reply

Answer 1

To prevent selection of the row you can use beforeSelectRow event handler. If the event handler returns false the row selection will be prevented. You can examine e.target which will be the <td> element where the user clicked or its child element (like <a> element inside of <td>).