Question

I am having so much trouble with this. I have looked everywhere so I hope someone can either explain to me how to do this or show me. Here’s my problem:

I have a DataGrid filled with DataBound Items (ItemTemplate) which was created using ASP.Net.

My reason for the ItemTemplates over a regular DataBound field is to enable the Edit Mode of the DataGrid. In my ItemTemplates, I have labels to display the data and two option buttons (Edit/Delete). I’ve got the buttons working in the code behind (C#).

Edit places the DataGrid in Edit Mode. In the EditItemTemplates I’ve got DropDownLists, TextBoxes, and a Save button in place of the Edit button.

The Save button also works with the code I’ve written for it. All-in-all, the DataGrid works beautifully and displays everything neatly. However, there is one final job I want the Save button to do: I want it to check the TextBoxes and validate that the values entered match the criteria I have set (keep in mind that these are in EditItemTemplates).

I have Javascript already written that will check for validation. I want a modal window (that I have already set up) to display and I want the CSS of the TextBoxes in question to change.

I want to do this using Javascript but my problem is that I can’t check for the Save button to create the Click event and I can’t ‘locate’ the TextBoxes to validate them. Is there a way I can ‘find’ those elements while the DataGrid is in Edit Mode?

Here’s a small bit of the code used to create the DataGrid if it helps:

<asp:DataGrid ID="dgCamsizer" CssClass="data" runat="server" AutoGenerateColumns="False"
                GridLines="None" OnItemCommand="dgCamsizer_ItemCommand" ShowHeader="true">
                <Columns>
                    <asp:TemplateColumn HeaderStyle-CssClass="infoHeaderDG">
                        <HeaderTemplate>
                            Operator</HeaderTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Operator" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>'
                                runat="server" /></ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="EditOper" Width="40px" Text='<%# DataBinder.Eval(Container.DataItem, "Operator") %>'
                                runat="server"></asp:TextBox></EditItemTemplate>
                        <HeaderStyle CssClass="infoHeaderDG"></HeaderStyle>
                    </asp:TemplateColumn>

                    <asp:TemplateColumn HeaderStyle-CssClass="infoHeaderDG">
                        <ItemTemplate>
                            <asp:Button ID="Edit" Text="Edit" CommandName="Edit" runat="server" /></ItemTemplate>
                        <EditItemTemplate>
                            <asp:Button ID="Save" Text="Save" CommandName="Save" runat="server" /></EditItemTemplate>
                        <HeaderStyle CssClass="infoHeaderDG"></HeaderStyle>
                    </asp:TemplateColumn>
     </Columns>
</asp:DataGrid>

Perhaps I should re-phase my question: I managed to ‘find’ the TextBoxes thanks to Zetlen. I’ve also managed to get the values. Now… How do I use those values to test for validation?

Here is the code I used to get the values:

$("#<%=dgCamsizer.ClientID %> :text").each(function () {
                        alert($(this).val());
                    });

Answer 1

So I managed to solve my own problems and answer my own question. I was able to get the id’s of all of the TextBoxes and I even placed them into an array to be used for my validations. Here’s what I used to do all of this:

var i = 0;
var data = [];
$("#<%=dgCamsizer.ClientID %> :text").each(function () {
  data[i] = $(this).attr("id");
  i++;
 });