Supports milliseconds?

5 posts, 0 answers
  1. Talis
    Talis avatar
    3 posts
    Member since:
    Sep 2017

    Posted 04 Apr 2018 Link to this post

    Hi,

    Small question.

    GanttView supports milliseconds in TimeLine.

    In my project i need add timeline (with task) from task in from 0,25 to 2 seconds.

  2. Hristo
    Admin
    Hristo avatar
    1521 posts

    Posted 04 Apr 2018 Link to this post

    Hello Talis,

    Thank you for writing.

    RadGanttView can support tasks in seconds and milliseconds as well. The OnePixelTime property of the graphical view determines how much time a single pixel represents and if you would be having tasks that short you will need to set it to a very small TimeSpan value. The smallest timeline range which we have at the moment is DayQuarterHours which will create timeline items at every 15 minutes. If you need to use a smaller range you can also consider creating a custom timeline view. A sample approach is demonstrated here: https://docs.telerik.com/devtools/winforms/ganttview/timeline/timeline-views.

    The code snippet below will create a timeline view spanning 10 seconds having several tasks and 1 pixel equalling 25 milliseconds: 
    public partial class GanttForm : Telerik.WinControls.UI.RadForm
    {
        public GanttForm()
        {
            InitializeComponent();
     
            this.radGanttView1.Ratio = 0.35f;
     
            DateTime start = new DateTime(2010, 10, 10, 9, 0, 0);
            DateTime end = start.AddSeconds(10);
     
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineStart = start;
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineEnd = end;
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineRange = Telerik.WinControls.UI.TimeRange.DayQuarterHours;
            this.radGanttView1.GanttViewElement.GraphicalViewElement.OnePixelTime = new TimeSpan(0, 0, 0, 0, 25);
     
            //setup data items
            GanttViewDataItem item1 = new GanttViewDataItem();
            item1.Start = start.AddSeconds(2);
            item1.End = start.AddSeconds(6);
            item1.Progress = 30m;
            item1.Title = "Summary task.1. title";
     
            GanttViewDataItem subitem11 = new GanttViewDataItem();
            subitem11.Start = start.AddSeconds(3);
            subitem11.End = start.AddSeconds(5);
            subitem11.Progress = 10m;
            subitem11.Title = "Sub-task.1.1 title";
     
            GanttViewDataItem subitem12 = new GanttViewDataItem();
            subitem12.Start = start.AddSeconds(4);
            subitem12.End = start.AddSeconds(4).AddMilliseconds(250);
            subitem12.Progress = 20m;
            subitem12.Title = "Sub-task.1.2 title";
     
            //add subitems
            item1.Items.Add(subitem11);
            item1.Items.Add(subitem12);
     
            this.radGanttView1.Items.Add(item1);
     
            GanttViewTextViewColumn titleColumn = new GanttViewTextViewColumn("Title");
            GanttViewTextViewColumn startColumn = new GanttViewTextViewColumn("Start");
            startColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
            GanttViewTextViewColumn endColumn = new GanttViewTextViewColumn("End");
            endColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
     
            this.radGanttView1.GanttViewElement.Columns.Add(titleColumn);
            this.radGanttView1.GanttViewElement.Columns.Add(startColumn);
            this.radGanttView1.GanttViewElement.Columns.Add(endColumn);
        }
    }

    I am also attaching a screenshot showing the result on my end.

    I hope this helps. Let me know if you need further assistance.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Talis
    Talis avatar
    3 posts
    Member since:
    Sep 2017

    Posted 05 Apr 2018 in reply to Hristo Link to this post

    Hi,

    Big thanks for response.

    Can you answer a couple more questions?

    1) Can in GanttView add many task (rhombus) in one line?
    2) I try create "Custom timeline" but in help page have not a good example for my task (Seconds and millisecond). May by you have another example with up timeline have seconds diapason and down with microseconds? 

    For example i ann file.

  4. Hristo
    Admin
    Hristo avatar
    1521 posts

    Posted 10 Apr 2018 Link to this post

    Hello Talis,

    Thank you for writing back.

    RadGanttView is designed to support a single item per row. You can handle the ItemPaint event which provides access to the Graphics object and paint custom objects in the graphical view: https://docs.telerik.com/devtools/winforms/ganttview/formatting/custom-painting

    Regarding the custom timeline, you can test the sample implementation below. Basically, the range is separated in seconds and a header element is created every 10 seconds: 
    public partial class GanttForm : Telerik.WinControls.UI.RadForm
    {
        public GanttForm()
        {
            InitializeComponent();
     
            this.radGanttView1.Ratio = 0.35f;
     
            DateTime start = new DateTime(2010, 10, 10, 10, 0, 0);
            DateTime end = start.AddSeconds(100);
     
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineRange = TimeRange.Custom;
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineBehavior = new SecondsGanttViewTimelineBehavior();
     
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineStart = start;
            this.radGanttView1.GanttViewElement.GraphicalViewElement.TimelineEnd = end;
             
     
            this.radGanttView1.GanttViewElement.GraphicalViewElement.OnePixelTime = new TimeSpan(0, 0, 0, 0, 25);
     
            //setup data items
            GanttViewDataItem item1 = new GanttViewDataItem();
            item1.Start = start.AddSeconds(2);
            item1.End = start.AddSeconds(6);
            item1.Progress = 30m;
            item1.Title = "Summary task.1. title";
     
            GanttViewDataItem subitem11 = new GanttViewDataItem();
            subitem11.Start = start.AddSeconds(3);
            subitem11.End = start.AddSeconds(5);
            subitem11.Progress = 10m;
            subitem11.Title = "Sub-task.1.1 title";
     
            GanttViewDataItem subitem12 = new GanttViewDataItem();
            subitem12.Start = start.AddSeconds(4);
            subitem12.End = start.AddSeconds(4).AddMilliseconds(250);
            subitem12.Progress = 20m;
            subitem12.Title = "Sub-task.1.2 title";
     
            //add subitems
            item1.Items.Add(subitem11);
            item1.Items.Add(subitem12);
     
            this.radGanttView1.Items.Add(item1);
     
            GanttViewTextViewColumn titleColumn = new GanttViewTextViewColumn("Title");
            GanttViewTextViewColumn startColumn = new GanttViewTextViewColumn("Start");
            startColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
            GanttViewTextViewColumn endColumn = new GanttViewTextViewColumn("End");
            endColumn.FormatString = "{0:MM/dd/yyy HH:mm:ss.fff}";
     
            this.radGanttView1.GanttViewElement.Columns.Add(titleColumn);
            this.radGanttView1.GanttViewElement.Columns.Add(startColumn);
            this.radGanttView1.GanttViewElement.Columns.Add(endColumn);
        }
    }
     
    public class SecondsGanttViewTimelineBehavior : BaseGanttViewTimelineBehavior
    {
        public override DateTime AdjustedTimelineStart
        {
            get
            {
                if (this.GraphicalViewElement.TimelineRange != TimeRange.Custom)
                {
                    return base.AdjustedTimelineStart;
                }
                 
                return this.GraphicalViewElement.TimelineStart;
            }
        }
     
        public override DateTime AdjustedTimelineEnd
        {
            get
            {
                if (this.GraphicalViewElement.TimelineRange != TimeRange.Custom)
                {
                    return base.AdjustedTimelineEnd;
                }
                 
                return this.GraphicalViewElement.TimelineEnd.AddSeconds(100);
            }
        }
     
        public override IList<GanttViewTimelineDataItem> BuildTimelineDataItems(TimeRange range)
        {
            if (range != TimeRange.Custom)
            {
                return base.BuildTimelineDataItems(range);
            }
     
            return this.BuildTimelineDataItemsForSecondsRange();
        }
     
        public IList<GanttViewTimelineDataItem> BuildTimelineDataItemsForSecondsRange()
        {
            List<GanttViewTimelineDataItem> result = new List<GanttViewTimelineDataItem>();
     
            DateTime adjustedStart = this.AdjustedTimelineStart;
            DateTime adjustedEnd = this.AdjustedTimelineEnd;
     
            if ((adjustedEnd - adjustedStart).Minutes > 10)
            {
                return result;
            }
     
            DateTime currentDate = adjustedStart;
            int currentSecondNumber = currentDate.Second;
            int newSecondNumber = currentSecondNumber;
            GanttViewTimelineDataItem item = new GanttViewTimelineDataItem(currentDate, currentDate.AddSeconds(10), this.GraphicalViewElement.TimelineRange, this.GraphicalViewElement.OnePixelTime);
            result.Add(item);
     
            while (currentDate < adjustedEnd)
            {
                item.End = currentDate.AddSeconds(10);
     
                currentDate = currentDate.AddSeconds(10);
                newSecondNumber = currentDate.Second;
     
                if (newSecondNumber != currentSecondNumber && newSecondNumber % 10 == 0 && currentDate <= adjustedEnd)
                {
                    currentSecondNumber = newSecondNumber;
                    item = new GanttViewTimelineDataItem(currentDate, currentDate, this.GraphicalViewElement.TimelineRange, this.GraphicalViewElement.OnePixelTime);
                    result.Add(item);
                }
            }
     
            return result;
        }
     
        public override GanttTimelineCellsInfo GetTimelineCellInfoForItem(GanttViewTimelineDataItem item, TimeRange range)
        {
            if (range != TimeRange.Custom)
            {
                return base.GetTimelineCellInfoForItem(item, range);
            }
     
            return this.GetTimelineCellInfoForDecadeRange(item);
        }
     
        public GanttTimelineCellsInfo GetTimelineCellInfoForDecadeRange(GanttViewTimelineDataItem item)
        {
            int seconds = 10;
     
            return new GanttTimelineCellsInfo(seconds);
        }
     
        public override string GetTimelineTopElementText(GanttViewTimelineDataItem item)
        {
            if (item.Range != TimeRange.Custom)
            {
                return base.GetTimelineTopElementText(item);
            }
     
            string format = "{0:hh:mm:ss}";
            return string.Format(System.Threading.Thread.CurrentThread.CurrentUICulture, format, item.Start, item.End);
        }
     
        public override string GetTimelineBottomElementText(GanttViewTimelineDataItem item, int index)
        {
            if (item.Range != TimeRange.Custom)
            {
                return base.GetTimelineBottomElementText(item, index);
            }
     
            string format = "{0} s";
            return string.Format(System.Threading.Thread.CurrentThread.CurrentUICulture, format, item.Start.Second + index);
        }
    }

    Please note that such an approach would only be suitable for a timeline view with a very short span, as elements will be created for each second. I am also attaching a short video showing the result on my end.

    I hope this helps. Let me know if you have other questions.

    Regards,
    Hristo
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Talis
    Talis avatar
    3 posts
    Member since:
    Sep 2017

    Posted 11 Apr 2018 in reply to Hristo Link to this post

    Hi Hristo,

    Thanks for you example. It is help me.

Back to Top