Home/ Questions/Q 6234611
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:31:01+00:00

I’m trying to have a table with sortable rows – but also one of

  • 0

I’m trying to have a table with sortable rows – but also one of these rows needs a dropdown in it.

The issue is, when clicking the dropdown – the click event for the table header is firing causing things to happen that shouldn’t.

I found this :

http://www.velocityreviews.com/forums/t367867-table-row-background-onclick.html

But I thought – there must be a more elegant solution?

Any takers?

Sorry – I forgot examples!

    <th onclick="SortBy(event,'ctl00$mainContent$hiddenPBButton','descending','1')" class="tableDataHeader">
        <select id="groupby1"` onchange="performPostBackfromDrop(event,this,'ctl00$mainContent$hiddenPBButton');"><option value="Enquiry Type">Enquiry Type</option>
           <option value="Location">Location</option>
           <option value="Source">Source</option>
           <option selected="" value="User">User</option>
        </select>

    </th>

JS

As you can see – the JS is pretty generic – but I’ve included it for clarity

function SortBy(e, PBID,direction, field)
{
    performPostBackfromSort(PBID,direction,field);
}
function performPostBackfromSort(PBID, direction, field)
{
    __doPostBack(PBID, "sort"+"-"+direction+"-"+field);
} 

function performPostBackfromDrop(e,sender, PBID)
{
  var value = getDropDownSelectedValue(sender);
  __doPostBack(PBID, $j(sender).attr('id')+"-"+value);
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add an onclick event to the select and stop propagation (FireFox) or stop bubbling (IE).
    Here is the sample code I used.

    <html>
<head>
<title>test</title>
<script>
function divOnclick(event)
{
    alert("Div onclick");
}
function selectOnclick(event)
{
    stopPropagation(event);
}
function selectOnchange(event)
{
    alert("Select onchange");
}
function stopPropagation(ev)
{
    ev = ev||event;
    ev.stopPropagation? ev.stopPropagation() : ev.cancelBubble = true;
}
</script>
</head>
<body>
    <div id="test" style="width:200px;height:200px;" onclick="divOnclick(event)">
        <select id="groupby1"` onclick="selectOnclick(event);" onchange="selectOnchange(event);">
           <option value="Enquiry Type">Enquiry Type</option>
           <option value="Location">Location</option>
           <option value="Source">Source</option>
           <option selected="" value="User">User</option>
        </select>
    </div>
    </body>
</html>
    • 0