Complex editing on a gridview in C#

Question

Hi all,

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

Sadly, I think this is one of those requests where the current achitechture just does not make that kind of change easy. Event the simplest requests can reveal oversights made at design time.

If your client really wants these changes, it maybe time to inform them that its less than simple.

P.S. Seriously, I feel your pain.

Answer 2

This is a way that I do similar this.

<span id="HourID_445" onclick="EditMe(this);">17:42:51</span>

Now, when you click on this Hour, you open with jQuery an iframe dialog, and send the ID of the span you have click and contains the ID of the Hour you need to edit. So you have the ID, you have a simple .aspx dialog inside an iframe, you make the edit, you press OK, you save it, and then after the save you also update the span back to the table.

The key here is that you hide the ID of the Hour inside a span element, and you get it using Javascript.

If I am not so clear, please ask me for more informations.

With out jQuery

There is highslide: http://highslide.com/

See this example http://highslide.com/examples/iframe.html

You can use hislide, and you just make this simple line on every Time.

<a href="EditTime.aspx?TimeID=23" 
    onclick="return hs.htmlExpand(this,{objectType:'iframe'} )">23:00:00</a>

Answer 3

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.

Answer 4

You could do it using a Hierarchical Grid from telerik. The times would then be the detail part of the grid.