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" />
</Columns>
<Behaviors>
<ig:EditingCore>
<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>
</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'
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?
Hi Eric,
I am attaching a small sample, demonstrating how you can change an image inside a template field, using client-side code.
Let me know if you have any questions.
Hello Eric,
If you need any further assistance with the matter, please let me know.