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
310
Changing an <img> icon on mouse click
posted

I have the following SqlDataSource and WebDataGrid.

 

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:PetroLandConnectionString %>"

SelectCommand="SELECT * FROM [Counties] WHERE ([StateID] = @StateID)" >

  <SelectParameters>

    <asp:ControlParameter ControlID="DDLStates" DefaultValue="0" Name="StateID"

    PropertyName="SelectedValue" Type="Int32" />

  </SelectParameters>

</asp:SqlDataSource>

<ig:WebDataGrid ID="WebDataGrid1" runat="server" DataSourceID="SqlDataSource1" Height="750" Width="800" AutoGenerateColumns="False">

  <Columns>

    <ig:BoundDataField DataFieldName="ID" Key="ID" Hidden="true">

      <Header Text="ID"  />

    </ig:BoundDataField>

    <ig:TemplateDataField Key="Options" Width="60px">

      <Header Text="Options"  />

    <ItemTemplate>

      <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        <ContentTemplate>

                     <%#EnableDisable(Eval("ID"), Eval("StateID"), DetermineActiveInactive(Eval("ID")))%>

          <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="./icons/pen_24.png" CommandName='edit'

          CommandArgument='<%# Eval("Id")%>' ToolTip="Edit" /> 

        </ContentTemplate>

      </asp:UpdatePanel>

    </ItemTemplate>

  </ig:TemplateDataField>

  <ig:BoundDataField DataFieldName="Name" Key="Name">

    <Header Text="Name" />

  </ig:BoundDataField>

 </Columns>

 <Behaviors>

  <ig:EditingCore>

   <Behaviors>

    <ig:CellEditing>

    </ig:CellEditing>

   </Behaviors>

  </ig:EditingCore>

  <ig:RowSelectors>

  </ig:RowSelectors>

  <ig:VirtualScrolling>

  </ig:VirtualScrolling>

  <ig:Filtering>

  </ig:Filtering>

  <ig:Sorting>

  </ig:Sorting>

  <ig:ColumnResizing>

  </ig:ColumnResizing>

  <ig:ColumnMoving>

  </ig:ColumnMoving>

  <ig:Paging PageSize="10">

  </ig:Paging>

 </Behaviors>

</ig:WebDataGrid>

 

And here is the code for "EnableDisable()":

 

Function EnableDisable(ByVal eID As Integer, ByVal sID As Integer, ByVal EnabledDisabled As Boolean) As String

If EnabledDisabled = True Then

  Return "<a href='EProspects.aspx?t=" & STR.EncryptStringHex(tProjectID, 12) & "'><img src='/icons/ok_24.png'

          onclick='EnableDisableCounty()'></a>"

Else

  Return "<a href='EProspects.aspx?t=" & STR.EncryptStringHex(tProjectID, 12) & "'><img src='/icons/NOTok_24.png'

          onclick='EnableDisableCounty()'></a>" 

End If

End Function

 

When a user clicks on the <img> (which is either a check mark or an X depending on some condition) I want the check mark to change to an X or vice versa without performing a postback.  I need the user to stay on the page, but still be able to change the check mark to an X or vice versa.  What I have shown above was not designed with this functionality in mind, so I am trying to change it to achieve this functionality.  How can I do this in the WebDataGrid without doing a postback or leaving the page?