编程知识 cdmana.com

How does jQuery Gantt package create a new ASP.NET project

jQuery Gantt Package It's a real cross platform , be based on HTML5 / jQuery Local implementation of , have 2 Different gantt The widget , Can satisfy you all based on gantt Visual requirements of . Also with ASP.NET WebControl and MVC Expand , It can be easily integrated into existing applications .

Click to download jQuery Gantt Package Trial version

VS 2012 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Forms Application, Create a project .
VS 2010 :FILE --> New --> Project --> Visual C# --> Web --> ASP.NET Web Application, Create a project .

1) Gant widget source code JS file

First , You need what the Gantt widget needs JS Source file . These documents are < The installation path >/Src In the folder . Copy this folder to the Project In the folder ( Although the size of this folder is very large , But it contains everything Themes、locales Wait for what you need CSS etc. , Not all CSS Will be loaded into your page ).

Continue to delete this Src In a folder bin Folder .

Then click in the solution explorer of the project " Display all files " Toolbar item to display the newly included Src Folder , And include it in the project .

 

2) practical JS Sample documents

Some with practical functions JS The file in < The installation path >/Samples/ In the script folder . Put the... In the above installation path Scripts The contents of the folder are copied to... In the project folder Scripts In the folder ( When you create a new project , The project folder will automatically create a Scripts Folder ).

Then follow the steps in the previous step to include the newly added script file into your project .

3) Create a sample data source (JSON data )

You usually use solid models 、ADO.NET To retrieve data from a database . however , To keep it simple , We will create a simple " Mission " list , And return it from the server to the client .

Create a file called TaskInfo To represent a task instance . stay Solution Explorer Right click the project name , Then add --> New projects --> class ( Call it TaskInfo.cs), And define a class similar to the following .

public class TaskInfo
{     
    public string Name { get; set; }
    public int IndentLevel { get; set; }
    public DateTime StartTime { get; set; }
    public string Effort { get; set; }
    public double ProgressPercent { get; set; }
    public string Resources { get; set; }
    public int ID { get; set; }
    public string PredecessorIndices { get; set; }
    public int SortOrder { get; set; }
    public string Description { get; set; }
    public object Tag { get; set; }
    public int Priority { get; set; }
    public DateTime PlannedStartTime { get; set; }
    public DateTime PlannedEndTime { get; set; }
    public double Cost { get; set; }
    public DateTime EndTime { get; set; }
}

then , Add a new general handler to the project ; This will provide the data source for the client page .

To be in visual studio Add a Generic handler, stay Solution Explorer Right click the project name , then Add --> New Item --> Generic Handler, And create a new instance , I'm going to call it , for example DataHandler.ashx.

In the general handler (DataHandler.ashx) Create a TaskInfos list , Use JavaScriptSerializer Or any other "JSON Serializer " Convert the list to json data , And add it to the response .

public class DataHandler : IHttpHandler
{
    DateTime dt = DateTime.Today;
    public void ProcessRequest(HttpContext context)
    {
        List<TaskInfo> taskItems = new List<TaskInfo>
        {
            new TaskInfo { Name = "Task 1", ID = 1,  StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 1" },

            new TaskInfo { Name = "Child Task 1", ID = 2,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 2" },

            new TaskInfo { Name = "Task 3", ID = 3, StartTime =dt, Effort=TimeSpan.FromDays(4).ToString(), Description = "Description of Task 3" },

            new TaskInfo { Name = "Child Task 1", ID = 4,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(3).ToString(), Description = "Description of Task 4" },

            new TaskInfo { Name = "Child Task 2", ID = 5, IndentLevel=2, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 5" },

            new TaskInfo { Name = "Task 6", ID = 6, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), Description = "Description of Task 6" },

            new TaskInfo { Name = "Task 7", ID = 7, StartTime =dt, Effort=TimeSpan.FromDays(1).ToString(), Description = "Description of Task 7" },

            new TaskInfo { Name = "Child Task 1", ID = 8,IndentLevel=1, StartTime =dt, Effort=TimeSpan.FromDays(2).ToString(), PredecessorIndices="6+2" }

        };

        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        context.Response.Write(serializer.Serialize(taskItems));
    }
public bool IsReusable
{
    get
    {
        return false;
    }
}   
}

4) That contains the Gantt chart widget ASPX file .

establish .aspx Sample file

stay visual studio Of SolutionExplorer Right click the project name , Then add --> New projects -->Web Form( be called WebForm1.aspx).

In the created aspx Contains the following namespace .

<%@ Register Assembly="RadiantQ.Web.JQGantt" Namespace="RadiantQ.WebForms.JQGantt" TagPrefix="RQ" %>.

add to RadiantQ.Web.JQGantt.dll To your project reference , You can find... Here dll.< Installation folder >/Src/\bin/DotNET4MVC4/RadiantQ.Web.JQGantt.dll.

stay aspx Of <head> The following source files are referenced in the tag . Remember to link to the correct version of... In the last line of reference below RadiantQ jQuery Gantt.

 

<head runat="server">
    <title></title>
    <link id="themeChooser" href="<%= Page.ResolveClientUrl("~/Src/Styles/jQuery-ui-themes/smoothness/jquery-ui.css") %>" rel="stylesheet" />
    <link id="default" href="<%= Page.ResolveClientUrl("~/Src/Styles/radiantq.gantt.default.css") %>" rel="stylesheet" />
    <link href="<%= Page.ResolveClientUrl("~/Src/Styles/VW.Grid.css") %>" rel="stylesheet" />
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery-1.11.2.min.js") %>" type="text/javascript"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery-ui-1.11.4/jquery-ui.min.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/jquery.layout-latest.min.js") %>"></script>
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/Utils/date.js") %>" type="text/javascript"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/ResourceStrings/en-US.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/VW.Grid.1.min.js") %>"></script>
    <script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Src/Scripts/RadiantQ-jQuery.gantt.5.0.trial.min.js") %>"></script>
    <script src="<%= Page.ResolveClientUrl("~/Src/Scripts/RQGantt_Init.min.js")%>" type="text/javascript"></script>
</head>

 

Create Gantt Chart

Now include the code to retrieve the... Created above json file , Then initialize GanttControl Small components , Bind it to the loaded data .

stay WebForm1.aspx in , stay <body> Default in <form> In the label , Add the following tag .

 

<body>
    <form id="form1" runat="server">
        <RQ:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server"/>
         <div>
         </div>
    </form>
</body>

 

Initialize Gantt Chart
Now? , You have to set what you want in GanttTable The different columns shown in , You can use the GanttControl Of GanttTableOptions Property to implement . You can use the GanttControl Of GanttTableOptions Property to implement .

<RQ:GanttControl ID="gantt" DataSourceUrl="DataHandler.ashx" Height="500px" runat="server">
  <GanttTableOptions>
                <Columns>
                    <GanttBase:Column field="Activity.ID" width="25" title="ID" iseditable="false"></GanttBase:Column>

