jQuery Grid Plugin - jqGrid

Hi,

I have a "custom" cell which contains a text box and an image - the user will click on the image, which runs some javascript and populates the text box. The problem is that clicking the image doesn't run the script but instead triggers the onSelectRow event for the grid.

Code is below - hope someone can help?

Thanks.

    jQuery(document).ready(function() {
        og = jQuery("#jqGrid1").jqGrid({
            datatype: "local",
            colModel: [
                        { name: 'RowID', label: 'Row ID', index: 'RowID', width: 10, hidden: true, editable: false, sortable: true, sorttype: "int" },
                        { name: 'System', label: 'System', index: 'System', width: 160, editable: false, sortable: true, sorttype: "text" },
                        { name: 'AccessDate', label: 'Access Date', index: 'AccessDate', width: 140, editable: true, edittype: "custom", editoptions: { custom_element: AccessDateDatePicker, custom_value: AccessDateDatePickerValue }, sortable: false }
                      ],
            pager: '#pager1',
            rowNum: 10,
            rowList: [10, 20, 500],
            viewrecords: true,
            localReader: { id: "RowID" },
            loadonce: true,
            autowidth: true,
            cellsubmit: 'clientArray',
            editurl: 'clientArray',
            sortname: 'System',
            sortorder: 'asc',

            onSelectRow: function(id,tmp) {
                if (id && id != lastgridsel) {
                    jQuery('#jqGrid1').saveRow(lastgridsel, false, 'clientArray');
                    jQuery('#jqGrid1').editRow(id, true, null, null, 'clientArray');
                    lastgridsel = id;
                }
                else if (id == lastgridsel) {
                    jQuery('#jqGrid1').saveRow(lastgridsel, false, 'clientArray');
                    lastgridsel = null;
                }
            }
        });
    });

function AccessDateDatePicker(value, options) {
    var dv = document.createElement("div");
    var elDateTextBox = document.createElement("input");
    elDateTextBox.id = options.id + "_txtDatePicker";
    elDateTextBox.type = "text";
    elDateTextBox.value = value;
    elDateTextBox.style.width = "80px";
    dv.appendChild(elDateTextBox);

    var elImageButtonURL = document.createElement("a");
    elImageButtonURL.href = "javascript:doSomething('" + elDateTextBox.id + "','', '', '" + value + "'); event.cancelBubble = true;";

    var elImageButton = document.createElement("img");
    elImageButton.id = options.id + "imgDatePicker";
    elImageButton.src = "../images/calendar.gif";
    elImageButton.style.border = "0";
    elImageButton.className = "classDatePickerButton";
    elImageButtonURL.appendChild(elImageButton);

    dv.appendChild(elImageButtonURL);
    return dv;
}

function AccessDateDatePickerValue(elem) {
    return $(elem).children(":first").val();
}