Custom Task Edit Window

3 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1591 posts
    Member since:
    Oct 2004

    Posted 12 Aug 2016 Link to this post

     

    Requirements

    Telerik Product and Version

    R2 2019

    Supported Browsers and Platforms

    the browsers supported by the UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadGantt, RadWindow, .NET 3.5/4.0/4.5  C#

    PROJECT DESCRIPTION 
    This example demonstrates how using RadWindow a Custom Task Edit Window can be implemented, which will replace the default one when editing the Gantt's tasks.

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            var $ = $ || $telerik.$;
    
            function getTaskByUid(uid) {
                var gantt =  $find("<%= RadGantt1.ClientID %>");
                var tasks = gantt.get_allTasks();
    
                for (var i = 0; i < tasks.length; i++) {
                    if (tasks[i]._uid === uid) {
                        return tasks[i];
                        break;
                    }
                }
    
                return null;
            }
    
            function getTaskById(id) {
                var gantt =  $find("<%= RadGantt1.ClientID %>");
                var tasks = gantt.get_allTasks();
    
                for (var i = 0; i < tasks.length; i++) {
                    if (tasks[i].get_id() === id) {
                        return tasks[i];
                        break;
                    }
                }
    
                return null;
            }
    
            function pageLoadHandler() {
                var gantt = $find("<%= RadGantt1.ClientID %>");
                $(gantt.get_element()).find(".rgtTimelineContent").on("dblclick", ".rgtTask", function (e) {
                    e.stopPropagation();
                    var $element = $(e.target);
    
                    if (!$element.is(".rgtTask")) {
                        $element = $element.parents(".rgtTask").first();
                    }
    
                    var task = getTaskByUid($element.attr("data-uid"));
                    showDialog(task);
                });
                // Sys.Application.remove_load(pageLoadHandler);  
            }
            Sys.Application.add_load(pageLoadHandler);
    
            function showDialog(task) {
                var wnd = $find("<%= RadWindow2.ClientID%>");
                wnd.show();
    
                $get("<%=UidHiddenField.ClientID %>").value = task._uid;
    
                $get("<%=TextBox1.ClientID %>").value = task.get_id();
                $get("<%=TextBox2.ClientID %>").value = task.get_title();
    
                $find("<%=RadDatePicker1.DateInput.ClientID %>").set_value(task.get_start());
                $find("<%=RadDatePicker2.DateInput.ClientID %>").set_value(task.get_end());
    
                $get("<%=TextBox3.ClientID %>").value = task.get_percentComplete();
            }
    
            function OnClientSaveClicking(sender, args) {
                var isValid = Page_ClientValidate();
                if (!isValid) {
                    args.set_cancel(true);
                }
                else {
                    var uidValue = $get("<%=UidHiddenField.ClientID %>").value;
    
                    var titleFieldValue = $get("<%=TextBox2.ClientID %>").value;
                    var startDatePicker = $find("<%=RadDatePicker1.DateInput.ClientID %>");
                    var endDatePicker = $find("<%=RadDatePicker2.DateInput.ClientID %>");
    
                    var startFieldValue = startDatePicker.get_value();
                    var endFieldValue = endDatePicker.get_value();
    
                    var percentCompleteFieldValue = $get("<%=TextBox3.ClientID %>").value;
    
                    var newStartDate = new Date(Date.parse(startFieldValue, startDatePicker.get_dateFormat()));
                    var newEndDate = new Date(Date.parse(endFieldValue, endDatePicker.get_dateFormat()));
    
                    var newPercentComplete = parseFloat(percentCompleteFieldValue.replace(",", "."));
    
                    var task = getTaskByUid(uidValue);
                    task.set_title(titleFieldValue);
                    task.set_start(newStartDate);
                    task.set_end(newEndDate);
                    task.set_percentComplete(newPercentComplete);
                    $find("<%= RadWindow2.ClientID%>").close();
                }
            }
    
            function validateStartEndDate(sender, args) {
                var RadDatePicker1 = $find("<%= RadDatePicker1.ClientID%>")
                var RadDatePicker2 = $find("<%= RadDatePicker2.ClientID%>")
                var Date1 = new Date(RadDatePicker1.get_selectedDate());
                var Date2 = new Date(RadDatePicker2.get_selectedDate());
    
                if ((Date2 - Date1) < 0) {
                    args.IsValid = false;
                }
            }
    
            function OnClientCancelClicked(sender) {
                $find("<%= RadWindow2.ClientID%>").close();
            }
    
            function OnClientDeleteClicked(sender) {
                var uidValue = $get("<%=UidHiddenField.ClientID %>").value;
                var task = getTaskByUid(uidValue);
                var parentTaskId = task.get_parentId();
    
                if (parentTaskId) {
                    var parentTask = getTaskById(parentTaskId);
                    parentTask.get_tasks().remove(task);
                }
                else {
                    var gantt = $find("<%= RadGantt1.ClientID %>");
                    gantt.get_tasks().remove(task);
                }
    
                $find("<%= RadWindow2.ClientID%>").close();
            }
        </script>
    </telerik:RadScriptBlock>

     

     

    <telerik:RadGantt
        runat="server"
        RenderMode="Lightweight"
        SnapToGrid="false"
        ID="RadGantt1"
        AutoGenerateColumns="true"
        Height="500"
        SelectedView="MonthView"
        AllowColumnResize="true"
        OnTaskInsert="RadGantt1_TaskInsert" />

     

    <telerik:RadWindow
        ID="RadWindow2"
        RenderMode="Lightweight"
        EnableShadow="true"
        Behaviors="Close, Move, Resize,Maximize"
        RestrictionZoneID="RestrictionZone"
        Title="Edit Task"
        runat="server"
        Width="360px"
        Height="440px"
        VisibleStatusbar="False">
        <ContentTemplate>
            <br />
            <%--ID--%>
            <div style="text-align: right; float: left">
                <asp:Label ID="Label1" Text="ID" runat="server" Width="85px" />
            </div>
            <div style="float: left; padding-left: 5px;">
                <asp:TextBox ID="TextBox1" runat="server" Width="220px" ReadOnly="True">
                </asp:TextBox>
            </div>
    
            <%--Divider Bar--%>
            <div style="border-bottom: thin solid #62676b; width: 325px; float: left; clear: left; padding-top: 12px">
            </div>
    
            <%--Title--%>
            <div style="text-align: right; float: left; padding-top: 12px;">
                <asp:Label ID="Label2" Text="Title" runat="server" Width="85px" />
            </div>
            <div style="float: left; padding-left: 5px; padding-top: 12px;">
                <asp:TextBox ID="TextBox2" runat="server" Width="220px">
                </asp:TextBox>
            </div>
    
            <%--Start--%>
            <div style="text-align: right; float: left; padding-top: 8px;">
                <asp:Label ID="Label3" Text="Start" runat="server" Width="85px" />
            </div>
            <div style="float: left; padding-left: 5px; padding-top: 8px;">
                <telerik:RadDateTimePicker ID="RadDatePicker1" Width="225px" runat="server">
                    <DateInput DateFormat="yyyy/M/d HH:mm" DisplayDateFormat="yyyy/M/d HH:mm"></DateInput>
                </telerik:RadDateTimePicker>
            </div>
            <div style="text-align: center; padding-left: 5px; padding-top: 8px;">
                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1" ControlToValidate="RadDatePicker1"
                    ErrorMessage="Start date is required!" ForeColor="Red"></asp:RequiredFieldValidator>
            </div>
    
    
            <%--End--%>
            <div style="text-align: right; float: left; padding-top: 8px;">
                <asp:Label ID="Label4" Text="End" runat="server" Width="85px" />
            </div>
            <div style="float: left; padding-left: 5px; padding-top: 8px;">
                <telerik:RadDateTimePicker ID="RadDatePicker2" Width="225px" runat="server">
                    <DateInput DateFormat="yyyy/M/d HH:mm" DisplayDateFormat="yyyy/M/d HH:mm"></DateInput>
                </telerik:RadDateTimePicker>
            </div>
            <div style="text-align: center; padding-left: 5px; padding-top: 8px;">
                <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator2" ControlToValidate="RadDatePicker2"
                    ErrorMessage="End date is required!" ForeColor="Red"></asp:RequiredFieldValidator>
            </div>
            <div style="text-align: right; float: left; padding-top: 8px;">
                <span>
                    <asp:CustomValidator ID="dateCompareValidator" EnableClientScript="true" runat="server"
                        ControlToValidate="RadDatePicker2" ClientValidationFunction="validateStartEndDate"
                        ErrorMessage="End date should be after or equal to the start date!" ForeColor="Red">
                    </asp:CustomValidator>
                </span>
            </div>
    
            <%--Complete--%>
            <div style="text-align: right; float: left; padding-top: 8px;">
                <asp:Label ID="Label5" Text="Complete" runat="server" Width="85px" />
            </div>
            <div style="float: left; padding-left: 5px; padding-top: 8px;">
                <telerik:RadNumericTextBox runat="server" ID="TextBox3" Width="225" ShowSpinButtons="true"
                    IncrementSettings-Step="0.01" Type="Number" MinValue="0" MaxValue="1" NumberFormat-DecimalSeparato=",">
                </telerik:RadNumericTextBox>
            </div>
    
            <%--Divider Bar--%>
            <div style="border-bottom: thin solid #62676b; width: 325px; float: left; clear: left; padding-top: 12px">
            </div>
    
            <%--Save Button--%>
            <div style="float: left; padding-left: 25px; padding-top: 12px;">
                <telerik:RadButton ID="RadButton1" runat="server" Text="Save" AutoPostBack="false" OnClientClicking="OnClientSaveClicking"></telerik:RadButton>
            </div>
    
            <%--Cancel Button--%>
            <div style="float: left; padding-left: 10px; padding-top: 12px;">
                <telerik:RadButton ID="RadButton2" runat="server" Text="Cancel" AutoPostBack="false" OnClientClicked="OnClientCancelClicked"></telerik:RadButton>
            </div>
    
            <%--Delete Button--%>
            <div style="float: left; padding-left: 10px; padding-top: 12px;">
                <telerik:RadButton ID="RadButton3" runat="server" Text="Delete" AutoPostBack="false" OnClientClicked="OnClientDeleteClicked"></telerik:RadButton>
            </div>
    
            <asp:HiddenField runat="server" ID="UidHiddenField" />
            <%--</div>--%>
        </ContentTemplate>
    </telerik:RadWindow>

     

     

    private const string ProviderSessionKey = "RadGanttResizingColumns";
    
    public XmlGanttProvider Provider
    {
        get
        {
            XmlGanttProvider provider = (XmlGanttProvider)Session[ProviderSessionKey];
            if (Session[ProviderSessionKey] == null || !IsPostBack)
            {
                provider = new XmlGanttProvider(Server.MapPath("~/App_Data/Tasks.xml"), false);
    
                Session[ProviderSessionKey] = provider;
            }
    
            return provider;
        }
    }
    
    protected void RadGantt1_TaskInsert(object sender, TaskEventArgs e)
    {
    
    }
    
    private void Page_Init(object sender, EventArgs e)
    {
        RadGantt1.Provider = Provider;
    }

     

     

     

     

  2. Clement
    Clement avatar
    3 posts
    Member since:
    Dec 2017

    Posted 30 May 2018 in reply to Telerik Admin Link to this post

    hi ! i have test your application and this is not working !
    I have an error on this code :

    function getTaskByUid(uid) {
                        var gantt = $find("RadGantt1");

    RadGantt1 is not found so gantt is empty !

  3. Peter Milchev
    Admin
    Peter Milchev avatar
    608 posts

    Posted 27 Aug Link to this post

    Hello,

    The Code Library project was updated to address the issues that might occur in MasterPage/ContentPage scenario. 

    Regards,
    Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top