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.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;
}