Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
105
CellButton as an image
posted

I have a grid on a web page and want one of the cells to appear as a clickable button with a javascript onclick event handler on the client.  So I used the following code:

< ON SERVER >

Protected Sub grdRequests_InitializeLayout(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.LayoutEventArgs) Handles grdRequests.InitializeLayout
        grdRequests.Columns(2).Header.Fixed = True
        grdRequests.Columns(2).Type = Infragistics.WebUI.UltraWebGrid.ColumnType.Button
        grdRequests.Columns(2).CellButtonDisplay = Infragistics.WebUI.UltraWebGrid.CellButtonDisplay.Always
End Sub

Protected Sub grdRequests_InitializeRow(ByVal sender As Object, ByVal e As Infragistics.WebUI.UltraWebGrid.RowEventArgs) Handles grdRequests.InitializeRow
        e.Row.Cells(2).TargetURL = "../../SomePage.aspx?r=" + e.Row.Cells(0).Value.ToString()
        e.Row.Cells(2).Column.CellButtonStyle.Height = 15
        e.Row.Cells(2).Column.CellButtonStyle.Width = 60
        e.Row.Cells(2).Column.CellButtonStyle.BackgroundImage = "images/btngrd_remove2.gif"
    End Sub
 

< ON CLIENT >

<script id="igClientScript" type="text/javascript">
<!--
function grdRequests_ClickCellButtonHandler(gridName, cellId){
    var o = igtbl_getCellById(cellId);
    if (o)
    {
      var s = o.getTargetURL();
      DoSomething(s);
    }
}
// -->
</script>
 

Before this, I used the InitializeRow event to set the text of the required column to a url so that I can click it.  But I really need the javascript event handler to be called which I cannot seem to be able to make work.

 One important note; I need to do this customization in code as I do not know the exact table format at design time - some colums are added/deleted.

Thanks in advance for any help...

Ali M.

  • 28464
    posted

    Hello Ali,

    Thanks for writing. I believe in this case the best way to proceed is to use templated columns and custom HTML inside the CellTemplate to emulate the image.

    For example: 

    <igtbl:TemplatedColumn BaseColumnName="..." HeaderText="ImageColumn" Key="ImgUrl">
        <CellTemplate>
            <img src="<%# Eval("ImgUrl") %>" onclick="myJavascriptFunction()" />
        </CellTemplate>
    </igtbl:TemplatedColumn>