Gantt is empty the first time

[Richard]

Hi,

I'm having a problem with the gantt control in my asp web app. To see the content of the gantt control is needed to click twice on it. 

<telerik:RadGantt runat="server" ID="GanttChart" CssClass="GanttChart" OnDataBound="GanttChart_DataBound"
    Skin="Silk" ListWidth="30%"
    Height="650px" Width="1038px" SelectedView="WeekView" AutoGenerateColumns="false" WorkWeekStart="Monday" WorkWeekEnd="Friday">
    <Columns>
        <telerik:GanttBoundColumn DataField="Title" HeaderText="Attivita" DataType="String" UniqueName="Title" Width="150px" AllowEdit="false"></telerik:GanttBoundColumn>
        <telerik:GanttBoundColumn DataField="Start" HeaderText="Inizio" DataType="DateTime" UniqueName="Start" DataFormatString="dd/MM/yy" Width="65px" AllowEdit="false" />
        <telerik:GanttBoundColumn DataField="End" HeaderText="Fine" DataType="DateTime" UniqueName="End" DataFormatString="dd/MM/yy" Width="65px" AllowEdit="false" />
        <telerik:GanttBoundColumn DataField="PercentComplete" HeaderText="Completamento" DataType="Number" UniqueName="PercentComplete" Width="110px" AllowEdit="false" />
    </Columns>
    <YearView UserSelectable="true" />

    <DataBindings>
        <TasksDataBindings IdField="ID" ParentIdField="ParentID" StartField="Start" SummaryField="Summary"
            EndField="End" TitleField="Title" PercentCompleteField="PercentComplete" OrderIdField="OrderID" />
        <DependenciesDataBindings TypeField="Type" IdField="ID" PredecessorIdField="PredecessorID"
            SuccessorIdField="SuccessorID" />
    </DataBindings>
</telerik:RadGantt>

protected override void OnPreRender(EventArgs e)
 {
            base.OnPreRender(e);

            //Day View
            GanttChart.DayView.DayHeaderDateFormat = "dddd dd/MM";
            GanttChart.DayView.SlotWidth = Unit.Parse("55px");
            GanttChart.DayView.HourSpan = 1;
            GanttChart.DayView.TimeHeaderDateFormat = "HH:mm";


            //Week View
            GanttChart.WeekView.DayHeaderDateFormat = "ddd dd/MM";
            GanttChart.WeekView.SlotWidth = Unit.Parse("85px");
            GanttChart.WeekView.WeekHeaderDateFormat = "ddd";

            //Month View
            GanttChart.MonthView.WeekHeaderDateFormat = "ddd dd";
            GanttChart.MonthView.SlotWidth = Unit.Parse("110px");
            GanttChart.MonthView.MonthHeaderDateFormat = "MMMM yy";

            //Year View
            GanttChart.YearView.MonthHeaderDateFormat = "MMM";
            GanttChart.YearView.SlotWidth = Unit.Parse("120px");
            GanttChart.YearView.MonthHeaderDateFormat = "Y";

            //Common properties working for all views
            GanttChart.ShowFullTime = true;
            GanttChart.ShowFullWeek = true;
            GanttChart.Culture = CultureInfo.CurrentCulture;
            GanttChart.WorkWeekStart = DayOfWeek.Monday;
            GanttChart.WorkWeekEnd = DayOfWeek.Friday;
            GanttChart.AllowSorting = false;
 }

public List<Task> GetGanttDataSource(int projectId)
        {
            List<Task> tasks = new List<Task>();

            var taskResult = GetDbResult(projectId);

            int hasNext = 0;

            foreach (var item in taskResult)
            {
                Task task = new Task();

                task.ID = item.Id;

                task.ParentID = item.ParentId;

                task.Start = item.Start;
                task.End = item.End;
                task.Title = item.Title;
                task.PercentComplete = item.PercentComplete;

                if (item.Summary)
                    item.Summary = taskResult.Any(x => x.ParentId == item.Id);

                task.Summary = item.Summary;
                task.Expanded = true;
                task.OrderID = item.OrderId;

                tasks.Add(task);
            }

            return tasks;

        }

The control's datasource is correctly loaded even the first time, so is not the way i use the data (or binding) but the page loading or something like this.

If somebody can help me...

Thanks...
 

[Hristo Valyavicharski]

Hi Richard,

How do you set the datasource? Please attach sample, so we can try to debug your code.

Thanks.

Regards,
Hristo Valyavicharski
Telerik

[Richard]

Hi Hristo,

Solved!  the problem was caused by an update panel. I've removed the Gantt Control from the update panel and works fine.

Thanks for the answer!

[Alex Kapitanovskyy]

I have the same problem. I use dynamic UserControl with RadGantt. By first load is gantt content empty. If i comment RadAjaxManager content is correct. I can't disable Ajax for my project. Hier is small example project (.NET 3.5, Telerik Version 2016.3.1027):

