Editing Grid View row with HTML Input control

Viewed 71

I use a Grid view for show and edit data. A column represent birthday. As I need date picker for this field, I have used a HTML input control. The date picker is working charm but problem is I don't know how to save edited birthday field after editing. What should I write instead of this:

<ItemTemplate><input type="text" id="sabzlearn" class="TextBox" name="SimpleUserBirthdayTxt"/>
            </ItemTemplate>

.Here is Grid view:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" 
    BackColor="#DEBA84" BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3" CellSpacing="2" OnRowEditing="GridView1_RowEditing">
    <Columns>
        <asp:CommandField ButtonType="Image" CancelText="Cancel" EditImageUrl="~/Images/editbutton.png" ShowEditButton="True" UpdateText="Change" ControlStyle-CssClass="GridViewSelect" />
        <asp:BoundField DataField="FirstName" HeaderText="Name" SortExpression="FirstName" ControlStyle-CssClass="GridViewTextBox" />
        <asp:BoundField DataField="LastName" HeaderText="SurName" SortExpression="LastName" ControlStyle-CssClass="GridViewTextBox" />
       
        <asp:TemplateField HeaderText="Gender" SortExpression="Gender">
            <EditItemTemplate>
                <asp:DropDownList ID="DropDownList1" runat="server" SelectedValue='<%# Bind("Gender") %>' Width="50px">
                    <asp:ListItem>Male</asp:ListItem>
                    <asp:ListItem>Female</asp:ListItem>
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server" Text='<%# Bind("Gender") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Birthday">
            <EditItemTemplate>
                <input type="text" id="sabzlearn" class="TextBox" name="SimpleUserBirthdayTxt" value="<%#Eval("Birthday") %>"/>
                <script type="text/javascript" src="../assets/js/jquery.js"></script>
                <script type="text/javascript" src="../assets/js/kamadatepicker.min.js"></script>
                <script type="text/javascript">
                    let options = {
                        placeholder: "DateHolder",
                        twodigit: false,
                        closeAfterSelect: true,
                        nextButtonIcon: "./assets/image/timeir_next.png",
                        previousButtonIcon: "./assets/image/timeir_prev.png",
                        buttonsColor: "red",
                        forceFarsiDigits: true,
                        markToday: true,
                        markHolidays: true,
                        highlightSelectedDay: true,
                        sync: true,
                        gotoToday: true,
                    }
                    kamaDatepicker("sabzlearn", options);                        
                </script>   
            </EditItemTemplate>
            <ItemTemplate>
                <input type="text" id="sabzlearn" class="TextBox" name="SimpleUserBirthdayTxt"/>
            </ItemTemplate>

        </asp:TemplateField>
        <asp:BoundField DataField="Password" HeaderText="Password" SortExpression="Password" ControlStyle-CssClass="GridViewTextBox"/>
    </Columns>        
    <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
    <HeaderStyle BackColor="#6699ff" Font-Bold="True" ForeColor="Black" />
    <PagerStyle ForeColor="#8C4510" HorizontalAlign="Center" />
    <RowStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
    <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
    <SortedAscendingCellStyle BackColor="#FFF1D4" />
    <SortedAscendingHeaderStyle BackColor="#B95C30" />
    <SortedDescendingCellStyle BackColor="#F1E5CE" />
    <SortedDescendingHeaderStyle BackColor="#93451F" />
</asp:GridView>
0 Answers
Related