Question

I am working on an attendance system that has the following tables:

Entry
+---------+-----------+
+ EntryID + EntryDate +
+---------+ ----------+


Hour
+---------+--------+---------+
+ EntryID + InHour + OutHour +
+---------+--------+---------+

With the following example data:

Entry
+---------+---------------------+
+ EntryID +     EntryDate       +
+---------+---------------------+
+   1     + 1/1/2010 8:00:00 AM +
+   2     + 1/1/2010 8:01:02 AM +
+---------+---------------------+

Hour
+---------+---------------------+-----------------------+
+ EntryID +        InHour       +        OutHour        +
+---------+---------------------+-----------------------+
+    1    + 1/1/2010 8:00:00 AM +  1/1/2010 1:00:00 PM  +
+    1    + 1/1/2010 2:04:00 PM +  1/1/2010 6:03:00 PM  +
+    2    + 1/1/2010 8:01:02 AM +  1/1/2010 1:02:00 PM  +
+---------+---------------------+-----------------------+

And I have the following gridview:

I need help with how I should approach a request my client has done today…

Currently, when calling this gridview the “Arrives At” and “Leaves At” fields are retrieved by querying the database and concatenating all the hours in a string then printing it out. However, my client now wants the ability to modify any of the hours in the “Leaves At” column. I don’t know how to approach this request at all, since the hours are grouped together in one cell. I’ve thought showing the hours in a textarea but there’s no way that the changes will be correctly applied on the database if I did this.

Any help will be greatly appreciated as I feel overwhelmed by this.

Thanks in advance,
Eton B.

Answer 1

One approach is to allow the updates in a more Ajaxy way, as Aristos discusses. This is typically considered a more user friendly approach and will certainly offer a nicer user experience, but requires familiarity with jQuery and JavaScript and the interactions between the client and the server are a little more complex from your perspective.

If you want to continue to use the Web control paradigm, consider making the “Arrives At” and “Leaves At” fields TemplateFields. In the ItemTemplate you could continue to display the text you concatenate at the database, but you’d put a GridView in the EditItemTemplate. This GridView could be bound to a data source control (also in the EditItemTemplate) and configured to support editing. If you are programmatically binding data (i.e., you are not using a data source control) then you’ll need to bind the data to the child GridView whenever the parent row becomes editable. This can be done declaratively using markup like so:

<asp:TemplateField ...>
    <EditItemTemplate>
        <asp:GridView runat="server" id="gvChild" DataSource='<%# SomeFunction() %>' ...>
           ...
        </asp:GridView>
    </EditItemTemplate>
</asp:TemplateField>

Here, SomeFunction would be a function in your code-behind class (typically) that returns the data to bind to the grid.

Alternatively, you could bind the data to the child GridView programmatically via the parent GridView’s RowDataBound event handler. Namely, you would check to see if you are dealing with the row being edited (that is, if e.Row.RowIndex = ParentGridViewID.EditIndex). If so, you could programmatically reference the child GridView using e.Row.FindControl("ChildGridViewID") and then set its DataSource property and call its DataBind method.

When a users clicks the Edit button for the parent grid the “Arrive At” and “Leave At” cells will show as a grid with Edit buttons of their own to modify the individual times. Alternatively, you could put the child editable GridView in the ItemTemplate if you wanted to let the users edit the “Arrive At” and “Leave At” times without requiring the user to first choose to edit the parent record.