                    <GanttBase:Column field="Activity.ActivityName" width="200" title="Activity Name" clientTemplate="projectGanttNameTemplate" clientEditorTemplate="projectGanttNameEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.StartTime" width="100" title="StartTime" format="MM/dd/yy" clientEditorTemplate="startTimeEditor"></GanttBase:Column>                                                                                                   

                    <GanttBase:Column field="Activity.EndTime" width="100" title="EndTime" format="MM/dd/yy" clientEditorTemplate="endTimeEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.Effort" width="100" title="Effort" format="" clientEditorTemplate="effortEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.ProgressPercent" width="100" title="ProgressPercent" clientEditorTemplate="progressEditor"></GanttBase:Column>

                    <GanttBase:Column field="Activity.Assignments" width="100" title="Resource" iseditable="false" clientTemplate="resourceTemplate"></GanttBase:Column>

                    <GanttBase:Column field="Activity.PredecessorIndexString" width="100" title="Predecessor Index" clientEditorTemplate="predecessorEditor" clientTemplate="predecessorTemplate" isParentEditable="false"></GanttBase:Column>
                </Columns>
            </GanttTableOptions>    
    </RQ:GanttControl>
   <%-- Column Template--%> 
<script id="projectGanttNameTemplate" type="text/x-jquery-tmpl">
         <div class="rq-grid-expand-indentWidth" style="height: 1px; width: ${data.IndentWidth_M()}px"></div>
         <div style="width: 12px; display: ${data.IsParent_M() ? "block" :"none" }" class="arrowContainer">
         <div onclick="ExpanderOnclick(this,event)" id="Div2" class="${ data.IsExpanded_M() ? " rq-grid-expand-arrow rq-grid-collapse-arrow": "rq-grid-expand-arrow"} rq-Ignore-click"></div>
         </div>
         <div class="rq-grid-expander-text">${data.Activity.ActivityName}</div>
    </script>  
    <script id="predecessorTemplate" type="text/x-jquery-tmpl">
        <div>${data.PredecessorIndexString_M() || '' }</div>
    </script>
<%--Column Editors  --%>
    <script id="startTimeEditor" type="text/x-jquery-tmpl">
        <input data-bind='ActivityTimeBinder: Activity_M().StartTime_M' />
    </script>
    <script id="endTimeEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().EndTime_M' data-getvaluename='getDate' data-setvaluename='setDate' data-valueupdate='onBlur' data-role="DateTimePicker" />
    </script>
    <script id="effortEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().Effort_M' data-role="DurationPicker" />
    </script> 
    <script id="progressEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: Activity_M().ProgressPercent_M' data-role="spinner" data-options='{"min":0, "max": 100}' />
    </script> 
    <script id="predecessorEditor" type="text/x-jquery-tmpl">
        <input data-bind='value: PredecessorIndexString' />
    </script>

gantt Now it's completely set up , Can display from ashx The task returned by the handler .

take WebForm1.aspx Set to " The start page ". You can do this by right clicking the file in solution explorer and selecting " Set to start page " To achieve .

Here's the final Gantt Chart :

 

Related product introduction :

VARCHART XGantt Support ActiveX、.Net Equal platform C# Gantt chart control
AnyGantt Ideal tool for building complex and rich Gantt charts
phGantt Time Package A Gantt chart for the management of assignments and time
dhtmlxGantt Interactive JavaScript / HTML5 Gantt Chart

APS It's Huidu technology 15 Years of industry experience and technology precipitation , By connecting enterprises to receive orders 、 purchase 、 manufacture 、 The whole supply chain process, such as warehousing and logistics , Help to improve the production efficiency of enterprises .>> see APS Details

Want to buy a genuine Gantt chart license , Or for more product information, please click 【 Consult online customer service 】

版权声明
本文为[roffey]所创,转载请带上原文链接,感谢

Scroll to Top