[Solved] GridButtonColumn ImageButton ImageURL not showing in first row

[Cynthia]

I would like to have a column in my grid that shows a checkbox.  Some checked and some not.  When the user clicks on that checkbox I need to be able to call a client side function.  I am having some difficulty.  I have tried the following scenarios, with the following issues:

1.  GridCheckBoxColumn - is a read only column.  Can not cause the checkbox clicked event.

2.  GridTemplateColumn with a checkbox within - can not trigger the client side function call.

3.  GridButtonColumn as an image button. - The image in the first row is not loading properly.

The third option has been the most successful so far.

Here is the grid definition:

<telerik:RadGrid ID="grdUserMonitoredPS" runat="server"
AllowSorting="True"
AllowPaging="True"
AllowMultiRowSelection="True"
PageSize="15"
EnableViewState="False"
AutoGenerateColumns="False"
EnableLinqExpressions="False"
OnNeedDataSource="grdUserMonitoredPS_NeedDataSource"
GridLines="None"
OnItemDataBound="grdUserMonitoredPS_ItemDataBound">
<ClientSettings>
<ClientEvents OnCommand="grdUserMonitoredPS_OnCommand"
OnRowContextMenu="grdUserMonitoredPS_OnRowContextMenu"
OnRowMouseOver="grdUserMonitoredPS_OnRowMouseOver"/>
<Selecting AllowRowSelect="true"/>
<Scrolling AllowScroll="true" ScrollHeight="490" />
</ClientSettings>
<HeaderContextMenu>
<CollapseAnimation Duration="200" Type="OutQuint" />
</HeaderContextMenu>
<MasterTableView ClientDataKeyNames="CorporateCode, PrintSiteCode">
<Columns>
<telerik:GridButtonColumn
ButtonType="LinkButton"
HeaderText="Corporate"
DataTextField="CName"
UniqueName="ViewCorporate"
CommandName="ViewCorporate"/>
<telerik:GridButtonColumn
ButtonType="LinkButton"
HeaderText="Print Site"
DataTextField="PSName"
UniqueName="ViewPS"
CommandName="ViewPS"/>
<telerik:GridCheckBoxColumn
DataField="Monitored"
UniqueName="Monitored"
HeaderText="Monitored"/>
<telerik:GridClientSelectColumn
UniqueName="Selected"/>
<telerik:GridTemplateColumn
DataField="Monitored"
HeaderText="Monitored Template"
UniqueName="MonitoredTemplate">
<ItemTemplate>
<asp:CheckBox ID="chkMonitored" runat="server" onclick="alert('');"/>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridButtonColumn
HeaderText="Monitored Button"
DataTextField="Monitored"
CommandName="ChangeChecked"
ButtonType="ImageButton"
UniqueName="MonitoredButton">
</telerik:GridButtonColumn>
</Columns>
<PagerStyle Mode="NextPrevAndNumeric" />
</MasterTableView>

The column is the very last one.  On item data bound I try to populate the image as follows:

if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
{
UserMonitoredPSGrid currentRow = (UserMonitoredPSGrid)e.Item.DataItem;
//find the checkbox control
GridButtonColumn ibMonitored = (GridButtonColumn)grdUserMonitoredPS.Columns.FindByUniqueName("MonitoredButton");
//Check the checkbox
ibMonitored.ImageUrl = currentRow.Monitored ? "~/App_Images/Accept.png" : "~/App_Images/Ignore.png";
}

The first row has no image.  In fact when I look at it in break mode the src tag reads:  src=''.  Every row thereafter shows the image properly.  What have I done wrong or perhaps you have another suggestion.

Regards,
Cynthia

[Shinu]

Hi Cynthia,

I guess it is better to use a GridTemplateColumn with CheckBox in its ItemTemplate. Here is the code which worked for me.

ASPX:

<telerik:GridTemplateColumn  UniqueName="TemplCol" HeaderText="TemplCol"  >
                  <ItemTemplate>
                      <asp:CheckBox ID="CheckBox2" runat="server" onClick="Click();" />
                  </ItemTemplate>
                </telerik:GridTemplateColumn>

JS:

<script type="text/javascript" >

function Click()
 {
 alert('Hi')
 }
</script>

Shinu

[Cynthia]

I guess this is the solution then.  I'm not sure what I was doing wrong before, but this code seems to work well.  Thank you Shinu.

Regards,
Cynthia