How to achieve below requirement by using Dev Express controls

Question

Note: I only need to use Dev Express controls and I am using windows forms with dotnet framework 3.5

Below are my requirements

1. I need to display multiple check-in check-out entries with time as displayed in the screen shot and also reason specified below each check-in checkout entry.
2. I need to display a edit icon for each row when user clicks on the edit icon a time picker need to populate and user can modify the time and the list box time need to modify
3. I need to display a delete icon at the last entry when user deletes the last entry the delete icon should display to the above entry.

I have CheckinCheckOut button which need to add the data to list box in the same format which i have displayed the image

Which control should i use to complete all the above requirements? If it is list box control for the above requirement can you please provide me a sample which satisfies all the conditions of the requirement.

Please provide a sample with the below requirement

Answer 1

Looks like this could be done with the GridControl. Checkin/Checkout statuses can be a column, the check-in/check-out time would be a second column and the delete/edit icon can be a third, unbound column. The reason (initial check-in, meal break, check-out etc...) could be done by binding the GridView's Row Preview Section to another field in the data source.

For instance, a simple data source such as:

public class EmployeeCheckIn
{
   public enum CheckInTypes { CheckOut, CheckIn };

   public CheckInTypes CheckInType { get; set; }
   public DateTime CheckInTime { get; set; }
   public string CheckInReason { get; set; }    
}

Your GridControl could be bound to a List instance, having column 1 bound to CheckInType, column 2 bound to CheckInTime and the preview row bound to CheckInReason.

The unbound column with the edit button can make use a RepositoryItemButtonEdit control in which the text box is hidden, the ButtonKind property is set to Glyph and an "edit" image is supplied to draw the icon. Handle its ButtonClick event to invoke your edit mode.