<body>
    <form id="frm_main" runat="server">
        <telerik:RadScriptManager ID="sm" EnableScriptGlobalization="True" AsyncPostBackTimeout="800"
            OutputCompression="AutoDetect" EnableScriptCombine="true" ScriptMode="Auto" runat="server">
        </telerik:RadScriptManager>
        <telerik:RadAjaxManager ID="ram" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="Button2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="div_mcnt" />
                    </UpdatedControls>
                </telerik:AjaxSetting>

            </AjaxSettings>
        </telerik:RadAjaxManager>

        <asp:Button ID="Button2" runat="server" Text="Button" OnClick="Button2_Click" />

        <div id="div_mcnt" runat="server">
            <asp:Panel ID="plh" runat="server"></asp:Panel>
        </div>

    </form>
</body>
</html>

protected void Button2_Click(object sender, EventArgs e)
        {
            plh.Controls.Clear();
            UserControl ctl = (UserControl)LoadControl("TestGantt.ascx");
            ctl.ID = "uc1";

            plh.Controls.Add(ctl);
        }

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TestGantt.ascx.cs" Inherits="WebApplication1.TestGantt" %>
<telerik:RadGantt ID="RadGantt1"
    runat="server"
    ReadOnly="true"
    SelectedView="YearView"
    ShowFullTime="false">
    <DayView UserSelectable="false" />
    <YearView UserSelectable="true" />
    <DataBindings>
        <TasksDataBindings IdField="PL_Nr" ParentIdField="PL_Nr_parent" StartField="PL_Start"
            OrderIdField="SortOrder" SummaryField="Summary" ExpandedField="Expanded" EndField="PL_End" TitleField="PL_Descriptiion" />
        <DependenciesDataBindings IdField="ID" PredecessorIdField="PredecessorID"
            SuccessorIdField="SuccessorID" TypeField="Type" />
    </DataBindings>
</telerik:RadGantt>

public partial class TestGantt : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            FillGant();
        }

        protected class LpcGantTask : Task
        {
            public int? PL_Nr_Parent { get; set; }
            public int PL_Nr { get; set; }
            public DateTime PL_Start { get; set; }
            public DateTime PL_End { get; set; }
            public string PL_Descriptiion { get; set; }
            public int Level { get; set; }
            public int SortOrder { get; set; }

        }


        private void FillGant()
        {
            RadGantt1.DataSource = LpcTasks;
            RadGantt1.ShowTooltip = false;
            List<Dependency> emptyDependencies = new List<Dependency>();
            Dependency dep = new Dependency();
            dep.ID = 0;
            dep.PredecessorID = 0;
            dep.SuccessorID = 0;
            dep.Type = DependencyType.FinishStart;
            emptyDependencies.Add(dep);
            RadGantt1.DependenciesDataSource = emptyDependencies;
            RadGantt1.DataBind();

        }



        protected List<LpcGantTask> LpcTasks
        {
            get
            {
                List<LpcGantTask> tasks = new List<LpcGantTask>();
                for (int i = 0; i < 10; i++)
                {
                    LpcGantTask task = new LpcGantTask();
                    task.Level = 1;
                    task.PL_Nr = i;
                    task.PL_Nr_Parent = null;
                    task.PL_Descriptiion = "Task " + i.ToString();
                    task.PL_Start = DateTime.Now.AddDays(i);
                    task.PL_End = DateTime.Now.AddDays(i + 1);
                    task.Summary = false;
                    task.Expanded = true;
                    task.OrderID = i;
                    tasks.Add(task);
                }
                return tasks;
            }
        }
    }

[Nencho]

Hello Alex,

Indeed, the RadGantt has a bug in such scenario, when it is loaded trough a UserControl and with an AjaxRequest. The bug could be observed and voted in our public portal:

https://feedback.telerik.com/Project/108/Feedback/Details/183208-radgantt-not-properly-loaded-when-placed-in-a-usercontrol-and-loaded-on-the-page

As a workaround, you can call the resize method on its widget, using the pageLoad event:

<script type="text/javascript">
    function pageLoad() {
        setTimeout(function () {
            $find("uc1_RadGantt1")._widget.resize();
        }, 100)
    }
</script>

Regards,
Nencho
Telerik by Progress

[Alex Kapitanovskyy]

Hello Nencho

Thank you.

I tried their solution (using resize), but in my exapmle the Gantt still remains empty. Could you propose another idea to solve my problem?

Regards,

 

[Nencho]

Hello Alex,

Could you try increasing the timeout value and test the behavior again? If the issue still persist, please attach a sample runnable example to the support ticket that you have submitted, in order to inspect your exact implementation and determine why the workaround is not applicable.

Regards,
Nencho
Telerik by Progress