Clickable background image for grid LinkButton control

[Richard]

Hi,

I have a grid which contains LinkButton columns for clickable text.  I also have a background image defined in a CSS class asociated with the LinkButton controls. That is working fine, and a sample of the markup is shown below.

What I would like is to have the background image be a clickable as well as the text.  How could that be achieved?

                <telerik:GridButtonColumn
                    ButtonType="LinkButton"
                    UniqueName="DoAssembly"
                    CommandName="DoAssembly"
                    DataTextField="DoAssembly"
                    DataTextFormatString="{0}"
                    DataType="System.String"
                    HeaderText="Assembly"
                    HeaderStyle-HorizontalAlign="Center"
                    ItemStyle-CssClass="BLname"
                    ItemStyle-HorizontalAlign="Center"
                    ItemStyle-Wrap="true"
                    ShowSortIcon="false" />

[Eyup]

Hi Richard,

You can use the following approach to achieve the desired behavior:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = e.Item as GridDataItem;
        GridTableCell cell = dataItem["DoAssembly"] as GridTableCell;
        cell.Attributes.Add("onclick", "clickLinkButton(this)");
    }
}

JavaScript:

function clickLinkButton(cell) {
    cell.firstElementChild.click();
}

That should do the trick. Please give it a try and let me know if it works for you.

Alternatively, you can use GridTemplateColumn with a wrapper div and a LinkButton in its ItemTemplate.

Greetings,
Eyup
the Telerik team

[Richard]

Thanks for the response.  I implemented the code you suggested and the background image became clickable.  But the JS logic blows up with the following error:

Microsoft JScript runtime error: Unable to get value of the property 'click': object is null or undefined

After poking around a little I discovered that "cell.firstElementChild" is undefined - you have to use "cell.firstChild.click();"  The code now works correctly.